ASP.NET(VB.NET) MVCモデル入門～X.PagedListを使ったページング処理

X.PagedListを使ってページングするプログラム

今回は、こちらの記事で作成したプログラムをベースに、プロジェクトを新規に作成し、一覧画面にページング処理を追加します。
ページング処理は、NuGetパッケージの X.PagedList を使って実装します。
X.PagedListパッケージに関する内容は、以下のマイクロソフトの公式サイトを参照してください。

Microsoft Learn ～ページングの追加

新規プロジェクトの作成

新規にプロジェクトを作成します。
今回のサンプルプログラムでは、プロジェクト名を「Test5」として作成します。
プロジェクトの作成方法は、こちらの記事を参照してください。

X.PagedListのインストール

ページング処理を行うNuGetパッケージ「X.PagedList」をインストールします。
メニューバーから「ツール」→「NuGetパッケージマネージャー」→「ソリューションのNuGetパッケージの管理」を選択します。

NuGetソリューション画面から「参照」タブを選択し、検索ボックスに「x.pagedlist」と入力します。
表示された一覧から「X.PagedList.Mvc」を選択します。
インストールするプロジェクトにチェックを入れ、バージョンは最新の安定版を選択して、「インストール」ボタンを押下します。

しばらくすると確認画面が表示されるので、「OK」ボタンを押下します。

「インストール済み」タブを選択して、インストール結果を確認します。
「X.PagedList.Mvc」をインストールすると、自動的に「X.PagedList」と「X.PagedList.Web.Common」もインストールされます。

bootstrapのインストール

X.PagedListで使用するページ送りボタンを装飾するために、「bootstrap」をインストールします。
bootstrapの最新バージョンは5.22(2022/10/25現在)ですが、このプロジェクトでは、Visual Studioの標準バージョンである3.41を使用します。
NuGetソリューション画面から「参照」タブを選択し、検索ボックスに「bootstrap」と入力します。
表示された一覧から「bootstrap」を選択します。
インストールするプロジェクトにチェックを入れ、バージョンは「3.41」を選択して、「インストール」ボタンを押下します。

しばらくすると確認画面が表示されるので、「OK」ボタンを押下します。

「インストール済み」タブを選択して、インストール結果を確認します。

データベースの作成

プログラムを作成する前に、データベースを作成しておきます。
データベースは、Visual Studio付属の「SQL Server Express LocalDB」を使用します。
データベースの作成方法は、こちらの記事を参照してください。
データベースの仕様は、以下の通りです。
IDをプライマリーキーとして、1から始まる自動採番とします。

データベースの仕様

データベース名：TestDb
テーブル名：Emp

名前	データ型	Nullを許容	その他
Id	int	NOT NULL	IDENTITY (1, 1)
Name	nvarchar(20)	NOT NULL
Address	nvarchar(50)	NOT NULL
Birthday	date	NOT NULL
Email	nvarchar(30)	NULL

EMPテーブル

EMPテーブルのデータも、あらかじめインサートしておきます。
メニューバーの「ツール」→「SQL Server」→「新しいクエリ」で、クエリ画面から以下のSQL文を使ってデータをインサートします。

データ

insert into Emp values(N'山田太郎',N'東京都千代田区丸の内１－１－１','2000/1/1','yamada@aaa.co.jp');
insert into Emp values(N'鈴木一朗',N'愛知県名古屋市中区３－１－１','1985/5/10','suzuki@bbb.co.jp');
insert into Emp values(N'佐藤花子',N'福岡県福岡市中央区区１－８－１','1998/11/30', 'hanako@bbb.co.jp');
insert into Emp values(N'斉藤洋',N'北海道札幌市中央区１－２－３','1970/3/21', 'hiroshi@aaa.co.jp');
insert into Emp values(N'田中権三郎',N'鹿児島県鹿児島市１０－１','1971/4/29', 'gonzaburo@ccc.co.jp');
insert into Emp values(N'高橋龍之介',N'千葉県千葉市中央区１－１','1981/12/24', 'ryunosuke@aaa.co.jp');
insert into Emp values(N'渡辺太',N'石川県金沢市１－１－１','1963/2/28', 'futoshi@aaa.co.jp');
insert into Emp values(N'山本恵子',N'東京都新宿区歌舞伎町１－４－１','1999/9/9', 'keiko@bbb.co.jp');
insert into Emp values(N'中村左門',N'大阪府大阪市北区１－３－２０','1993/8/16', 'samon@aaa.co.jp');
insert into Emp values(N'小林梅子',N'高知県高知市５－１－４５','1995/11/23', 'umeko@bbb.co.jp');

