javascript - Maintain Grid MVC checkbox state from page to page in MVC Razor - Stack Overflow

admin管理员组

文章数量:1388805

Problem Statement:

I'm using the grid provided by codeplex(Codeplex grid.mvc) to implement the grid in my application.Everything was working fine with all the operations.Recently I added checkbox in the grid for selecting multiple rows for performing some operation based on multi-selection.Even i'm able to perform various operation on multiple selection.

Problems what i'm facing:

• I'm not able to retain the state of checkbox selected when the user switches from one page to the other.
• Not able to add Select all checkbox in the header section for selecting all the checkbox in the grid.

How to do this?After doing some research i came to know that checkbox state in the grid can be retained in 2 ways:

1. We can store on client side in cookies, and remain it after page loads.
2. We can store it on server side, when user change checkbox state you can make an ajax call to change the checkbox state. Remain state on server side, when building page layout.

Can anyone please elaborate on this..???or else can anyone suggest me some ways of solving both of my problems???

Razor View Code:

    @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>
       }

Image for your refernce:

Problem Statement:

I'm using the grid provided by codeplex(Codeplex grid.mvc) to implement the grid in my application.Everything was working fine with all the operations.Recently I added checkbox in the grid for selecting multiple rows for performing some operation based on multi-selection.Even i'm able to perform various operation on multiple selection.

Problems what i'm facing:

• I'm not able to retain the state of checkbox selected when the user switches from one page to the other.
• Not able to add Select all checkbox in the header section for selecting all the checkbox in the grid.

How to do this?After doing some research i came to know that checkbox state in the grid can be retained in 2 ways:

1. We can store on client side in cookies, and remain it after page loads.
2. We can store it on server side, when user change checkbox state you can make an ajax call to change the checkbox state. Remain state on server side, when building page layout.

Can anyone please elaborate on this..???or else can anyone suggest me some ways of solving both of my problems???

Razor View Code:

    @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>
       }

Image for your refernce:

• javascript
• jquery
• asp-mvc-4
• razor
• codeplex

Share Improve this question Follow edited Oct 16, 2014 at 11:59 Vishal asked Oct 16, 2014 at 11:53 VishalVishal 2,01744 gold badges2525 silver badges4242 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Try to use Localstorage

localStorage.setItem("Idofcheckbox",true)

localStorage.getItem("Idofcheckbox") 

Note : Localstorage will store value as string.

Why not saving them client side ? Where selectedCheckbox is a global variable.

var selectedCheckbox = [];

$("input[type='checkbox']").click(function () {
    if($(this)[0].checked)
    {
        selectedCheckbox.push($(this).attr("id"));
    }
    else
    {
        selectedCheckbox = $.grep(selectedCheckbox , function (item) {
            return item != $(this).attr("id");
        });
    }
});

And after rendering the table :

$("input[type='checkbox']").each(function () {
    if($.inArray($(this).attr("id"), selectedCheckbox) > -1)
    {
        $(this).attr("checked","checked");
    }
});

Below Solution works:

Grid MVC: Add a column at the start of the grid

columns.Add()
                 .Titled("<input class='checkAll' type='checkbox' name='checkAll' value='.checkAll'/>")
                 .Encoded(false)
                 .Sanitized(false)
                 .SetWidth(20)
                 .RenderValueAs(item => @Html.CheckBox("checked", false, new { @class = "check-item", ID = item.Id}));

JavaScript:

$('.checkAll:checkbox').change(function () {
    if ($(this).prop("checked")) {
       $('input:checkbox').prop('checked', true);
      }
    else {
         $('input:checkbox').prop('checked', false);
        }
});

本文标签： javascriptMaintain Grid MVC checkbox state from page to page in MVC RazorStack Overflow