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

Using local storage to set values in a view MVC

本文关键字：MVC 视图 设置 存储      更新时间：2023-09-26

我有一个程序，它的作用有点像向导，所以它从第 1 页开始，单击下一步，第 2 页，单击下一步，第 3 页，等等......在按钮单击时，我正在使用 javascript 将某些复选框控件值放入本地存储中。 我的问题是，当我按返回转到上一页时，控件值重置为 0/false。 如何在 MVC 中制作页面加载类型效果以从本地存储重新填充这些值。

一种选择是使用隐藏的 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）。我们添加了"下一个"和"上一个"按钮，它们在选项卡中循环。它运行得非常好，对客户来说很有意义，我们不必在页面之间维护表单字段状态。每个人都赢了。

我决定将 JavaScript 直接放在引用我的 JavaScript 文件的视图上。 我把我所谓的 LoadPage（） 方法放在页面顶部的@Javascript部分......在 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和本地存储更新其视图的示例。 我希望我的解决方案对某人有所帮助！

相关文章：