ASP.NET MVCで定番のpager。使い方のメモ。
下記、完成イメージ。
前提
- testdbにmembersテーブルがある(name,emailカラムが存在)
- とりあえずスキャフォールドでControllerとViewが出来ている状態
準備
NuGetでPagedList.Mvcをインストールしておく。
実装
今回はIndexにおけるList表示にPagerを仕込みたいと思います。
標準で生成されているIndexアクションを下記のように変更します。
Controller
+using PagedList;
（省略）
// GET: Members
-public ActionResult Index()
-{
- return View(db.Members.ToList());
-}
+public ActionResult Index(int? page)
{
+ int pageNumber = page ?? 1;
+ int pageSize = 5;
+ var query = db.Members.ToList();
+ return View(query.ToPagedList(pageNumber,pageSize));
}
特に難しいところは何もありません。
View
つづいてView。PagedList.Mvcをusingします。
モデルをIEnumerable<>からPagedLinstIPagedList<>に変更します。
なお、model.name等の指定が使えなくなりますので、model.FirstOrDefault().name等に変更します。
-@model IEnumerable<pagedlist01.Models.Members>
+@using PagedList.Mvc
+@model PagedList.IPagedList<pagedlist01.Models.Members>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
+ @Html.DisplayNameFor(model => model.FirstOrDefault().name)
</th>
<th>
+ @Html.DisplayNameFor(model => model.FirstOrDefault().email)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.DisplayFor(modelItem => item.email)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.id }) |
@Html.ActionLink("Details", "Details", new { id=item.id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.id })
</td>
</tr>
}
</table>
<div>
+ Page: @Model.PageNumber / @Model.PageCount
</div>
<div>
+ @Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
</div>
後は必要なフォーマットをHTMLヘルパーで指定します。以上。