2014-10-16 77 views
4

問題陳述:保持從頁網MVC複選框狀態頁面中MVC剃刀

我使用的CodePlex上(Codeplex grid.mvc)的網格來實現我的application.Everything網格工作正常與所有最近我在網格中添加了複選框,用於選擇多行來執行基於多重選擇的操作。即使我能夠在多個選擇上執行各種操作。

問題我現在面臨什麼:

  • 我不能夠保留複選框的選中狀態,當用戶 開關從一個網頁到另一個。
  • 無法添加選中標題部分中的所有複選框以選中網格中的所有 複選框。

如何做到這一點做一些研究之後,我才知道在網格中的複選框狀態可以通過2種方式被保留:

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

形象,爲您refernce:

enter image description here

回答

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

由於每個頁面將回發此答案將無法正常工作。當我們點擊頁面2時,創建的數組將被銷燬。 – 2014-10-16 12:48:30

+1

尋呼機應該執行ajax調用,並且如果它已完整發布,請將其保存在hiddenField而不是數組中。 – 2014-10-16 13:09:47

1

嘗試使用localStorage的

localStorage.setItem("Idofcheckbox",true) 

localStorage.getItem("Idofcheckbox") 

注:localStorage的將值存儲爲字符串。