RealPath:
WebPath:
2016/11/08 17:47 (JST) 更新
掲示板作成 >>

ページング処理

Contents

コメントの件数が増えてくる(たとえばコメント数が1000件等)と、1ページの大きさが長くなりすぎて利便性が落ちます。
今回は一定のコメント数毎にページを分ける処理、いわゆるページング処理を実装します。

今回用いるデータ

とりあえず以下のように5件程度のコメントがある状態を作っておきます。
img--600--size

属性によるルート設定の有効化

属性によるルート設定を有効化します。

public static void RegisterRoutes(RouteCollection routes)
{
	routes.MapMvcAttributeRoutes(); // ★これを追加
	.....

ページング用ルート設定

CommentsController.Index にページ番号パラメータを渡せるようにします。

具体的には http://localhost:xx/ および http://localhost:xx/page<ページ番号>CommentsController.Index が呼ばれるようにルート設定を行います。

public class CommentsController : Controller
{
	....
	[Route("~/")] // ★ココを追加
	[Route("~/page{page}")] // ★ココを追加
	public ActionResult Index(int? page) // ★引数を追加
	{
		....

ページ番号が指定されなかった場合を想定し、引数が int? page にように null 許容型になっていることに注意してください。

ページング処理用パッケージのインストール

Package Manager Console にて以下を実行します。

PM> Install-Package PagedList.Mvc

リスト抽出部分の書き換え

Controllers/CommentsController.cs の中身を以下のように書き換えます。

using PagedList; // 拡張メソッド ToPagedList の有効化
...
public ActionResult Index(int? page)
{
	int pageNumber = page ?? 1; // ページ番号が null だった場合は 1 に補正する
	int pageSize = 3; // 1ページに表示する項目数

	// SELECT (ここは変わらない)
	var comments = from comment in db.Comments
	               orderby comment.Created descending
	               select comment;

	// comments.ToList() の代わりに comments.ToPagedList() を用いる
	return View(comments.ToPagedList(pageNumber, pageSize));
}

一覧ビューの書き換え

受け取りモデルの変更

Views/Comments/Index.cshtml 先頭部のモデル宣言を変更

@model IEnumerable<BbsSample.Models.Comment>


@using PagedList.Mvc
@model PagedList.IPagedList<BbsSample.Models.Comment>

@model@using についての説明は省きますがなんとなく意味は察してください。

PagedList部分に赤線が付いてエラーになる場合は F7 キーでビルドしなおしたりすると解消されたりします。

ページめくり表示

Views/Comments/Index.cshtml 最下部に以下を追加

....
....

<!-- 現在のページ情報 -->
<div>
	Page: @Model.PageNumber / @Model.PageCount
</div>

<!-- ページ選択用リンク -->
<div>
	@Html.PagedListPager(Model, page => Url.Action("Index", "page" + page))
</div>

ここにおける @ModelPagedList.IPagedList 型のインスタンスです。
@Html.PagedListPager は PagedList.Mvc パッケージにより追加された HtmlHelper のメソッドです。

動作結果

一度に表示される発言の件数が3件に制限されました。ページ下部にはページめくり用のリンクが出現しています。
img--500--size

2ページ目の表示。
img--500--size