HtmlHelper的擴展分頁方法
阿新 • • 發佈:2017-05-23
++ ora fff sys source mode pagelist ring ack
一、新建一個空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>
HtmlHelper的擴展分頁方法