PagedListCore的使用

發布日期:2019-10-10

關于在Core2.0PagedListCore實現分頁

一、引言

  開發中在對大量數據展示的時候,出于對性能的考慮,我們往往是使用分頁功能(用戶需要那一頁我們就返回給他那一頁,而不是一次性加載所有的數據)。傳統的.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)

https://github.com/hieudole/PagedList.Core.Mvc

1、在Views文件下的_ViewImports中添加如下代碼:

@using [email protected] [email protected] *, [email protected] *, 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>();

?

八、效果

?

?

云南十一选五开奖结果