PagedListCore的使用

.Net · 發表 2018-10-22 19:53:00

摘要：關於在 Core2.0 中 PagedListCore 實現分頁一、引言開發中在對大量資料展示的時候，出於對效能的考慮，我們往往是使用分頁功能（使用者需要那一頁我們就返回給他那一頁，而不是一次性載入所有的資料）。傳統的.Net Framework中我們可以使用名為PagedL...

關於在 Core2.0 中 PagedListCore 實現分頁

一、引言

開發中在對大量資料展示的時候，出於對效能的考慮，我們往往是使用分頁功能（使用者需要那一頁我們就返回給他那一頁，而不是一次性載入所有的資料）。傳統的.Net Framework中我們可以使用名為PagedList包來進行分頁功能的實現，而在Core2.0中我們也可以使用PagedListCore來進行分頁，今天在這裡就為大家演示PagedListCore的使用。

二、新增NuGet包的引用

首先在Core2.0的程式中PagedList.Core.Mvc（V1.1.0）。（嗯。。。第一個這Logo圖片我喜歡）

三、資料的封裝（這裡使用模擬的假資料）

public class InitDataFisrt
{

/// <summary>
/// 排序按需查詢
/// </summary>
/// <param name="pageIndex">頁號</param>
/// <param name="pageSize">頁的大小</param>
/// <param name="totalCount">總量</param>
/// <returns></returns>
public static List<Student> GetStudents(int pageIndex, int pageSize, ref int totalCount)
{
var Students = setStudentList()
.OrderByDescending(o => o.ID)
.Skip((pageIndex - 1) * pageSize)
.Take(pageSize).ToList();
return Students;
}

/// <summary>
/// 初始化資料 50條
/// </summary>
private static List<Student> setStudentList()
{
List<Student> list = new List<Student>();
for (int i = 0; i < 50; i++)
{
Student stu = new Student()
{
Name = $"第{i}個人",
Address = $"xx小區第{i}單元",
Phone = $"{i}",
Sex = "男",
ClassID = i,
ID = i
};
list.Add(stu);
}

return list;
}
}

四、編寫Home控制器的Index頁面

 public class HomeController : Controller
{
/// <summary>
/// 
/// </summary>
/// <param name="page">要跳轉的頁面</param>
/// <param name="parameterTest1">傳多個引數時</param>
/// <param name="parameterTest2">傳多個引數時</param>
/// <returns></returns>
public IActionResult Index(int? page,int parameterTest1,int parameterTest2)
{
//第一次訪問時 返回的一頁
int pageIndex= page ?? 1;
int pageSize = 10;
int totalCount = 0;

//假裝是從資料庫得到的資料
List<Student> list = InitDataFisrt.GetStudents(pageIndex, pageSize, ref totalCount);

//將List轉換成分頁時需要的IpagedList
IPagedList<Student> pagedList = new StaticPagedList<Student>(list, pageIndex, pageSize,totalCount);

return View(pagedList);
}
}

五、前臺的對資料的展示（還沒開始處理分頁，因為要使用到TagHelpers的需要進行封裝）

@{
ViewData["Title"] = "Home Page";
}
@model PagedList.Core.StaticPagedList<Student>

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
<table>
<thead>
<tr>
<td>編號</td>
<td>姓名</td>
<td>地址</td>
<td>電話</td>
<td>性別</td>
<td>班級</td>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.ID</td>
<td>@item.Name</td>
<td>@item.Address</td>
<td>@item.Phone</td>
<td>@item.Sex</td>
<td>@item.ClassID</td>
</tr>
}
</tbody>
</table>
</div>

六、封裝PagedListCore的TagHelpers（下面是他的官網，開源在GitHub）

ofollow,noindex"> https://github.com/hieudole/PagedList.Core.Mvc

1、在Views檔案下的_ViewImports中新增如下程式碼：

@using PagedListCoreTest
@using PagedListCoreTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, PagedList.Core.Mvc

2、再次編寫Index.cshtml檔案如下：

