by WebSurfer
2021年2月2日 14:26
先の記事「ASP.NET MVC でページング (CORE 版)」で実装したページャーは、どうも見栄えが気に入らないので変更しました。以下の画像の下の方にあるのがそれです。
Visual Studio 2019 のテンプレートを使って ASP.NET Core MVC アプリのプロジェクトを生成すると Bootstrap.css v4.3.1 が wwwroot フォルダに自動的に含まれるようになります。
それには Bootstrap のドキュメント Pagination に書いてあるページャーに使えるスタイルが定義されています。
というわけで、Bootstrap のページング用のスタイルを利用して、先の記事のページャーの外観を上の画像のように書き換えてみました。かなりスマートになったと自画自賛しているのですが、いかがでしょう?
機能的には先の記事のページャーとほとんど同じですが、次の点を変更しています: (1) ページャーの First Prev 1 2 3 ... n Next Last の 1 ~ n のボタンの数 n を任意に設定できるようにした。(2) First Prev Next Last のリンクはそれが無効な時は非表示とした。
以下に View に実装したページャー部分のコードのみアップしておきます。
@{
// buttonCount はページャーの First Prev 1 2 3 ... n Next Last の
// 1 ~ n 部分のボタン数 n。奇数に設定してください
int buttonCount = 7;
}
<span>Page @Model.PageIndex of @Model.TotalPages</span>
<br />
<nav aria-label="Page navigation">
<ul class="pagination">
@if (Model.HasPreviousPage)
{
<li class="page-item">
<a asp-action="Pager"
asp-route-sortOrder="@ViewData["CurrentSort"]"
asp-route-pageNumber="1"
asp-route-currentFilter="@ViewData["CurrentFilter"]"
class="page-link">
First
</a>
</li>
}
@if (Model.HasPreviousPage)
{
<li class="page-item">
<a asp-action="Pager"
asp-route-sortOrder="@ViewData["CurrentSort"]"
asp-route-pageNumber="@(Model.PageIndex - 1)"
asp-route-currentFilter="@ViewData["CurrentFilter"]"
class="page-link">
Prev
</a>
</li>
}
@{
int startPage;
int stopPage;
if (Model.TotalPages > buttonCount)
{
if (Model.PageIndex <= buttonCount / 2 + 1)
{
startPage = 1;
stopPage = buttonCount;
}
else if (Model.PageIndex < (Model.TotalPages - buttonCount / 2))
{
startPage = Model.PageIndex - buttonCount / 2;
stopPage = Model.PageIndex + buttonCount / 2;
}
else
{
startPage = Model.TotalPages - buttonCount + 1;
stopPage = Model.TotalPages;
}
}
else
{
startPage = 1;
stopPage = Model.TotalPages;
}
for (int i = startPage; i <= stopPage; i++)
{
if (Model.PageIndex == i)
{
<li class="page-item active">
<span class="page-link">@i</span>
</li>
}
else
{
<li class="page-item">
<a asp-action="Pager"
asp-route-sortOrder="@ViewData["CurrentSort"]"
asp-route-pageNumber="@i"
asp-route-currentFilter="@ViewData["CurrentFilter"]"
class="page-link">
@i
</a>
</li>
}
}
}
@if (Model.HasNextPage)
{
<li class="page-item">
<a asp-action="Pager"
asp-route-sortOrder="@ViewData["CurrentSort"]"
asp-route-pageNumber="@(Model.PageIndex + 1)"
asp-route-currentFilter="@ViewData["CurrentFilter"]"
class="page-link">
Next
</a>
</li>
}
@if (Model.HasNextPage)
{
<li class="page-item">
<a asp-action="Pager"
asp-route-sortOrder="@ViewData["CurrentSort"]"
asp-route-pageNumber="@(Model.TotalPages)"
asp-route-currentFilter="@ViewData["CurrentFilter"]"
class="page-link">
Last
</a>
</li>
}
</ul>
</nav>