Asp.net mvc项目分页功能

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&amp;uin=@item.Company.QQ&amp;site=qq&amp;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.分页最终效果图