2017年1月24日 / 最終更新日 : 2017年1月24日 sevenfirst ASP.NET MVC

ASP.NET MVCでPagedListを使ったページネーション

バージョン

Visual Studio 2015 Express
PagedListプラグイン 1.17.0
PagedList.Mvcプラグイン 4.5.0

手順

1.ASP.NET MVCプロジェクトを新規作成します。

2.モデルを作成します。（例として下記のようなクラスを作成します）

クラス名：Worker(Modelsフォルダ内に作成)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PagedListSample.Models
{
    public class Worker
    {
        public int id { get; set; }
        public string name { get; set; }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace PagedListSample.Models

{

public class Worker

{

public int id { get; set; }

public string name { get; set; }

}

追加したら一度ビルドを行います。（これがないと次のスキャフォールディングでエラーが発生します）

3.スキャフォールディング機能を使ってコントローラとビューを作成します。

Controllerフォルダを右クリックして「追加」→「コントローラ…」をクリックします。

スキャフォールディングを追加画面が表示されるので「Entiry Frameworkを使用した、ビューがあるMVC5コントローラー」をダブルクリックします。

モデルクラスは「Worker」、データコンテキストクラスは「ApplicationDbContext」、コントローラ名は「WorkersController」に設定します。その他はデフォルトのままでOKです。

追加ボタンをクリックします。（よくやってしまうのですが、モデルクラス追加に一度ビルドを行っていないと「選択したコードジェネレータを実行中にエラーが発生しました」と表示されます）

4.これでビルドを行い実行します。

Webブラウザが表示されるので、「http://localhost:59174/workers」を開くとworkersのCRUD機能が実装されたページが表示されます。(59174の部分は環境により異なります)

5.PagedListプラグインを組み込みます。

メインメニューから「ツール」→「NuGetパッケージマネージャー」→「ソリューションのNuGetパッケージの管理…」をクリックします。

ソリューションのパッケージの画面が表示されるので、参照タブをクリックし検索欄に「PagedList」と入力します。するとリストに「PagedList.Mvc」が表示されるのでクリックします。右側のリストにプロジェクト名が表示されるのでチェックしてインストールボタンをクリックします。これでインストールが完了なのでタブを閉じます。

6.「workers/page0」のようなURLを受け付けるためにルート設定変更できるようにします。

App_Startフォルダの中にあるRouteConfig.csにあるRegisterRoutes()の先頭に下記のコードを追加します。

public static void RegisterRoutes(RouteCollection routes)
{
    // 属性によるルート設定を有効化(この1行を追加)
    routes.MapMvcAttributeRoutes();

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

public static void RegisterRoutes(RouteCollection routes)

{

// 属性によるルート設定を有効化(この1行を追加)

routes.MapMvcAttributeRoutes();

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(

name: "Default",

url: "{controller}/{action}/{id}",

defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

);

}

7.WorkersControllerクラスをPagedList対応に変更します。

WorkersControllerクラスのIndex()の元のコードはこのようになっています。

// GET: Workers
public ActionResult Index()
{
    return View(db.Workers.ToList());
}

// GET: Workers

public ActionResult Index()

{

return View(db.Workers.ToList());

}

これを下記のように変更します。

// GET: Workers
// GET: Workers/index
// GET: Workers/page1
[Route("~/workers")]
[Route("~/workers/index")]
[Route("~/workers/page{page}")]
public ActionResult Index(int?page)
{
    // pageがnullなら1を設定する。
    // pageが0以下だとArgumentOutOfRangeExceptionが発生するので1に設定する。
    // 1ページあたりの表示数をpageSizeに設定する。
    int pageNumber = page ?? 1;
    if (pageNumber < 1) pageNumber = 1;
    int pageSize = 3;

    // IPagedList<Worker>に変換してViewに渡す。
    // ※OrderBy()がないとNotSupportedException(メソッド'Skip'は、LINQ to Entitiesでは並べ替え済みの入力に対してのみサポートされます。メソッド'Skip'の前に'OrderBy'を呼び出す必要があります)が発生してしまう。
    IPagedList<Worker> workers= db.Workers.OrderBy(a => a.name).ToPagedList(pageNumber, pageSize);
    return View(workers);
}

// GET: Workers

// GET: Workers/index

// GET: Workers/page1

[Route("~/workers")]

[Route("~/workers/index")]

[Route("~/workers/page{page}")]

public ActionResult Index(int?page)

{

// pageがnullなら1を設定する。

// pageが0以下だとArgumentOutOfRangeExceptionが発生するので1に設定する。

// 1ページあたりの表示数をpageSizeに設定する。

int pageNumber = page ?? 1;

if (pageNumber < 1) pageNumber = 1;

int pageSize = 3;

// IPagedList<Worker>に変換してViewに渡す。

// ※OrderBy()がないとNotSupportedException(メソッド'Skip'は、LINQ to Entitiesでは並べ替え済みの入力に対してのみサポートされます。メソッド'Skip'の前に'OrderBy'を呼び出す必要があります)が発生してしまう。

IPagedList<Worker> workers= db.Workers.OrderBy(a => a.name).ToPagedList(pageNumber, pageSize);

return View(workers);

}

ここまでの作業が成功していれば、下記のようなURLを入力するとpageに合わせた項目が表示されるようになります。

http://localhost:59174/workers
http://localhost:59174/workers/page1
http://localhost:59174/workers/page2

8.最後にビューをPagedList対応に変更します。

先頭に@usingを追加してPagedListを使用できるようにします。

modelはPagedList.IPagedList型に変更します。変更しなくてもリストは更新されますが、ページネーションを実装するには変更する必要があります。

@using PagedList.Mvc

<!-- [at]model IEnumerable<PagedListSample.Models.Worker>を下記のように変更 -->
@model PagedList.IPagedList<PagedListSample.Models.Worker>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            <!-- [at]Html.DisplayNameFor(model => model.name)は使えなくなるので下記のように変更 -->
            @Html.DisplayNameFor(model => model.FirstOrDefault().name)
        </th>
<th></th>
    </tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </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>

<!-- 現在のページ情報(ModelをIPagedListに変更しないと使えない) -->
<div>
    Page: @Model.PageNumber / @Model.PageCount
</div>

<!-- ページ選択用リンク(ModelをIPagedListに変更しないと使えない) -->
<div>
    @Html.PagedListPager(Model, page => Url.Action("page" + page, "Workers"))
</div>

@using PagedList.Mvc

@model PagedList.IPagedList<PagedListSample.Models.Worker>

ViewBag.Title = "Index";

}

<h2>Index</h2>

<p>

@Html.ActionLink("Create New", "Create")

</p>

<tr>

<th>

@Html.DisplayNameFor(model => model.FirstOrDefault().name)

</th>

</tr>

@foreach (var item in Model)

{

<tr>

<td>

@Html.DisplayFor(modelItem => item.name)

</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("page" + page, "Workers"))

</div>

これで実行するとページの下側にページ番号やページネーションが表示されます。クリックしてページが切り替われば成功です。

カテゴリー: ASP.NET MVC

SevenFirst

ASP.NET MVCでPagedListを使ったページネーション

バージョン

手順

コメントを残すコメントをキャンセル

バージョン

手順

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル