完成了任務(wù)清單的增刪改查，咱們來講一講必不可少的的分頁(yè)功能。

首先很慶幸ABP已經(jīng)幫我們封裝了分頁(yè)實(shí)現(xiàn)，實(shí)在是貼心啊。

來來來，這一節(jié)咱們就來捋一捋如何使用ABP的進(jìn)行分頁(yè)吧。

1. 分頁(yè)請(qǐng)求DTO定義

數(shù)據(jù)傳輸對(duì)象(Data Transfer Objects)用于應(yīng)用層和展現(xiàn)層的數(shù)據(jù)傳輸。

展現(xiàn)層傳入數(shù)據(jù)傳輸對(duì)象(DTO)調(diào)用一個(gè)應(yīng)用服務(wù)方法，接著應(yīng)用服務(wù)通過領(lǐng)域?qū)ο髨?zhí)行一些特定的業(yè)務(wù)邏輯并且返回DTO給展現(xiàn)層。這樣展現(xiàn)層和領(lǐng)域?qū)颖煌耆蛛x開了。在具有良好分層的應(yīng)用程序中，展現(xiàn)層不會(huì)直接使用領(lǐng)域?qū)ο?倉(cāng)庫(kù)，實(shí)體)。

我們?cè)谡宫F(xiàn)層有分頁(yè)請(qǐng)求時(shí)，一般需要指定兩個(gè)參數(shù)，一個(gè)用來標(biāo)志第幾頁(yè)、一個(gè)是每頁(yè)行數(shù)（一般有配置文件配置）。

因?yàn)榉猪?yè)是一個(gè)很常用的功能，所以，展現(xiàn)層我們有分頁(yè)請(qǐng)求時(shí)，最好有相應(yīng)的DTO來封裝這兩個(gè)參數(shù)。

在ABP源碼中并沒有為我們封裝這樣公用的類，但是在ABPZero項(xiàng)目中，定義了相應(yīng)的分頁(yè)Dto。

對(duì)應(yīng)的類圖如下：

分頁(yè)排序過濾相應(yīng)Dto類圖

從中可以看到主要包括以下四個(gè)公共DTO定義：

1. PagedInputDto：分頁(yè)請(qǐng)求Dto
2. PagedAndSortedInputDto：分頁(yè)排序Dto
3. PagedSortedAndFilteredInputDto：分頁(yè)排序過濾Dto
4. PagedAndFilteredInputDto：分頁(yè)過濾Dto

是不是很實(shí)用，我們的分頁(yè)一般是和過濾排序混合使用的。

其中主要定義了以下幾個(gè)主要屬性：

• MaxResultCount：每頁(yè)行數(shù)，可以從定義的配置中讀取。
• SkipCount：跳轉(zhuǎn)數(shù)量，一般計(jì)算公式為SkipCount=Page*MaxResultCount（頁(yè)數(shù)*行數(shù)）。
• Filter：過濾字符串
• Sorting：排序方式

具體的實(shí)現(xiàn)就不詳述了，相信仔細(xì)看類圖，就能自己動(dòng)手實(shí)現(xiàn)。AbpZero把這些公共Dto定義在了應(yīng)用服務(wù)層的Dto文件夾下，具體路徑如下圖。

2. 如何使用分頁(yè)DTO

拿我們的任務(wù)清單舉例，我們修改下創(chuàng)建的GetTaskInputDto，讓它繼承自PagedSortedAndFilteredInputDto，這樣GetTaskInputDto就擁有了進(jìn)行分頁(yè)排序過濾需要用到的屬性。

public class GetTasksInput : PagedSortedAndFilteredInputDto
{
 public TaskState? State { get; set; }
 public int? AssignedPersonId { get; set; }
}

3. 返回分頁(yè)結(jié)果DTO

Abp已經(jīng)為我們定義了泛型的PagedResultDto用來包裝返回的分頁(yè)結(jié)果。其中主要包括兩個(gè)屬性，int TotalCount保存總個(gè)數(shù)，IReadOnlyList<T> Items保存返回的分頁(yè)結(jié)果集。

4. 應(yīng)用服務(wù)層分頁(yè)邏輯實(shí)現(xiàn)

1、 在ITaskAppService中定義接口

PagedResultDto<TaskDto> GetPagedTasks(GetTasksInput input);

2、 在TaskAppService中實(shí)現(xiàn)接口：

public PagedResultDto<TaskDto> GetPagedTasks(GetTasksInput input)
{
 //初步過濾
 var query = _taskRepository.GetAll().Include(t => t.AssignedPerson)
  .WhereIf(input.State.HasValue, t => t.State == input.State.Value)
  .WhereIf(!input.Filter.IsNullOrEmpty(), t => t.Title.Contains(input.Filter))
  .WhereIf(input.AssignedPersonId.HasValue, t => t.AssignedPersonId == input.AssignedPersonId.Value);
 //排序
 query = !string.IsNullOrEmpty(input.Sorting) ? query.OrderBy(input.Sorting) : query.OrderByDescending(t => t.CreationTime);
 //獲取總數(shù)
 var tasksCount = query.Count();
 //默認(rèn)的分頁(yè)方式
 //var taskList = query.Skip(input.SkipCount).Take(input.MaxResultCount).ToList();
 //ABP提供了擴(kuò)展方法PageBy分頁(yè)方式
 var taskList = query.PageBy(input).ToList();
 return new PagedResultDto<TaskDto>(tasksCount,taskList.MapTo<List<TaskDto>>());
}

