标签:
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=" width: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{width: 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{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{width: 41px;padding:3px 2px;height:18px;border: 1px #e0e0e0 solid;margin-right: 3px;margin-left: 3px;}
12 .pagination .gotoPages span{margin:0 15px;}
13 .pagination .gotoPagesBtn{border:0 none;background:none;width:58px;height:24px;border-radius: 3px;border: 1px solid #b3b3b3;color: #333333;cursor: pointer;}
14 /*pagination*/
7.分页最终效果图

标签:
原文地址:http://www.cnblogs.com/zhangzhixiong/p/4778139.html