1、擴(kuò)展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); //總頁(yè)數(shù) var output = new StringBuilder(); if (totalPages > 1) { output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首頁(yè)</a> ", redirectTo, pageSize); if (currentPage > 1) {//處理上一頁(yè)的連接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一頁(yè)</a> ", redirectTo, currentPage - 1, pageSize); } output.Append(" "); int currint = 5; for (int i = 0; i <= 10; i++) {//一共最多顯示10個(gè)頁(yè)碼，前面5個(gè)，后面5個(gè) if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages) { if (currint == i) {//當(dāng)前頁(yè)處理 output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage); } else {//一般頁(yè)處理 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) {//處理下一頁(yè)的鏈接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一頁(yè)</a> ", redirectTo, currentPage + 1, pageSize); } output.Append(" "); if (currentPage != totalPages) { output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末頁(yè)</a> ", redirectTo, totalPages, pageSize); } output.Append(" "); } output.AppendFormat("<label>第{0}頁(yè) / 共{1}頁(yè)</label>", currentPage, totalPages);//這個(gè)統(tǒng)計(jì)加不加都行 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; //從數(shù)據(jù)庫(kù)在取得數(shù)據(jù)，并返回總記錄數(shù) 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> } @*分頁(yè)*@ <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.總結(jié)
這個(gè)案例簡(jiǎn)單實(shí)現(xiàn)了在MVC中快速分頁(yè)，其實(shí)很多開(kāi)源的項(xiàng)目中都有相關(guān)的HtmlHepler的擴(kuò)展函數(shù)，其中也不乏帶有分頁(yè)的擴(kuò)展，例如著名的開(kāi)源商城項(xiàng)目nopCommerce，其中有就一個(gè)HtmlExtensions.cs擴(kuò)展類，里面就有關(guān)于分頁(yè)的擴(kuò)展，人家寫(xiě)的可是相當(dāng)專業(yè)哦，有興趣的可以研究一下。
