1、擴展HtmlHelper類方法ShowPageNavigate
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount){ var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; pageSize = pageSize == 0 ? 3 : pageSize; var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //總頁數 var output = new StringBuilder(); if (totalPages > 1) { output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首頁</a> ", redirectTo, pageSize); if (currentPage > 1) {//處理上一頁的連接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一頁</a> ", redirectTo, currentPage - 1, pageSize); } output.Append(" "); int currint = 5; for (int i = 0; i <= 10; i++) {//一共最多顯示10個頁碼，前面5個，后面5個 if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages) { if (currint == i) {//當前頁處理 output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage); } else {//一般頁處理 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint); } } output.Append(" "); } if (currentPage < totalPages) {//處理下一頁的鏈接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一頁</a> ", redirectTo, currentPage + 1, pageSize); } output.Append(" "); if (currentPage != totalPages) { output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末頁</a> ", redirectTo, totalPages, pageSize); } output.Append(" "); } output.AppendFormat("<label>第{0}頁 / 共{1}頁</label>", currentPage, totalPages);//這個統計加不加都行 return new HtmlString(output.ToString());} |
2、添加公共類PagerInfo,PageQuery
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
public class PagerInfo{ public int RecordCount { get; set; } public int CurrentPageIndex { get; set; } public int PageSize { get; set; }}public class PagerQuery<TPager, TEntityList>{ public PagerQuery(TPager pager, TEntityList entityList) { this.Pager = pager; this.EntityList = entityList; } public TPager Pager { get; set; } public TEntityList EntityList { get; set; }} |
3、然后在Controller里面添加Action
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
public ActionResult Index(int? pageSize, int? pageIndex){ int pageIndex1 = pageIndex ?? 1; int pageSize1 = pageSize ?? 5; int count = 0; //從數據庫在取得數據，并返回總記錄數 var temp = newsSer.LoadPageEntities(c => true, c => c.id, false, pageSize1, pageIndex1, out count); PagerInfo pager = new PagerInfo(); pager.CurrentPageIndex = pageIndex1; pager.PageSize = pageSize1; pager.RecordCount = count; PagerQuery<PagerInfo, IQueryable<news>> query = new PagerQuery<PagerInfo, IQueryable<news>>(pager, temp); return View(query);} |
4、View里的部分代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<tbody> @foreach (var item in Model.EntityList) { <tr> <td class="checkBox"> <input name="ids[]" type="checkbox" value="" /> </td> <td> @item.author </td> <td> @item.title </td> <td> @item.ctime </td> <td> @Html.ActionLink("編輯", "Edit", new { id = item.id }) | @Html.ActionLink("刪除", "Delete", new { id = item.id }) </td> </tr> } @*分頁*@ <tr class=""> <td colspan="5" align="center" class="paginator"> <span> @Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount) </span> </td> </tr></tbody> |
5、添加一些樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
.paginator{ font: 12px Arial, Helvetica, sans-serif; padding: 10px 20px 10px 0; margin: 0px auto;} .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;} .paginator label{ display:block; float:left; } |
6.總結
這個案例簡單實現了在MVC中快速分頁，其實很多開源的項目中都有相關的HtmlHepler的擴展函數，其中也不乏帶有分頁的擴展，例如著名的開源商城項目nopCommerce，其中有就一個HtmlExtensions.cs擴展類，里面就有關于分頁的擴展，人家寫的可是相當專業哦，有興趣的可以研究一下。