ADO.NET Entity Data Modelの作成

EMPテーブルを作成したら、VB.NETとデータベースを接続するために、ADO.NET Entity Data Modelを作成します。
モデル名は、「TestDbModel」とします。
ADO.NET Entity Data Modelの作成方法は、こちらの記事を参照してください。

Empクラスにアノテーションを追加

自動で作成されたEmpクラスの各プロパティに、アノテーションを追加します。
また、Birthdayプロパティに、表示フォーマットを追加します。

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.ComponentModel.DataAnnotations

Partial Public Class Emp
    <DisplayName("ID")>
    Public Property Id As Integer

    <DisplayName("氏名")>
    Public Property Name As String

    <DisplayName("住所")>
    Public Property Address As String

    <DisplayName("生年月日")>
    <DisplayFormat(DataFormatString:="{0:yyyy年MM月dd日}")>
    Public Property Birthday As Date

    <DisplayName("メール")>
    Public Property Email As String
End Class

Imports System

Imports System.Collections.Generic

Imports System.ComponentModel

Imports System.ComponentModel.DataAnnotations

Partial Public Class Emp

<DisplayName("ID")>

Public Property Id As Integer

<DisplayName("氏名")>

Public Property Name As String

<DisplayName("住所")>

Public Property Address As String

<DisplayName("生年月日")>

<DisplayFormat(DataFormatString:="{0:yyyy年MM月dd日}")>

Public Property Birthday As Date

<DisplayName("メール")>

Public Property Email As String

End Class

データベース操作用クラスの作成

データベースを操作するためのクラスを、「DbModel.vb」という名前で、「Data」フォルダーの配下に作成します。
「Data」フォルダーは、あらかじめ作成しておきます。

Imports System.Web.Mvc

Public Class DbModel
    Function GetEmp() As List(Of Emp)
        Dim emp As List(Of Emp)

        Using db As New TestDbEntities
            emp = db.Emp.ToList()
        End Using

        Return emp
    End Function
End Class

Imports System.Web.Mvc

Public Class DbModel

Function GetEmp() As List(Of Emp)

Dim emp As List(Of Emp)

Using db As New TestDbEntities

emp = db.Emp.ToList()

End Using

Return emp

End Function

End Class

コントローラーの作成

一覧画面用のコントローラーを作成します。
pageNumberは表示するページ番号、pageSizeは1ページに表示する件数です。
今回は1ページに4件づつ表示していきます。
10行目は、ページ番号を設定しますが、初回はページ番号が渡されないので、「1」を設定します。
13行目で、ビューに表示するデータを渡していますが、ToPagedList()メソッドを使って、表示するページ番号と件数を指定します。

Imports System.Web.Mvc
Imports X.PagedList

Namespace Controllers
    Public Class HomeController
        Inherits Controller

        Function Index(page? As Integer) As ActionResult
            Dim model As New DbModel
            Dim pageNumber As Integer = If(page, 1)
            Dim pageSize As Integer = 4

            Return View(model.GetEmp().ToPagedList(pageNumber, pageSize))
        End Function
    End Class
End Namespace

Imports System.Web.Mvc

Imports X.PagedList

Namespace Controllers

Public Class HomeController

Inherits Controller

