使用方法:
先把mvcpager.dll引用加入mvc項目中。
前臺代碼
前臺：
|
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
|
@{Layout = null;}@using Webdiyer.WebControls.Mvc@model PagedList<string><!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /><title>Index</title><link href="~/Content/css_pager.css" rel="stylesheet" /></head><body><div>@foreach (var item in Model){@item<br /> }</div><div style="text-align:center;">@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ContainerTagName = "ul", PrevPageText = "上頁", NextPageText = "下頁", FirstPageText = "首頁", LastPageText = "尾頁", CssClass = "pagination", PagerItemsSeperator = "", CurrentPagerItemWrapperFormatString = "<li class=\"active\"><a href=\"#\">{0}</a></li>", PagerItemWrapperFormatString = "<li>{0}</li>" }, new { id = "bootstrappager", @class = "pagination" })<!-- @class 可為pagination或pager 樣式可自行修改樣式表--></div></body></html> |
后臺代碼
|
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
|
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using Webdiyer.WebControls.Mvc;namespace MvcApplication6.Controllers{public class HomeController : Controller{//// GET: /Home/public ActionResult Index(int pageIndex=1, int pageSize=2){List<string> list = new List<string>(){"a","b","c","d"};return View(list.ToPagedList(pageIndex, pageSize));}}} @Html.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ContainerTagName = "ul", PrevPageText = "上頁", NextPageText = "下頁", FirstPageText = "首頁", LastPageText = "尾頁", CssClass = "pagination", PagerItemsSeperator = "", CurrentPagerItemWrapperFormatString = "<li class=\"active\"><a href=\"#\">{0}</a></li>", PagerItemWrapperFormatString = "<li>{0}</li>" }, new { id = "bootstrappager", @class = "pagination" }) |
樣式更改:class為pager或pagination
如圖：
樣式文件：
|
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
.pagination {border-radius: 4px;display: inline-block;margin: 20px 0;padding-left: 0;}.pagination > li {display: inline;}.pagination > li > a, .pagination > li > span {background-color: #fff;border: 1px solid #ddd;color: #337ab7;float: left;line-height: 1.42857;margin-left: -1px;padding: 6px 12px;position: relative;text-decoration: none;}.pagination > li:first-child > a, .pagination > li:first-child > span {border-bottom-left-radius: 4px;border-top-left-radius: 4px;margin-left: 0;}.pagination > li:last-child > a, .pagination > li:last-child > span {border-bottom-right-radius: 4px;border-top-right-radius: 4px;}.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {background-color: #eee;border-color: #ddd;color: #23527c;z-index: 3;}.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {background-color: #337ab7;border-color: #337ab7;color: #fff;cursor: default;z-index: 2;}.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {background-color: #fff;border-color: #ddd;color: #777;cursor: not-allowed;}/*.pagination-lg > li > a, .pagination-lg > li > span {font-size: 18px;line-height: 1.33333;padding: 10px 16px;}.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {border-bottom-left-radius: 6px;border-top-left-radius: 6px;}.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {border-bottom-right-radius: 6px;border-top-right-radius: 6px;}.pagination-sm > li > a, .pagination-sm > li > span {font-size: 12px;line-height: 1.5;padding: 5px 10px;}.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {border-bottom-left-radius: 3px;border-top-left-radius: 3px;}.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {border-bottom-right-radius: 3px;border-top-right-radius: 3px;}*/.pager {list-style: outside none none;margin: 20px 0;padding-left: 0;text-align: center;}.pager li {display: inline;}.pager li > a, .pager li > span {background-color: #fff;border: 1px solid #ddd;border-radius: 15px;display: inline-block;padding: 5px 14px;text-decoration: none;}.pager li > a:hover, .pager li > a:focus {background-color: #eee;text-decoration: none;}.pager .next > a, .pager .next > span {float: right;}.pager .previous > a, .pager .previous > span {float: left;}.pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span {background-color: #fff;color: #777;cursor: not-allowed;}.pager > .active > a, .pager > .active > span, .pager > .active > a:hover, .pager > .active > span:hover, .pager > .active > a:focus, .pager > .active > span:focus {background-color: #eee;cursor: default;z-index: 2;} |
以上所述是小編給大家介紹的BootStrap mvcpager分頁樣式(get請求,刷新頁面)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持！
原文鏈接：http://www.cnblogs.com/gaocong/p/4991174.html