@{
ViewData["Title"] = "Home Page";
//封裝的分頁樣式在下一步會提出
var PagedListRenderOptions = PageListOptions.GetPagedListRenderOptions;


//如果有多個引數(parameterTest1,parameterTest2) 除了預設的page
//如: public IActionResult Index(int? page,int parameterTest1,int parameterTest2)
//可通過new Dictionary<string,string>
//Key,Value皆為string => 會通過Key自動匹配後臺的引數名
//用法 見下方程式碼
var RouteData = new Dictionary<string, string>();
RouteData.Add("parameterTest1", "引數一");
RouteData.Add("parameterTest2", "引數二");
}
@model PagedList.Core.StaticPagedList<Student>

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
<table>
<thead>
<tr>
<td>編號</td>
<td>姓名</td>
<td>地址</td>
<td>電話</td>
<td>性別</td>
<td>班級</td>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.ID</td>
<td>@item.Name</td>
<td>@item.Address</td>
<td>@item.Phone</td>
<td>@item.Sex</td>
<td>@item.ClassID</td>
</tr>
}
</tbody>
</table>

@*
options:分頁的樣式
asp-controller:控制器名
asp-action:Action名
asp-all-route-data:不加該項時 =》會預設新增Page引數
如若需要額外傳引數
通過字典傳Dictionary，
型別為Dictionary<string, string>
*@
<pager list="@Model" options="@PagedListRenderOptions" asp-controller="Home" asp-action="Index" asp-all-route-data="RouteData" />
</div>

4、封裝options所需要的PagedListRenderOptions類，在Model下新增PageListOptions類引用using PagedList.Core.Mvc，封裝PagedListRenderOptions屬性

更多關於PagedListRenderOptions的配置（GitHub導航）

using PagedList.Core.Mvc;
using System;
using System.Collections.Generic;
using System.Text;

namespace PagedListCoreTest.Models
{
/// <summary>
/// 封裝的PagedList.MVC.Core樣式
/// </summary>
public static class PageListOptions
{
//獲取配置
public static PagedListRenderOptions GetPagedListRenderOptions
{
get{
return new PagedListRenderOptions()
{
//新增省略號，其中不顯示所有頁碼
DisplayEllipsesWhenNotShowingAllPageNumbers = true,
//Previous的超連結
LinkToPreviousPageFormat = "上一頁",
//Next的超連結
LinkToNextPageFormat = "下一頁",
//如果設定為Always，則渲染指向列表中第一頁的超連結。
　　　　　　　　　　　　//如果設定為IfNeeded，則僅在第一頁在分頁控制元件中不可見時呈現超連結
DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded,
//如果設定為Always，則渲染指向列表中最後一頁的超連結。
　　　　　　　　　　　　//如果設定為IfNeeded，則僅在最後一頁在分頁控制元件中不可見時呈現超連結。
DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded,
//如果設定為Always，則渲染指向列表上一頁的超連結。
　　　　　　　　　　　　//如果設定為IfNeeded，則僅當列表中有上一頁時才渲染超連結。
DisplayLinkToPreviousPage = PagedListDisplayMode.Always,
//如果設定為Always，則渲染指向列表下一頁的超連結。
　　　　　　　　　　　　//如果設定為IfNeeded，則僅在列表中有下一頁時呈現超連結。
DisplayLinkToNextPage = PagedListDisplayMode.Always,
//如果為true，則包含列表中每個頁面的超連結。
DisplayLinkToIndividualPages = true,
//指定要附加第一個列表項的CSS類。
ClassToApplyToFirstListItemInPager = "previous",
//最後一個的樣式
ClassToApplyToLastListItemInPager = "next",
};
}
}
}
}

七、最後在Startup.cs的ConfigureServices中註冊PagedList.Core.Mvc需要的例項

//註冊PagedList.Core.Mvc需要的例項
services.AddSingleton<IActionContextAccessor, ActionContextAccessor>();

八、效果

PagedListCore的使用

您可能也會喜歡…