MVC 면도기 페이지에 페이지에서 그리드 MVC 체크 박스 상태를 유지

Question

문제 설명 : 나는 모두와 함께 잘 작동되었다 내 application.Everything에서 그리드를 구현하는 코드 플렉스 (Codeplex grid.mvc)에 의해 제공되는 그리드를 사용하고

작업. 최근에 다중 선택을 기반으로 일부 작업을 수행하기위한 여러 행을 선택하기위한 표에 확인란을 추가했습니다. 여러 선택에서 다양한 작업을 수행 할 수 있습니다. 내가 직면하고있는 무슨

문제가 :

• 내가 선택한 체크 박스의 상태를 유지할 수 없습니다있을 때 한 페이지에서 다른 사용자 전환됩니다.
• 추가 할 수 없음 머리글 섹션의 모든 확인란을 선택하여 표에있는 체크 박스를 모두 선택합니다. 내가 그리드에서 해당 체크 박스 상태는 2 가지 방법으로 유지 될 수 알게 된 몇 가지 조사를 수행 한 후

는

이 작업을 수행하는 방법을 : 우리는 쿠키를 클라이언트 측에 저장할 수

1. 는 남아 페이지가로드 된 후
2. 우리는 서버 측에 저장할 수 있습니다. 사용자가 체크 박스 상태를 변경하면 은 체크 박스 상태를 변경하기 위해 ajax 호출을 할 수 있습니다. 페이지 레이아웃을 작성할 때 서버쪽에 상태를 유지합니다.

누군가가 정교하게 제발 할 수 있습니까 .. ??? 아니면 다른 사람이 내 문제를 해결할 수있는 몇 가지 방법을 제안 할 수 있습니까 ???

면도기 코드보기 : 당신의 refernce를위한

@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

왜 그들에게 클라이언트 측을 저장하지? 여기서 selectedCheckbox는 전역 변수입니다.

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"); 
     }); 
    } 
}); 

그리고 테이블을 렌더링 후

:

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

Answer 2

봅니다 로컬 스토리지

localStorage.setItem("Idofcheckbox",true) 

localStorage.getItem("Idofcheckbox") 

사용 주 : 로컬 스토리지는 문자열로 값을 저장합니다.