分頁(yè)的實(shí)現(xiàn)很簡(jiǎn)單，先進(jìn)行過濾，排序，再進(jìn)行分頁(yè)，最后使用PagedResultDto封裝分頁(yè)結(jié)果。

細(xì)心的你也許發(fā)現(xiàn)了兩個(gè)未曾在Linq中用過的方法WhereIf和PageBy，是的，這是ABP提供的擴(kuò)展方法，感興趣的可以看下源碼QueryableExtensions的具體實(shí)現(xiàn)，其實(shí)實(shí)現(xiàn)的很簡(jiǎn)單，但我們平時(shí)在使用linq時(shí)卻未必能想得到。

在這里提幾個(gè)問題：

請(qǐng)問在這段代碼中共進(jìn)行了幾次查詢？

代碼中使用的是什么分頁(yè)技術(shù)？（真分頁(yè)？假分頁(yè)？）

5. 使用X.PagedList進(jìn)行前端分頁(yè)

在Asp.Net Mvc中進(jìn)行前端分頁(yè)有一系列開源實(shí)現(xiàn)，在我的Demo中使用的是開源的X.PagedList分頁(yè)。想了解具體源碼，請(qǐng)參考X.PagedList GitHub。

1、請(qǐng)自行在Web項(xiàng)目中安裝X.PagedList.Mvc Nuget程序包

X.PagedList.Mvc Nuget程序包

2、在Controller中使用X.PagedList提供的方法構(gòu)造分頁(yè)結(jié)果供前端使用

因?yàn)槲覀冊(cè)趹?yīng)用服務(wù)層已經(jīng)手動(dòng)實(shí)現(xiàn)了分頁(yè)邏輯，所以按照X.PagedList官網(wǎng)示例，我們需要自行構(gòu)造StaticPagedList作為返回結(jié)果。

 public ActionResult PagedList(int? page)
 {
  //每頁(yè)行數(shù)
  var pageSize = 5;
  var pageNumber = page ?? 1;//第幾頁(yè)
  var filter = new GetTasksInput
  {
   SkipCount = (pageNumber - 1) * pageSize,//忽略個(gè)數(shù)
   MaxResultCount = pageSize
  };
  var result = _taskAppService.GetPagedTasks(filter);
  //已經(jīng)在應(yīng)用服務(wù)層手動(dòng)完成了分頁(yè)邏輯，所以需手動(dòng)構(gòu)造分頁(yè)結(jié)果
  var onePageOfTasks = new StaticPagedList<TaskDto>(result.Items, pageNumber, pageSize, result.TotalCount);
  //將分頁(yè)結(jié)果放入ViewBag供View使用
  ViewBag.OnePageOfTasks = onePageOfTasks;
  return View();
}

從代碼中可以看到我們構(gòu)造完X.PagedList提供的分頁(yè)結(jié)果后放入了ViewBag中，供視圖使用。

3、View中添加分頁(yè)控件

PagedList視圖的代碼如下：

@using X.PagedList.Mvc;
@using Abp.Web.Mvc.Extensions
@using X.PagedList; 
<link href="~/Content/PagedList.css" rel="external nofollow" rel="stylesheet" />
<ul class="list-group">
 @foreach (var task in ViewBag.OnePageOfTasks)
 {
  <li class="list-group-item">
   <div class="btn-group pull-right">
    <button type="button" class="btn btn-info">Edit</button>
    <button type="button" class="btn btn-success">Delete</button>
   </div>
   <div class="media">
    <a class="media-left" href="#" rel="external nofollow" >
     @*<i class="fa @Model.GetTaskLable(task) fa-3x"></i>*@
    </a>
    <div class="media-body">
     <h4 class="media-heading">@task.Title</h4>
     <span class="text-muted">@task.CreationTime.ToString("yyyy-MM-dd HH:mm:ss")</span>
    </div>
   </div>
  </li>
 }
</ul>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfTasks, page => Url.Action("PagedList", new { page }))

其中最后一句代碼是用來生成分頁(yè)控件。

最終效果如圖：

總結(jié)

總結(jié)

本節(jié)主要講解了如何使用ABP進(jìn)行后臺(tái)分頁(yè)，并順帶講解了ABP后臺(tái)分頁(yè)邏輯的實(shí)現(xiàn)方式。同時(shí)也演示了如何使用X.PagedList進(jìn)行前端分頁(yè)。

最新評(píng)論