Function Index(page? As Integer) As ActionResult

Dim model As New DbModel

Dim pageNumber As Integer = If(page, 1)

Dim pageSize As Integer = 4

Return View(model.GetEmp().ToPagedList(pageNumber, pageSize))

End Function

End Class

End Namespace

ビューの作成

一覧画面用のビューを作成します。
先頭行に「@Imports X.PagedList.Mvc」と記述して、X.PagedList.Mvcをインポートすることによって、26行目のページング機能(@Html.PagedListPager)が使えるようになります。

@Imports X.PagedList.Mvc
@ModelType IEnumerable(Of Emp)
@Code
    ViewData("Title") = "Index"
End Code

<table>
    <tr>
        <th>@Html.DisplayNameFor(Function(model) model.Id)</th>
        <th>@Html.DisplayNameFor(Function(model) model.Name)</th>
        <th>@Html.DisplayNameFor(Function(model) model.Address)</th>
        <th>@Html.DisplayNameFor(Function(model) model.Birthday)</th>
        <th>@Html.DisplayNameFor(Function(model) model.Email)</th>
    </tr>
    @For Each item In Model
        @<tr>
            <td>@Html.DisplayFor(Function(model) item.Id)</td>
            <td>@Html.DisplayFor(Function(model) item.Name)</td>
            <td>@Html.DisplayFor(Function(model) item.Address)</td>
            <td>@Html.DisplayFor(Function(model) item.Birthday)</td>
            <td>@Html.DisplayFor(Function(model) item.Email)</td>
        </tr>
    Next
</table>
<div>   
    @Html.PagedListPager(Model, Function(number) Url.Action("Index", New With {.page = number}))
</div>

@Imports X.PagedList.Mvc

@ModelType IEnumerable(Of Emp)

@Code

ViewData("Title") = "Index"

End Code

<table>

<tr>

<th>@Html.DisplayNameFor(Function(model) model.Id)</th>

<th>@Html.DisplayNameFor(Function(model) model.Name)</th>

<th>@Html.DisplayNameFor(Function(model) model.Address)</th>

<th>@Html.DisplayNameFor(Function(model) model.Birthday)</th>

<th>@Html.DisplayNameFor(Function(model) model.Email)</th>

</tr>

@For Each item In Model

@<tr>

<td>@Html.DisplayFor(Function(model) item.Id)</td>

<td>@Html.DisplayFor(Function(model) item.Name)</td>

<td>@Html.DisplayFor(Function(model) item.Address)</td>

<td>@Html.DisplayFor(Function(model) item.Birthday)</td>

<td>@Html.DisplayFor(Function(model) item.Email)</td>

</tr>

</table>

<div>

@Html.PagedListPager(Model, Function(number) Url.Action("Index", New With {.page = number}))

</div>

表示レイアウトの編集

ビューを作成すると、自動的に「Views/Shared/_Layout.vbhtml」が作成されるので、これを以下のように編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    @RenderBody()
</body>
</html>

<!DOCTYPE html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

</head>

<body>

@RenderBody()

</body>

</html>

スタイルシートの修正

テーブルの装飾をするために、スタイルシート(Site.css)を修正します。

body {
    margin: 20px;
    padding: 20px;
}

table {
    border-collapse: collapse;
    width: 60%;
}

th {
    background-color: yellow;
    border: 1px solid;
    text-align: center;
}

td {
    border: 1px solid;
}

body {

margin: 20px;

padding: 20px;

}

table {

border-collapse: collapse;

width: 60%;

}

th {

background-color: yellow;

border: 1px solid;

text-align: center;

}

td {

border: 1px solid;

}

プログラムの実行

プログラムを実行すると、以下のように左下にページ送りボタンが表示され、ページング処理ができるようになります。
HomeController.vbで、1画面に4件づつ表示するように設定しています。

記事一覧

ASP.NET(VB.NET) MVCモデル入門【記事一覧】