ページングでmvc3 webgridのチェックボックスの値を保持する方法

Question

MVC3 Webgridを使用してデータを表示し、サーバー側のページング/並べ替えを適用しました。グリッドにはチェックボックスの列もあります。私の問題は、ページを変更すると、選択したレコードが失われていることです。選択した行IDをセッション変数に格納できますが、セッションから値を取得できず、Webgridのチェックボックスにバインドできません。

誰かがこの問題について何か尋ねることはできますか？他にも/より良いアプローチがあるかどうか教えてください。

ありがとうございます。

Answer 1

ここで私がどのようにしたかを示す小さなサンプルプロジェクトです。これは主にスタックオーバーフローで見つかったさまざまな回答に基づいています。

トリックは、@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; } 
    } 
}