1.定义一个分页用的Page<T>类
1 /* 使用示例： 2 var pager = new Pager<Article>( 3 this.ControllerContext, //上下文 4 type.Articles,//数据源 5 10//,每页大小 6 //"page" url中分页参数名称，默认为page 7 ); 8 * */ 9 /// <summary> 10 /// 基于ControlerContext的分页辅助类 11 /// </summary> 12 /// <typeparam name="T"></typeparam> 13 14 public class Pager<T> 15 { 16 /// <summary> 17 /// 数据分页初始化函数 18 /// </summary> 19 /// <param name="context">控制器请求上下文</param> 20 /// <param name="source">数据源</param> 21 /// <param name="pageSize">每页条数</param> 22 /// <param name="currentPageurlParamName">Url中当前页参数名称</param> 23 public Pager( 24 ControllerContext context, 25 IEnumerable<T> source, 26 int pageSize = 10, 27 string currentPageurlParamName = "page") 28 { 29 30 this.PageSize = pageSize; 31 this.CurrentPageUrlParamName = currentPageurlParamName; 32 33 this.TotalItmesCount = source.Count(); 34 var page = 1; 35 int.TryParse(context.HttpContext.Request.Params[CurrentPageUrlParamName], out page); 36 this.CurrentPage = page; 37 38 this.data = source.Skip((CurrentPage - 1) * PageSize) 39 .Take(PageSize); 40 41 this.PageNavProvider = new PagerNavProvider<T>(this); 42 } 43 /// <summary> 44 /// URL中 页码参数名称 45 /// </summary> 46 public string CurrentPageUrlParamName 47 { 48 get; 49 private set; 50 } 51 private int currentPage; 52 /// <summary> 53 /// 当前页码，从1开始 54 /// </summary> 55 public int CurrentPage 56 { 57 get { return currentPage; } 58 private set 59 { 60 if (value > TotalPage) 61 currentPage = TotalPage; 62 else if (value <= 0) 63 currentPage = 1; 64 else 65 currentPage = value; 66 } 67 } 68 /// <summary> 69 /// 用于分页的数据总数 70 /// </summary> 71 public int TotalItmesCount 72 { 73 get; 74 private set; 75 } 76 /// <summary> 77 /// 每页包含的数据总数，默认为10条 78 /// </summary> 79 public int PageSize 80 { 81 get; 82 private set; 83 } 84 /// <summary> 85 /// 最大页码，即总页数 86 /// </summary> 87 public int TotalPage 88 { 89 get 90 { 91 return (TotalItmesCount / PageSize) + (TotalItmesCount % PageSize > 0 ? 1 : 0); 92 } 93 } 94 /// <summary> 95 /// 是否有上一页 96 /// </summary> 97 public bool HasPrev 98 { 99 get 100 { 101 return CurrentPage > 1; 102 } 103 } 104 /// <summary> 105 /// 是否有下一页 106 /// </summary> 107 public bool HasNext 108 { 109 get 110 { 111 return CurrentPage < TotalPage; 112 } 113 } 114 /// <summary> 115 /// 上一页页码 116 /// </summary> 117 public int PrevPage 118 { 119 get 120 { 121 if (HasPrev) 122 return CurrentPage - 1; 123 else 124 throw new Exception("已经是第一页了！"); 125 } 126 } 127 /// <summary> 128 /// 下一页页码 129 /// </summary> 130 public int NextPage 131 { 132 get 133 { 134 if (HasNext) 135 return CurrentPage + 1; 136 else 137 throw new Exception("已经是最后一页了！"); 138 } 139 } 140 private IEnumerable<T> data; 141 /// <summary> 142 /// 当前页包含的数据 143 /// </summary> 144 public IEnumerable<T> CurrentPageItems 145 { 146 get { return data; } 147 } 148 149 public PagerNavProvider<T> PageNavProvider { get; private set; } 150 } 151 152 public class PagerNavProvider<T> 153 { 154 155 public PagerNavProvider(Pager<T> pager, int dispalyPage = 10) 156 { 157 DisplayPage = dispalyPage; 158 var cur = pager.CurrentPage; 159 StartPageNum = cur - pager.PageSize / 2; 160 EndPageNum = cur + pager.PageSize / 2; 161 if (StartPageNum <= 0 || pager.TotalPage < DisplayPage) 162 StartPageNum = 1; 163 if (EndPageNum >= pager.TotalPage || pager.TotalPage < DisplayPage) 164 EndPageNum = pager.TotalPage; 165 } 166 public int DisplayPage { get; private set; } 167 public int StartPageNum { get; private set; } 168 public int EndPageNum { get; private set; } 169 }
2.定义一个要展示列表数据的视图模型(根据具体情况定义模型属性)
1 public class ServiceListVModel 2 { 3 4 public IEnumerable<Service> Services { get; set; } 5 6 public Pager<Service> Pager { get; set; } 7 8 9 }
3.在控制器中为视图模型赋值传递数据
1 public ActionResult List(string code = "11") 2 { 3 var services = dbSession.ServiceRepository.LoadEntities(p=>p.Type.StartsWith(code)); 4 var model = new ServiceListVModel(); 5 model.Services = services; 6 var pager = new Pager<Service>( 7 this.ControllerContext, 8 services, 9 10); 10 model.Pager = pager; 11 ViewBag.ServiceTypeCode = code; 12 return View(model); 13 }
4.前端页面数据展示(分页样式根据自己想要的效果自由替换)
1 @model ServiceTrade.ViewModels.ServiceListVModel 2 @{ 3 ViewBag.Title = "服务列表"; 4 Layout = "~/Views/Shared/_Layout.cshtml"; 5 } 6 <div class="centerMain goldMain middle clearfix" id="goldMainL"> 7 <div class="goldMainW"> 8 @Html.Action("ServiceTypeList") 9 <ul class="searchResultList"> 10 @foreach (var item in Model.Pager.CurrentPageItems) 11 { 12 <li class="searchTerms clearfix"> 13 <div class="searchTermsPic"> 14 <a class="searchTerPicA" href="/Service/Detail?id=@item.ID" target="_blank" 15 title="@item.Name"> 16 <img alt="@item.Name" src="@item.Pic" style=" 100px; height:100px;"></a> 17 </div> 18 <div class="searchTermsDetail"> 19 <h2 class="title"> 20 <a data-exposure="1,0,67167185" class="comtitle" href="/Service/Detail?id=@item.ID" 21 target="_blank" title="@item.Name">@item.Name</a> 22 </h2> 23 <div class="searchTermsDIntro"> 24 <b>￥@item.Price</b> 25 </div> 26 <div class="searchTermsOper"> 27 <a rel="external nofollow" class="qq" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=@item.Company.QQ&site=qq&menu=yes"> 28 <img border="0" src="../../../Themes/FrontEnd/Images/qq.gif" alt="点击这里给我发消息" title="点击这里给我发消息"></a> 29 </div> 30 </div> 31 <div class="searchTermsC"> 32 <p class="companyName"> 33 <a data-exposure="1,2055823,0" href="/Company/Index?id=@item.CompanyID" target="_blank"> 34 @item.Company.Name</a> 35 </p> 36 <p class="bus-mod"> 37 经营模式：@item.Company.BusinessModel</p> 38 <p class="companySell"> 39 <span class="sell">主营：</span> @item.Company.MainService 40 </p> 41 <p class="relate"> 42 <a href="javascript:void(0);" target="_blank">厂家地址</a> 43 | <a href="javascript:void(0);" target="_blank">更多产品</a></p> 44 </div> 45 </li> 46 } 47 </ul> 48 49 <div class="pagination middle"> 50 @Html.Partial("_PagerNavX", Model.Pager) 51 <div class="gotoPages"> 52 @if (Model.Services != null) 53 { 54 <span>共 @Model.Services.Count()页</span> 55 } 56 else 57 { 58 <span>共0页</span> 59 } 60 </div> 61 </div> 62 </div> 63 </div>
5.分页模块视图代码(_PagerNavX.cshtml)
1 @model Huazeming.Common.Mvc.Pager<SimpleNews.DAL.Service> 2 @{ 3 var start = Model.PageNavProvider.StartPageNum; 4 var end = Model.PageNavProvider.EndPageNum; 5 var cur = Model.CurrentPage; 6 //var type = Model.CurrentPageItems.First().Type; 7 var typeCode = ViewBag.ServiceTypeCode; 8 } 9 <div class="pages"> 10 @if (Model.HasPrev) 11 { 12 13 <a href="/Service/List?page=@Model.PrevPage&code=@typeCode">上一页</a> 14 15 } 16 else 17 { 18 <span class="noChangePage">上一页</span> 19 } 20 @for (var i = start; i <= end; i++) 21 { 22 if (i == cur) 23 { 24 <a class="current" href="javascript:;">@cur</a> 25 26 } 27 else 28 { 29 <a href="/Service/List?page=@i&code=@typeCode" rel="external nofollow">@i</a> 30 } 31 } 32 @if (Model.HasNext) 33 { 34 <a href="/Service/List?page=@Model.NextPage&code=@typeCode">下一页</a> 35 } 36 else 37 { 38 <span class="noChangePage">下一页</span> 39 } 40 </div>
6.分页部分CSS样式
1 /*pagination*/ 2 .pagination{ 100%;overflow:hidden;text-align: center;} 3 .pagination .pages{vertical-align: middle;display: inline-block;text-align: center;*display:inline; zoom:1;} 4 .pagination .gotoPages{display: inline-block;text-align: center;*display:inline; zoom:1;} 5 .pagination a,.pagination .pageBreak,.pagination .noChangePage{border: 1px #e1e1e1 solid;display:inline-block;border-right:0 none;height: 30px;height: 30px;line-height: 30px;padding: 0 11px;text-align: center;vertical-align: middle;white-space: nowrap;font-size: 14px;color: #2968aa;font-weight: 700;} 6 .pagination .pages a:hover,.pagination .current{background-color: #f2f2f2;color: #ff781f;text-decoration: none;} 7 .pagination .pageBreak{border:0 none;border-left: 1px #e1e1e1 solid;font-weight: 400;} 8 .pagination .prevs,.pagination .noChangePage{margin-right: 4px;border: 1px #e1e1e1 solid;font-size: 12px;font-weight: 400;} 9 .pagination .nextPage{margin-right: 4px;border: 1px #e1e1e1 solid;font-size: 12px;font-weight: 400;} 10 .pagination .noChangePage{color: #888888;cursor: default;} 11 .pagination .pageNumberI{ 41px;padding:3px 2px;height:18px;border: 1px #e0e0e0 solid;background-color: #ffffff;margin-right: 3px;margin-left: 3px;} 12 .pagination .gotoPages span{margin:0 15px;} 13 .pagination .gotoPagesBtn{border:0 none;background:none;58px;height:24px;border-radius: 3px;border: 1px solid #b3b3b3;background-color: #f5f5f5;color: #333333;cursor: pointer;} 14 /*pagination*/
7.分页最终效果图
