PagedListを使ってみる

3928 ワード
ASP.NET C# C# テキストリンク

ASP.NET MVCで定番のpager。使い方のメモ。

下記、完成イメージ。

pagelist

前提

  • 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ヘルパーで指定します。以上。

参考