[Asp.Net Core Mvc] Part.12 為陳列的資料製作分頁效果 (套件X.PagedList.Core.Mvc)

承接之前「[Asp.Net Core Mvc] Part.11 實作可重複使用的Partial View 部份檢視」的程式碼

在製作陳列資料商品時，很常會用到分頁效果，原因是不可能在一個頁面上列出全部商品，那樣效能和網路頻寬都會很吃重，包括在瀏覽時對於電腦的CPU和RAM也是要一定的負載，畢竟現在的瀏覽器(如Chrome…)本身就是很吃資源的怪物，所以這個時候，我們通常會在頁面上加上分頁的功能，讓陳列的商品可以有一定數量的控管，以達到瀏覽的速度和效果。

這次我們要簡單製作一個分頁效果，各位可以從中了解一些初級概念，
而主要介紹的主角(套件)是：X.PagedList.Core.Mvc

Step.1 從Nuget下載X.PagedList.Core.Mvc

搜尋：X.PagedList.Core.Mvc

Step.2 從CarsController撰寫有關分頁邏輯程式碼

CarsController.cs

public async Task<IActionResult> Index(int? page = 1)
{
//每頁幾筆
const int pageSize = 3;
//處理頁數
ViewBag.carsModel = GetPagedProcess(page, pageSize);
//填入頁面資料
return View(await _context.CarModel.Skip<CarModel>(pageSize * ((page ?? 1) - 1)).Take(pageSize).ToListAsync());
}
protected IPagedList<CarModel> GetPagedProcess(int? page, int pageSize)
{
// 過濾從client傳送過來有問題頁數
if (page.HasValue && page < 1)
return null;
// 從資料庫取得資料
var listUnpaged = GetStuffFromDatabase();
IPagedList<CarModel> pagelist = listUnpaged.ToPagedList(page ?? 1, pageSize);
// 過濾從client傳送過來有問題頁數，包含判斷有問題的頁數邏輯
if (pagelist.PageNumber != 1 && page.HasValue && page > pagelist.PageCount)
return null;
return pagelist;
}
protected IQueryable<CarModel> GetStuffFromDatabase()
{
return _context.CarModel;
}

Step.3 在View檢視編輯分頁所需程式碼

@model IEnumerable<MVC_Auth.Models.CarModel>
@{
ViewData["Title"] = "Index";
var pagedList = (IPagedList)ViewBag.carsModel;
}
@using X.PagedList.Mvc.Core;
@using X.PagedList;
@using X.PagedList.Mvc.Core.Fluent
@using X.PagedList.Web.Common
<h1>Index</h1>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Label)
</th>
<th>
@Html.DisplayNameFor(model => model.Type)
</th>
<th>
@Html.DisplayNameFor(model => model.cc)
</th>
<th>
@Html.DisplayNameFor(model => model.Color)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Label)
</td>
<td>
@Html.DisplayFor(modelItem => item.Type)
</td>
<td>
@Html.DisplayFor(modelItem => item.cc)
</td>
<td>
@Html.DisplayFor(modelItem => item.Color)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="@item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td class="text-muted" colspan="5">
第 @(pagedList.PageCount < pagedList.PageNumber ? 0 : pagedList.PageNumber) 頁，共 @pagedList.PageCount 頁。
每頁 @pagedList.PageSize 筆資料，全部共有 @pagedList.TotalItemCount 筆資料。
</td>
</tr>
</tfoot>
</table>
@await Html.PartialAsync("_CarCardPartial", Model)
<div style="align-content:center">
@(Html.Pager(pagedList)
.Url(page => Url.Action("Index", new { page }))
.Build())
</div>

結果畫面：