11、ASP.NET MVC入门到精通——AspnetMVC分页
本系列目录:ASP.NET MVC4入门到精通系列目录汇总
说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的。这里我先说一种ASP.NET MVC中很常见的一种分页的实现方式,很low,但是很多公司的项目就是这么用的,我现在公司的项目就是也是,有时候面对公司项目屎一样的用户体验和杂乱的代码,真是恨不能重写,可是往往又眼睁睁的看着它继续在运行,继续摧残着客户,又无能为力,有时候甚至为了赶进度,还被迫强奸式的复制原有的代码。
方式一:自定义Html扩展方法
效果如下:
1、新建接口IPageOfList
public interface IPageOfList { long CurrentStart { get; } int PageIndex { get; set; } int PageSize { get; set; } int PageTotal { get; } long RecordTotal { get; set; } }
2、新建一个Html扩展方法
public static MvcHtmlString UlPaging(this HtmlHelper helper, IPageOfList list) { StringBuilder sb = new StringBuilder(); if (list == null) { return new MvcHtmlString(sb.ToString()); } sb.AppendLine("<div class=\"fenye\">" + string.Format("<span>共 {0} 条 记录,每页 {1} 条 </span>", list.RecordTotal, list.PageSize)); //sb.AppendLine(" <ul class=\"pagination\">"); System.Web.Routing.RouteValueDictionary route = new System.Web.Routing.RouteValueDictionary(); foreach (var key in helper.ViewContext.RouteData.Values.Keys) { route[key] = helper.ViewContext.RouteData.Values[key]; } foreach (string key in helper.ViewContext.RequestContext.HttpContext.Request.QueryString) { route[key] = helper.ViewContext.RequestContext.HttpContext.Request.QueryString[key]; } if (list.PageIndex <= 0) { sb.AppendLine("<a class=\"backpage\" href=\"javascript:void(0);\">上一页</a>"); } else { route["pageIndex"] = list.PageIndex - 1; //sb.AppendLine(" <li class=\"prev " + (list.PageIndex == 0 ? "disabled" : "") + "\">" + helper.ActionLink("← 上一页", route["action"].ToString(), route).ToHtmlString() + "</li>"); sb.AppendLine(helper.ActionLink("上一页", route["action"].ToString(), route).ToHtmlString()); } if (list.PageIndex > 3) { route["pageIndex"] = 0; sb.AppendLine(helper.ActionLink(@"<b>1</b>", route["action"].ToString(), route).ToHtmlString().Replace("<", "<").Replace(">", ">")); //sb.AppendLine(" <li>" + helper.ActionLink("1", route["action"].ToString(), route).ToHtmlString() + "</li>"); if (list.PageIndex >= 5) { sb.AppendLine("<a href='#'>..</a>"); } } for (int i = list.PageIndex - 2; i <= list.PageIndex; i++) { if (i < 1) continue; route["pageIndex"] = i - 1; //sb.AppendLine("<li" + (i == list.PageIndex + 1 ? " class=\"active\"" : "") + ">" + helper.ActionLink(i.ToString(), route["action"].ToString(), route).ToHtmlString() + "</li>"); sb.AppendLine(helper.ActionLink(@"<b>" + i.ToString() + @"</b>", route["action"].ToString(), route).ToHtmlString().Replace("<", "<").Replace(">", ">")); } sb.AppendLine(@"<a class='active' href='#'><b>" + (list.PageIndex + 1) + @"</b></a>"); for (var i = list.PageIndex + 2; i <= list.PageIndex + 4; i++) { if (i > list.PageTotal) continue; route["pageIndex"] = i - 1; sb.AppendLine(helper.ActionLink(@"<b>" + i.ToString() + @"</b>", route["action"].ToString(), route).ToHtmlString().Replace("<", "<").Replace(">", ">")); //sb.AppendLine("<li" + (i == list.PageIndex + 1 ? " class=\"active\"" : "") + ">" + helper.ActionLink(i.ToString(), route["action"].ToString(), route).ToHtmlString() + "</li>"); } if (list.PageIndex < list.PageTotal - 4) { if (list.PageIndex <= list.PageTotal - 6) { sb.AppendLine("<a href='#'>..</a>"); } route["pageIndex"] = list.PageTotal - 1; sb.AppendLine(helper.ActionLink(@"<b>" + list.PageTotal.ToString() + "</b>", route["action"].ToString(), route).ToHtmlString().Replace("<", "<").Replace(">", ">")); //sb.AppendLine(" <li>" + helper.ActionLink(list.PageTotal.ToString(), route["action"].ToString(), route).ToHtmlString() + "</li>"); } if (list.PageIndex < list.PageTotal - 1) { route["pageIndex"] = list.PageIndex + 1; sb.AppendLine(helper.ActionLink("下一页", route["action"].ToString(), route).ToHtmlString()); //sb.AppendLine("<li class=\"next\">" + helper.ActionLink("下一页 →", route["action"].ToString(), route).ToHtmlString() + "</li>");, new { @class = "nextpage" } } else { sb.AppendLine("<a class=\"nextpage\" href=\"javascript:void(0);\">下一页</a>"); //sb.AppendLine("<li class=\"nextpage disabled\"><a href=\"javascript:void(0);\">下一页 →</a></li>"); } sb.AppendLine("</div>"); return new MvcHtmlString(sb.ToString()); }
3、界面调用
@model ProjectBase.Utils.Entities.PageOfList<Uuch.MSD.Core.Orders.Order> @Uuch.MSD.App_Start.WebHtmlHelper.UlPaging(this.Html, Model)
为什么说这代码屎一样的?
界面看上去还行对吧,其实你看那个“...”点击了是没反应的,即便到了最后一页,那个“下一页”按钮也还是显示的,还有,没有跳转到指定页的功能,当然,这些都可以自己再扩展,但是我就纳闷了,有必要每一个零件都自己重新开发吗?我们做软件开发的,其实就像工厂里做组装的,把现成的零部件按照图纸拼起来就可以了,完全不需要每一个零部件重新做。
1、用户体验极差,每次点击下一页,整个界面刷新。
2、扩展性极差,各种硬编码
3、功能很弱
方式二:第三方UI组件
用过第三方UI控件的都知道,咱们作为Web后台开发人员,可以节省许多调整样式和用原生js或者jquery实现一些功能的时间,也基本上用不着去考虑各种蛋疼的兼容性问题,因为这些问题,UI组件都替我们实现了。诸如ExtJs,easyUI,MiniUI,bootstrapts等等。
大家可以看下我之前写的ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页) 在这里我使用的是基于jquery的dataTables来实现的。
和方式一比较的优点在于
1、用户体验好,都是Ajax局部刷新的,而且可以支持一次性读取所有,然后在内存中分页(对于数据量不大的表而言,这样的分页效率很高),其次支持服务器分页。
2、扩展性好,界面的样式和显示都是可以通过属性来配置的,基本上不存在所谓的硬编码。
3、功能强大
大家有什么好的想法,说出来大家一起探讨下吧!
在以前,没有使用ORM框架,使用ADO.Net的年代,我们通常分页都是写分页存储过程来实现分页的,但是随着ORM框架的风行,分页变得越来越简单。
看着那些屎一样的项目,无论点个啥东西都把整个界面刷新,而我又不得不天天用,弄得眼睛都被闪瞎了,可是又无能为力,真心很痛苦,都说前人挖坑后人填,可是有些时候,前人坑挖得后面的人没时间填。不由得想起一个客户说的话:“公司系统有点烂,体验比较差,快递有点慢,客服比较拽,售后有点差,运费比较高”。
相关文章
- ASP.NET MVC之国际化(十一)
- asp.net mvc Partial OutputCache 在SpaceBuilder中的应用实践
- 使用 ASP.NET Core MVC 创建 Web API(六)
- 学习ASP.NET Core Razor 编程系列十——添加新字段
- 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面
- ASP.NET MVC doesn't call global.asax' EndRequest
- asp.net mvc验证那些事
- ASP.NET Application and Page Life Cycle
- .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转
- windows server 证书的颁发与IIS证书的使用 Dapper入门使用,代替你的DbSQLhelper Asp.Net MVC中Action跳转(转载)
- ASP.NET MVC ApiController控制器获取参数?
- ASP.NET MVC 项目中 一般处理程序ashx 获取Session为null空
- asp.net mvc特性约束验证,常规验证和ajax请求json返回验证 System.ComponentModel和System.ComponentModel.DataAnnotations
- 在ASP.NET中如何运行后台任务
- ASP.NET CORE 1.0 MVC API 文档用 SWASHBUCKLE SWAGGER实现
- Asp.net中DateReader读取数据库操作类!
- Asp.Net实现JS前台带箭头的流程图方法总结!(个人笔记,信息不全)
- ASP.NET MVC请求处理管道生命周期的19个关键环节(1-6)
- 最新版ASP.NET MVC5+EF6后台管理系统 Ymnets快速开发框架源码 带工作流((带开发文档和数据字典))
- ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积01, 在控制台实现
- ASP.NET MVC请求处理管道生命周期的19个关键环节(7-12)
- asp.net mvc razor语法 mvc中前台js中获取ViewData的值
- ASP.NET MVC 5 - 查询Details和Delete方法
- ASP.NET Web API
- 注册asp.net
- 《精通 ASP.NET Core MVC (第七版)》开始发售
- 深度解析ASP.NET中的Callback机制
- Asp.Net MVC EF各版本区别
- Asp.net Mvc Ajax.BeginForm提交表单