如何在分頁的mvc3 webgrid中保留複選框值

Question

我正在使用MVC3 Webgrid來顯示一些數據，並已應用服務器端分頁/排序。我在網格中也有一個複選框列。我的問題是，當我改變頁面時，我正在丟失選定的記錄。我可以將選定的行ID存儲在會話變量中，但無法從會話中檢索值並綁定到Webgrid中的複選框。

有人可以在這個問題上的一些亮光？請讓我知道是否有其他更好的方法。

在此先感謝。

Answer 1

這是一個小樣本項目，展示了我是如何做到的。它基於我在Stack Overflow上發現的不同答案。

訣竅是使用@Html.Raw，並且只在選擇該項目時發出checked屬性。設置checked="false"將不起作用！

HomeController.cs：

using System; 
using System.Collections.Generic; 
using System.Web.Mvc; 
using CheckboxPaging.Models; 

namespace CheckboxPaging.Controllers 
{ 
public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var players = new List<Player> 
          { 
           new Player {Id = "NOR41", Rank = 1, Name = "THORESEN Patrick", Country = "NOR", Points = 16}, 
           new Player {Id = "RUS11", Rank = 2, Name = "MALKIN Yevgeni", Country = "RUS", Points = 14}, 
           new Player {Id = "SWE40", Rank = 3, Name = "ZETTERBERG Henrik", Country = "SWE", Points = 13}, 
           new Player {Id = "USA67", Rank = 4, Name = "PACIORETTY Max", Country = "USA", Points = 12}, 
           new Player {Id = "SWE21", Rank = 5, Name = "ERIKSSON Loui", Country = "SWE", Points = 11}, 
           new Player {Id = "NOR19", Rank = 6, Name = "SKRODER Per-Age", Country = "NOR", Points = 11}, 
           new Player {Id = "CAN2", Rank = 7, Name = "KEITH Duncan", Country = "CAN", Points = 11}, 
           new Player {Id = "FIN51", Rank = 8, Name = "FILPPULA Valtteri", Country = "FIN", Points = 9}, 
           new Player {Id = "CAN20", Rank = 8, Name = "TAVARES John", Country = "CAN", Points = 9}, 
           new Player {Id = "USA26", Rank = 10,Name = "STASTNY Paul", Country = "USA", Points = 9} 
          }; 

     ViewData["SelectList"] = HttpContext.Session["SelectList"] ?? new List<String>(); 

     return View(players); 
    } 

    [HttpPost] 
    public ActionResult Select(bool isChecked, String id) 
    { 
     var selectList = (List<String>)HttpContext.Session["SelectList"] ?? new List<String>(); 
     if(isChecked && !selectList.Contains(id)) 
     { 
      selectList.Add(id); 
     } 
     else if(!isChecked && selectList.Contains(id)) 
     { 
      selectList.RemoveAll(s => s == id); 
     } 
     HttpContext.Session["SelectList"] = selectList; 

     return Content("OK"); 
    } 

    public ActionResult About() 
    { 
     return View(); 
    } 
} 
} 

Index.cshtml：

@model IEnumerable<CheckboxPaging.Models.Player> 

<script type="text/javascript"> 
    $(function() { 
     $(':checkbox').change(function() { 
      $.ajax({ 
       url: '@Url.Action("Select")', 
       type: 'POST', 
       data: { isChecked: $(this).is(':checked'), id: $(this).val() }, 
       success: function (result) { 
       } 
      }); 
     }); 
    }); 
</script> 

@{ 
    var grid = new WebGrid(source: Model, 
     defaultSort: "Rank", 
     canSort: true, 
     rowsPerPage: 5 
     ); 
} 

<h2>SCORING LEADERS As of TUE 15 MAY 2012</h2> 

@grid.GetHtml(
    tableStyle: "grid", 
    headerStyle: "head", 
    alternatingRowStyle: "alt", 
    columns: grid.Columns(
     grid.Column("Select", format: @<text><input name="Id" type="checkbox" value="@item.Id" @Html.Raw(((List<String>)ViewData["SelectList"]).Contains(@item.Id) ? "checked" : "") /></text>), 
     grid.Column("Rank", "Rank"), 
     grid.Column("Name", "Name"), 
     grid.Column("Country", "Country"), 
     grid.Column("Points", "Points") 
     ) 
    ) 

Player.cs：

using System; 

namespace CheckboxPaging.Models 
{ 
    public class Player 
    { 
     public String Id { get; set; } 
     public int Rank { get; set; } 
     public String Name { get; set; } 
     public String Country { get; set; } 
     public int Points { get; set; } 
    } 
}