HtmlHelper的扩展分页方法
一、新建一个空MVC项目,命名为MVCAppPager
二、新建一个文件夹PageHelper,在文件夹下新建接口IPageList以及实现类PageList
IPageList接口:
public interface IPageList { /// <summary> /// 第几页 /// </summary> int PageIndex { get; set; } /// <summary> /// 每页记录数 /// </summary> int PageSize { get; set; } /// <summary> /// 总页数 /// </summary> int PageTotal { get; } /// <summary> /// 记录总数 /// </summary> long RecordTotal { get; set; } /// <summary> /// 每页开始位置 /// </summary> long CurrentStart { get; } /// <summary> /// 每页结束位置 /// </summary> long CurrentEnd { get; } }
PageList实现类:
public class PageList<T> : List<T>, IPageList { public PageList(IEnumerable<T> source) : base(source) { } public PageList(IEnumerable<T> source, int pageIndex, int pageSize, long recordTotal) { if (source != null) { this.AddRange(source); } PageIndex = pageIndex; PageSize = pageSize; RecordTotal = recordTotal; } public int PageIndex { get; set; } public int PageSize { get; set; } public long RecordTotal { get; set; } public int PageTotal { get { return RecordTotal % PageSize == 0 ? (int)RecordTotal / PageSize : (int)RecordTotal / PageSize + 1; } } public long CurrentStart { get { return PageIndex * PageSize + 1; } } public long CurrentEnd { get { return (PageIndex + 1) * PageSize > RecordTotal ? RecordTotal : (PageIndex + 1) * PageSize; } } }
三、创建分页HtmlHelper扩展方法Pager
namespace System.Web.Mvc { public static class ExtHelper { public static MvcHtmlString Pager(this HtmlHelper helper, IPageList list) { var redirectTo = helper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; var output = new StringBuilder(); if (list.PageTotal > 1) { output.AppendFormat("<div class='paginator'>"); //处理首页连接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=0&pageSize={1}'>首页</a> ", redirectTo, list.PageSize); if (list.PageIndex > 1) {//处理上一页的连接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, list.PageIndex - 1, list.PageSize); } else { output.Append("<a class='pageLink'>上一页</a>"); } output.Append(" "); int currint = 5; for (int i = 0; i <= 10; i++) {//一共最多显示10个页码,前面5个,后面5个 if ((list.PageIndex + i - currint) >= 0 && (list.PageIndex + i - currint) < list.PageTotal) { if (currint == i) {//当前页处理 output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, list.PageIndex, list.PageSize, list.PageIndex + 1); } else {//一般页处理 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, list.PageIndex + i - currint, list.PageSize, list.PageIndex + i - currint + 1); } } output.Append(" "); } if (list.PageIndex < list.PageTotal - 1) {//处理下一页的链接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, list.PageIndex + 1, list.PageSize); } else { output.Append("<a class='pageLink'>下一页</a>"); } output.Append(" "); if (list.PageIndex != list.PageTotal - 1) { output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, list.PageTotal - 1, list.PageSize); } output.Append(" "); } output.AppendFormat("第{0}页 / 共{1}页", list.PageIndex+1, list.PageTotal);//这个统计加不加都行 output.AppendFormat("</div>"); return new MvcHtmlString(output.ToString()); } } }
注意将命名空间修改为:namespace System.Web.Mvc,这样就不用每个页面都要引用命名空间了
四、控制器方式实现
1.在Models文件夹下,新建一个Order实体
namespace MvcAppPager.Models { public class Order { public long ID { get; set; } public string OrderNo { get; set; } public decimal WayFee { get; set; } public string EMS { get; set; } } }
2.新建一个Home控制器,实现如下
public class HomeController : Controller { /// <summary> /// 构造数据 /// </summary> List<Order> list = new List<Order> { new Order { ID = 1,OrderNo="20160510",WayFee=20,EMS="C01111"}, new Order { ID = 2,OrderNo="20160512",WayFee=10,EMS="C01221"}, new Order { ID = 3,OrderNo="20160515",WayFee=15,EMS="C03411"}, new Order { ID = 4,OrderNo="20160518",WayFee=11,EMS="C01341"}, new Order { ID = 5,OrderNo="20160520",WayFee=16,EMS="C01551"}, new Order { ID = 6,OrderNo="20160521",WayFee=13,EMS="C02341"} }; // GET: Home public ActionResult Index(int pageIndex = 0,int pageSize = 2) { List<Order> source = list.Skip(pageIndex * pageSize).Take(pageSize).ToList(); PageList <Order> orderList = new PageList<Order>(source, pageIndex, pageSize, list.Count); return View(orderList); } }
五、Index视图
@model MvcAppPager.PageHelper.PageList<MvcAppPager.Models.Order> @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style> .paginator { font: 12px Arial, Helvetica, sans-serif; padding: 10px 20px 10px 0; margin: 0px; } .paginator a { border: solid 1px #ccc; color: #0063dc; cursor: pointer; text-decoration: none; } .paginator a:visited { padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none; } .paginator .cpb { border: 1px solid #F50; font-weight: 700; color: #F50; background-color: #ffeee5; } .paginator a:hover { border: solid 1px #F50; color: #f60; text-decoration: none; } .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover { float: left; height: 16px; line-height: 16px; min-width: 10px; _width: 10px; margin-right: 5px; text-align: center; white-space: nowrap; font-size: 12px; font-family: Arial,SimSun; padding: 0 3px; } </style> </head> <body> <table> <thead> <tr> <th>ID</th> <th>订单号</th> <th>运单号</th> <th>运费</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td>@item.ID</td> <td>@item.OrderNo</td> <td>@item.EMS</td> <td>@item.WayFee</td> </tr> } </tbody> </table> @Html.Pager(Model) </body> </html>
六、运行效果如下图: