javascript - 在 MVC Razor 中从一个页面到另一个页面维护 Grid MVC 复选框状态

Question

问题陈述:

我正在使用 codeplex ( Codeplex grid.mvc ) 提供的网格在我的应用程序中实现网格。所有操作都运行良好。最近我在网格中添加了复选框，用于选择多行以执行一些基于关于多选。即使我能够对多选执行各种操作。

我面临的问题:

• 我无法保留用户选中复选框的状态 从一页切换到另一页。
• 无法在标题部分添加全选复选框以选择所有 网格中的复选框。

如何做到这一点？在做了一些研究后，我开始知道可以通过两种方式保留网格中的复选框状态:

1. 我们可以在客户端存储在 cookie 中，并在页面加载后保留它。
2. 我们可以将其存储在服务器端，当用户更改复选框状态时 可以进行 ajax 调用来更改复选框状态。保持状态 服务器端，在构建页面布局时。

任何人都可以详细说明这个..？？？或者任何人都可以建议我一些解决我的两个问题的方法吗？？？

Razor 查看代码:

    @model IEnumerable<Web.Areas.Smart.Models.OrderModel>

    @using GridMvc.Html
    @{
        ViewBag.Title = "Index";
    }

    <h2>Details</h2>
    <hr />

    <div>
        @Html.Grid(Model).Columns(columns =>
        {

        columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(itm => @Html.CheckBox("checked", itm.InputModel.ChkStatus, new { @class = "check-item", ID= itm.InputModel.AssetID}));
        columns.Add(itm => itm.OrderNumber).Titled("Order #");
        columns.Add(itm  => itm.OrderDate).Format("{0:MM/dd/yyyy}").Titled("Order Date");
        columns.Add(itm => itm.InvoiceNumber).Titled("Invoice #");
        columns.Add(itm => itm.InvoiceDate).Format("{0:MM/dd/yyyy}").Titled("Invoice Date");
        columns.Add(itm => itm.ID).Titled("ID");           

        }).WithPaging(5).Sortable(true).Filterable(true)

        <br />
        <input type="button" class="btn btn-primary" value="Create" onclick="@("location.href='"
         + Url.Action("Index", "Plan")
         + "'")" />

    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type='text/javascript'>
            $(function () {
                $('.datepicker').datepicker({
                    format: "mm/dd/yyyy",
                }).on('changeDate', function (e) {
                    $(this).datepicker('hide');
                });
            })
            $(function () {
                $(".check-item").click(function () {
                    //alert("item clicked, id = " + $(this).attr("ID"));
                    var assetID = $(this).attr("ID")
                    var Url = "@Url.Content("~/Plan/GetCount")";
                    $.ajax({
                        url: Url,
                        dataType: 'json',
                        data: { ID: id},
                        success: function (data) {

                        }
                    });
                });
            });

        </script>
       }

供您引用的图片:

Answer 1

尝试使用本地存储

localStorage.setItem("Idofcheckbox",true)

localStorage.getItem("Idofcheckbox") 

注意:Localstorage 会将值存储为字符串。