ABP入门系列之分页功能的实现
完成了任务清单的增删改查,咱们来讲一讲必不可少的的分页功能。
首先很庆幸ABP已经帮我们封装了分页实现,实在是贴心啊。
来来来,这一节咱们就来捋一捋如何使用ABP的进行分页吧。
1. 分页请求DTO定义
数据传输对象(Data Transfer Objects)用于应用层和展现层的数据传输。
展现层传入数据传输对象(DTO)调用一个应用服务方法,接着应用服务通过领域对象执行一些特定的业务逻辑并且返回DTO给展现层。这样展现层和领域层被完全分离开了。在具有良好分层的应用程序中,展现层不会直接使用领域对象(仓库,实体)。
我们在展现层有分页请求时,一般需要指定两个参数,一个用来标志第几页、一个是每页行数(一般有配置文件配置)。
因为分页是一个很常用的功能,所以,展现层我们有分页请求时,最好有相应的DTO来封装这两个参数。
在ABP源码中并没有为我们封装这样公用的类,但是在ABPZero项目中,定义了相应的分页Dto。
对应的类图如下:
分页排序过滤相应Dto类图
从中可以看到主要包括以下四个公共DTO定义:
- PagedInputDto:分页请求Dto
- PagedAndSortedInputDto:分页排序Dto
- PagedSortedAndFilteredInputDto:分页排序过滤Dto
- PagedAndFilteredInputDto:分页过滤Dto
是不是很实用,我们的分页一般是和过滤排序混合使用的。
其中主要定义了以下几个主要属性:
- MaxResultCount:每页行数,可以从定义的配置中读取。
- SkipCount:跳转数量,一般计算公式为SkipCount=Page*MaxResultCount(页数*行数)。
- Filter:过滤字符串
- Sorting:排序方式
具体的实现就不详述了,相信仔细看类图,就能自己动手实现。AbpZero把这些公共Dto定义在了应用服务层的Dto文件夹下,具体路径如下图。
2. 如何使用分页DTO
拿我们的任务清单举例,我们修改下创建的GetTaskInputDto
,让它继承自PagedSortedAndFilteredInputDto
,这样GetTaskInputDto
就拥有了进行分页排序过滤需要用到的属性。
public class GetTasksInput : PagedSortedAndFilteredInputDto { public TaskState? State { get; set; } public int? AssignedPersonId { get; set; } }
3. 返回分页结果DTO
Abp已经为我们定义了泛型的PagedResultDto用来包装返回的分页结果。其中主要包括两个属性,int TotalCount保存总个数,IReadOnlyList<T> Items保存返回的分页结果集。
4. 应用服务层分页逻辑实现
1、 在ITaskAppService中定义接口
PagedResultDto<TaskDto> GetPagedTasks(GetTasksInput input);
2、 在TaskAppService中实现接口:
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>>()); }
分页的实现很简单,先进行过滤,排序,再进行分页,最后使用PagedResultDto封装分页结果。
细心的你也许发现了两个未曾在Linq中用过的方法WhereIf
和PageBy
,是的,这是ABP提供的扩展方法,感兴趣的可以看下源码QueryableExtensions
的具体实现,其实实现的很简单,但我们平时在使用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"> <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 }))
其中最后一句代码是用来生成分页控件。
最终效果如图:
总结
总结
本节主要讲解了如何使用ABP进行后台分页,并顺带讲解了ABP后台分页逻辑的实现方式。同时也演示了如何使用X.PagedList进行前端分页。
相关文章
- 我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页,KindEditor编辑器在我们点击分页时会插入代码,我们只要以它为分切符,就...2016-11-25
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 轻松学习C#的基础入门,了解C#最基本的知识点,C#是一种简洁的,类型安全的一种完全面向对象的开发语言,是Microsoft专门基于.NET Framework平台开发的而量身定做的高级程序设计语言,需要的朋友可以参考下...2020-06-25
- 这篇文章算是超级入门级别的了,我们下面来给各位介绍在photoshop画斜线/直线/虚线的教程了,希望下面这篇文章给你入门来帮助。 PS怎么画斜线 选择铅笔工具,或者画笔...2016-09-14
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
Springboot如何使用mybatis实现拦截SQL分页
这篇文章主要介绍了Springboot使用mybatis实现拦截SQL分页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-19- 在php中要实现分页比起asp中要简单很多了,我们核心就是直接获取当前页面然后判断每页多少再到数据库中利用limit就可以实现分页查询了,下面我来详细介绍分页类实现程序...2016-11-25
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
- 这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
- 这篇文章主要为大家分享了20分钟MySQL基础入门教程,快速掌握MySQL基础知识,真正了解MySQL,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 这篇文章主要为大家详细介绍了vue实现页面打印自动分页的两种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-29
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据。...2020-06-25
- 这篇文章主要为大家详细介绍了原生js实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-24
- 最近,在做测试开发平台的时候,需要对测试用例的列表进行后端分页,在实际去写代码和测试的过程中,发现这里面还是有些细节的,故想复盘一下...2021-09-29
- 这篇文章主要为大家详细分享了laypage分页控件使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-20
- ireport默认都是自动分页数据超出页面长度就会自动分到下一页,但有时候业务需要一页只显示固定几行这时候就需要自定义条数了。下面看具体操作吧...2021-10-26
- 这篇文章主要为大家详细介绍了MySQL分页优化,内容思路很详细,有意对MySQL分页优化的朋友可以参考一下...2016-04-22