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

 

バージョン
  • Visual Studio 2015 Express
  • PagedListプラグイン 1.17.0
  • PagedList.Mvcプラグイン 4.5.0
手順

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

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

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

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

 

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()の先頭に下記のコードを追加します。

 

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

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

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

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

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

 

 

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

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

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

 

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

 

 

 

 

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です