入门实战-实现分页功能其实很简单
成都创新互联专注于离石网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供离石营销型网站建设,离石网站制作、离石网页设计、离石网站官网定制、重庆小程序开发公司服务,打造离石网络公司原创品牌,更为您提供离石网站排名全网营销落地服务。
分页功能是项目开发中必须掌握的技能,网络上也有很多组件实现该功能,但是在Asp.Net Core中的分页,我们学习时,还是要掌握其最基本的写法,我计划写2种EF的分页代码。
1.第一种写法,使用EF中的Skip()和Take()来实现分页,Skip和Take是Linq的扩展方法,Skip(n)跳过n条数据, Take(n)获取n条数据,只要是分页就必须是相关的计算和变量:总记录数,每页条数,页数;还以Menu的相关功能页面来进行分页代码演练。
(1).先查看Menu的列表页,也就是Index视图,计划在表格的下面增加分页功能
(2).先在视图页中(Index.cshtml)中规划一下,在显示分页的位置上写上代码
(3).修改Index() Action的代码,原来的代码默认是不分页的,现在需要修改为可以分页的功能:
在Action中对一些变量的存储使用管理ViewBag;有个小知识点注意一下:
(4).修改Index视图页,将其分页代码编写完成。增加了一个设置:当是第一页时,[上一页]不可用,当时最后一页是,[下一页]不可用。
注意,有些是将标签调用Js函数代码来实现Action跳转和提交参数,如果是2个以上的参数,可以在增加一个比如asp-route-pageSize=“@ViewBag.pageSize”这样的形式,也可以用Js,我考虑的是单一参数,先简单的实现。标签的Action传递参数时,如果后台Index的参数名是pageIndex,那么前台就是asp-route-pageIndex;如果后台Index的参数名是Id,那么前台就是asp-route-Id;
(5).预览分页效果
2.第二种分页写法,我将微软官方提供的分页教程演练一下,很有特点,包括查询框,排序和分页。
(1).我们看下微软官方的分页实例图片效果:
其教程地址为:https://learn.microsoft.com/zh-cn/aspnet/core/data/ef-mvc/sort-filter-page?view=aspnetcore-3.1
(2).先在Db文件夹下建立一个公共的分页类;
代码如下 ////// 分页代码实现设置 /// //public class PaginatedList : List public class PaginatedList: List where T : class { public int PageIndex { get; set; } public int TotalPages { get; set; } public PaginatedList(List items, int count, int pageIndex, int pageSize) { PageIndex= pageIndex; TotalPages= (int)Math.Ceiling(count / (double)pageSize); this.AddRange(items); } //上一页 public bool HasPreviousPage { get { return (PageIndex > 1); } } //下一页 public bool HasNextPage { get { return (PageIndex < TotalPages); } } public static PaginatedList CreateAsync(IQueryable source, int pageIndex, int pageSize) { var count = source.Count(); var items = source.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList(); return new PaginatedList (items, count, pageIndex, pageSize); } }