【ASP.NET MVC】X.PagedListを使ってページング機能を実装する

using System.Collections.Generic;
using System.Web.Mvc;
using WebApplication.Models;
using X.PagedList;

namespace WebApplication.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index(string searchValue, int? page)
        {
            if (searchValue != null || page != null)
            {
                // 1ページに表示する最大件数　
                int pageSize = 5;

                // ページ数がnullだったら1を設定
                int pageNumber = page ?? 1;
                if (pageNumber < 1) pageNumber = 1;

                // DBからデータを検索して取得
                List<PagedListViewModel>users = PagedListViewModel.SerachUsers(searchValue);

                // ページング処理に対応するためIPagedListに変換
                IPagedList<PagedListViewModel> result = users.ToPagedList(pageNumber, pageSize);

                // ViewBagに検索文字列を格納する
                ViewBag.searchValue = searchValue;

                return PartialView("_IndexPartial", result);
            }
            return View();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Data.SqlClient;

namespace WebApplication.Models
{
    public class PagedListViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public int? Page { get; set; } = 1;
        public string SearchValue { get; set; } = string.Empty;

        // ユーザー検索処理
        public static List<PagedListViewModel> SerachUsers(string searchValue)
        {
            var result = new List<PagedListViewModel>();
            var connectionString = "<接続文字列>";
            var sql = "SELECT * FROM users WHERE Name LIKE @searchValue";

            using (var connection = new SqlConnection(connectionString))
            using (var command = new SqlCommand(sql, connection))
            {
                connection.Open();

　　　　　　　　 // LIKE句を使ってあいまい検索
                command.Parameters.AddWithValue("@searchValue", "%" + searchValue + "%");

                using (var reader = command.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        result.Add(new PagedListViewModel
                        {
                            Id = Convert.ToInt32(reader["id"]),
                            Name = Convert.ToString(reader["name"]),
                            Age = Convert.ToInt32(reader["age"])
                        });
                    }
                }
                return result;
            }
        }
    }
}

<h2>ユーザー名検索</h2>

@* Ajax.BeginFormの使用 *@
@using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
    LoadingElementId = "loading",
    HttpMethod = "Get",
    UpdateTargetId = "target",
    OnBegin = "onBegin",
    OnComplete = "onComplete"
}))
{
    <input type="text" class="form-control" name="searchValue">
    <button class="btn btn-primary" value="search" name="search" type="submit">検索</button>

    @* ローディング画像の表示（初期状態は非表示） *@
    <img src="@Url.Content("~/Content/Image/ajax-loader.gif")"
         id="loading" style="display:none;" />
}

@* 部分ビュー表示箇所 *@
<div id="target"></div>

@* Ajax.BeginFormを使うためのjqueryファイルの呼び出し *@
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

@* ローディング画像の表示切り替え用スクリプト *@
<script>
    function onBegin() {
        $('#search').prop('disabled', true);
    };

    function onComplete() {
        $('#search').prop('disabled', false);
    };

    $(document).ready(function () { });
</script>

@using X.PagedList.Mvc.Common;
@using X.PagedList.Mvc;
@using WebApplication.Models;

@model X.PagedList.IPagedList<PagedListViewModel>

<hr />

@if (Model == null) { }

@if (Model.TotalItemCount > 0)
{
    <p>
        表示件数: @Model.FirstItemOnPage ～ @Model.LastItemOnPage 件
        （全 @Model.TotalItemCount 件）
    </p>
}
else
{
    <p>表示件数: 0件</p>
}

<table class="table table-bordered">
    <thead>
        <tr>
            <th>
                <div class="text-center">ID</div>
            </th>
            <th>
                <div class="text-center">ユーザー名</div>
            </th>
            <th>
                <div class="text-center">年齢</div>
            </th>
        </tr>
    </thead>
    @if (Model.TotalItemCount > 0)
    {
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(m => item.Id)</td>
                    <td>@Html.DisplayFor(m => item.Name)</td>
                    <td>@Html.DisplayFor(m => item.Age)</td>
                </tr>
            }
        </tbody>
    }
    else
    {
        <tbody>
            <tr>
                <td colspan="3" align="center">データがありません</td>
            </tr>
        </tbody>
    }
</table>

@* ページング機能の実装 *@
@Html.PagedListPager(
Model,
page => Url.Action("Index",
new PagedListViewModel { Page = page, SearchValue = ViewBag.searchValue }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions()
{
    LiElementClasses = new string[] { "page-item" },
    PageClasses = new string[] { "page-link" },
},
new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "target" })
)

 <system.web>
	  <compilation debug="true" targetFramework="4.8">
		  <assemblies>
			  <add assembly="netstandard, Version=2.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51"/>
		  </assemblies>
	  </compilation>
    <httpRuntime targetFramework="4.8" />
  </system.web>