Introduction to the implementation method of paging function in ABP introductory series

This section mainly explains how to use ABP for background paging, and also explains the implementation of ABP background paging logic. At the same time, it also demonstrates how to use X.PagedList for front-end paging

After completing the addition, deletion, modification and check of the task list, let's talk about the essential paging function.

First of all, I am very glad that ABP has helped us encapsulate the paging implementation, which is really considerate.

Come on, let’s take a look at how to use ABP for paging in this section.

1. Paging request DTO definition

Data TransferObject(Data Transfer Objects ) is used for data transmission at the application layer and presentation layer.

The presentation layer passes in the data transfer object (DTO) to call an application service method, and then the application service executes some specific business logic through the domain object and returns the DTO to the presentation layer. In this way, the presentation layer and domain layer are completely separated. In a well-layered application, the presentation layer does not directly use domain objects (warehouses, entities).

When we have a paging request in the presentation layer, we generally need to specify two parameters, one is used to mark the page, and the other is the number of lines per page (usually configured with configuration file).

Because paging is a very commonly used function, when we have a paging request in the presentation layer, it is best to have a corresponding DTO to encapsulate these two parameters.

There is no such public class encapsulated for us in the ABP source code, but in the ABPZero project, the corresponding paging Dto is defined.

The corresponding class diagram is as follows:

Paging sorting and filtering the corresponding Dto class diagram

It can be seen that it mainly includes the following four common DTO definition:

1. PagedInputDto: paging request Dto

2. PagedAndSortedInputDto: paging sorting Dto

3. PagedSortedAndFilteredInputDto : Paging sorting and filtering Dto

4. PagedAndFilteredInputDto: Paging filtering Dto

is not very practical. Our paging is usually mixed with filtering and sorting. .

The following main attributes are mainly defined:

• MaxResultCount: The number of rows per page, which can be read from the defined configuration .

• SkipCount: The number of jumps. The general calculation formula is SkipCount=Page*MaxResultCount (number of pages*number of rows).

• Filter: Filter string

• Sorting: Sorting method

The specific implementation will not be described in detail. I believe that if you look at the class diagram carefully, you can implement it yourself. AbpZero defines these public Dtos in the Dto folder of the application service layer. The specific paths are as follows.

2. How to use paging DTO

Take our task list as an example, let’s modify it and create GetTaskInputDto, let inherit from PagedSortedAndFilteredInputDto, so that GetTaskInputDto has the properties needed for paging sorting and filtering.

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

3. Return the paging result DTO

Abp The generic PagedResultDto has been defined for us to wrap the returned paging results. It mainly includes two attributes, int TotalCount saves the total number, and IReadOnlyList Items saves the returned paging result set.

4. Application service layer paging logic implementation

1. Define interface

PagedResultDto<TaskDto> GetPagedTasks(GetTasksInput input);

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);
 //获取总数
 var tasksCount = query.Count();
 //默认的分页方式
 //var taskList = query.Skip(input.SkipCount).Take(input.MaxResultCount).ToList();
 //ABP提供了扩展方法PageBy分页方式
 var taskList = query.PageBy(input).ToList();
 return new PagedResultDto<TaskDto>(tasksCount,taskList.MapTo<List<TaskDto>>());
}

WhereIf and PageBy that have never been used in Linq. Yes, these are extension methods provided by ABP. Thank you. If you are interested, you can take a look at the specific implementation of the source code QueryableExtensions. In fact, the implementation is very simple, but we may not be able to imagine it when we usually use linq.

代码中使用的是什么分页技术？（真分页？假分页？）

5. 使用X.PagedList进行前端分页

在Asp.Net Mvc中进行前端分页有一系列开源实现，在我的Demo中使用的是开源的X.PagedList分页。想了解具体源码，请参考X.PagedList GitHub。

1、请自行在Web项目中安装X.PagedList.Mvc Nuget程序包

X.PagedList.Mvc Nuget程序包

2、在Controller中使用X.PagedList提供的方法构造分页结果供前端使用

因为我们在应用服务层已经手动实现了分页逻辑，所以按照X.PagedList官网示例，我们需要自行构造StaticPagedList作为返回结果。

 public ActionResult PagedList(int? page)
 {
  //每页行数
  var pageSize = 5;
  var pageNumber = page ?? 1;//第几页
  var filter = new GetTasksInput
  {
   SkipCount = (pageNumber - 1) * pageSize,//忽略个数
   MaxResultCount = pageSize
  };
  var result = _taskAppService.GetPagedTasks(filter);
  //已经在应用服务层手动完成了分页逻辑，所以需手动构造分页结果
  var onePageOfTasks = new StaticPagedList<TaskDto>(result.Items, pageNumber, pageSize, result.TotalCount);
  //将分页结果放入ViewBag供View使用
  ViewBag.OnePageOfTasks = onePageOfTasks;
  return View();
}

从代码中可以看到我们构造完X.PagedList提供的分页结果后放入了ViewBag中，供视图使用。

3、View中添加分页控件

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">
   <p class="btn-group pull-right">
    <button type="button" class="btn btn-info">Edit</button>
    <button type="button" class="btn btn-success">Delete</button>
   </p>
   <p class="media">
    <a class="media-left" href="#" rel="external nofollow" >
     @*<i class="fa @Model.GetTaskLable(task) fa-3x"></i>*@
    </a>
    <p class="media-body">
     <h4 class="media-heading">@task.Title</h4>
     <span class="text-muted">@task.CreationTime.ToString("yyyy-MM-dd HH:mm:ss")</span>
    </p>
   </p>
  </li>
 }
</ul>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfTasks, page => Url.Action("PagedList", new { page }))

其中最后一句代码是用来生成分页控件。

最终效果如图：

总结

总结

本节主要讲解了如何使用ABP进行后台分页，并顺带讲解了ABP后台分页逻辑的实现方式。同时也演示了如何使用X.PagedList进行前端分页。

The above is the detailed content of Introduction to the implementation method of paging function in ABP introductory series. For more information, please follow other related articles on the PHP Chinese website!