Question

我有一个类似于向导的程序，所以它来自第1页，点击下一页，第2页，点击下一页，第3页等...按钮点击我正在使用javascript来放置某些复选框控件价值进入localstorage。我的问题是，当我按回去上一页时，控制值被重置为0 / false。如何在MVC中创建页面加载类型效果以从本地存储中重新填充这些值。

Answer 1

一种选择是使用隐藏的DIV：

@using(Html.BeginForm()) {
    <div id="step1">
        <!--form objects-->
        <input type="button" id="to_step2_button" />
    </div>
    <div id="step2" style="display: none;">
        <!--form objects-->
        <input type="button" id="to_step1_button" value="Back" />
        <input type="button" id="to_step3_button" value="Next" />
    </div>
    <div id="step3" style="display: none;">
        <!--form objects-->
        <input type="button" id="to_step2_button" value="Back" />
        <input type="submit" id="finish_button" value="Finish" />
    </div>
}

并使用jquery / javascript隐藏/显示DIV，具体取决于步骤。

此方法还有其他好处，例如：您可以使用1页，1个模型，1个表单，无需重新加载。

轶事：我在一个物业租赁网站上工作，上市表格有87个字段被分组，每个组在一个标签视图中有一个标签（它们只是隐藏并显示内部的div表格）。我们添加了循环选项卡的Next和Previous按钮。它工作得非常好，对客户来说很有意义，而且我们不必为了在页面之间维护表单字段状态而烦恼。每个人都赢了。

Answer 2

我决定将JavaScript直接放在引用我的JavaScript文件的View上。我在我的页面顶部的@Javascript部分中放入了我称为LoadPage（）方法的内容...在LoadPage（）内部，我的代码看起来像这样：

function loadPage(currentPage) {

    var currentPage = currentPage;

    if (window.localStorage.getItem("chkProvider") == 'true') {
        document.getElementById('chkProvider').checked = true;
    }
    if (window.localStorage.getItem("chkSubscriber") == 'true') {
        document.getElementById('chkSubscriber').checked = true;
    }
}

当页面加载并设置我需要更新的值时，它会运行。这是一个如何使用JavaScript和本地存储更新其View的示例。我希望我的解决方案可以帮助别人！

使用本地存储在视图MVC中设置值

2 个答案: