基于Bootstrap的Asp.net Mvc 分页的实现
最近写了一个mvc 的 分页，样式是基于 bootstrap 的 ，提供查询条件，不过可以自己写样式根据个人的喜好，以此分享一下。首先新建一个Mvc 项目，既然是分页就需要一些数据，我这边是模拟了一些假的数据，实际的项目中都是在数据库中去取得的，很简单的数据：
1 public class User
2 {
3 public string Name { get; set; }
4
5 public int Age { get; set; }
6 }
取数据我这边是加了120个数据：
1 public List<User> GetData()
2 {
3 List<User> list = new List<User>();
4 string[] array = new string[] { "Tom", "Joy", "James", "Kobe", "Jodan", "LiLei", "Hanmeimei", "xiaoming", "Danneil", "Forest", "Newbee", "Azure" };
5 for (int i = 0; i < 120; i++)
6 {
7 User user = new User();
8 user.Age = i;
9 user.Name = array[i / 10];
10 list.Add(user);
11 }
12
13
14 return list;
15 }
然后新建一个 PageModel类
1 /// <summary>
2 /// 有些属性我写成了虚的， 这样可以根据不同的需要去重写便于扩展
3 /// </summary>
4 public class BasePageModel
5 {
6 public string SearchKeyWord { get; set; }
7
8 /// <summary>
9 ///点击分页是指向 Action 的名字 根据具体需要而定
10 /// </summary>
11 public virtual string ActionName
12 {
13 get
14 {
15 return "Index";
16 }
17 }
18
19 public int TotalCount { get; set; }
20
21 public int CurrentIndex { get; set; }
22
23 public int TotalPages
24 {
25 get
26 {
27 return (int)Math.Ceiling((double)TotalCount / (double)PageSize);
28 }
29 }
30
31 /// <summary>
32 /// 根据需要具体而定PageSize
33 /// </summary>
34 public virtual int PageSize
35 {
36 get { return 10; }
37 }
38
39 /// <summary>
40 ///根据需要具体而定 分页显示最大的页数
41 /// </summary>
42 public virtual int DisplayMaxPages
43 {
44 get
45 {
46 return 10;
47 }
48 }
49
50 public bool IsHasPrePage
51 {
52 get
53 {
54 return CurrentIndex != 1;
55 }
56 }
57
58 public bool IsHasNextPage
59 {
60 get
61 {
62 return CurrentIndex != TotalPages;
63 }
64 }
65 }
再新建一个分布式图 建在Shared 文件夹里，代码如下：
1 @using MvcTest.Models
2 @model MvcTest.Models.BasePageModel
3
4 @{if (Model != null && Model.TotalPages != 0)
5 {
6 <ul class="pagination">
7 @{
8
9 @Url.CreatPageLiTag(Model, Model.CurrentIndex - 1, false, Model.IsHasPrePage, "«")
10
11 if (Model.TotalPages <= Model.DisplayMaxPages)
12 {
13 for (int i = 1; i < Model.TotalPages; i++)
14 {
15 @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
16 }
17 }
18 else
19 {
20 if (Model.CurrentIndex - 1 < 5)
21 {
22 for (int i = 1; i <= Model.DisplayMaxPages - 1; i++)
23 {
24 @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
25 }
26
27 @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
28 }
29 else
30 {
31 @Url.CreatPageLiTag(Model, 1);
32
33
34 if (Model.CurrentIndex + (Model.DisplayMaxPages - 2) / 2 >= Model.TotalPages)
35 {
36 int page = Model.CurrentIndex - (Model.DisplayMaxPages - Model.TotalPages + Model.CurrentIndex - 1);
37
38 if (page > 1)
39 {
40 @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
41 }
42
43 for (int i = page + 1; i < Model.TotalPages; i++)
44 {
45 @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
46 }
47 }
48 else
49 {
50 int page = Model.CurrentIndex - (Model.DisplayMaxPages - 2) / 2;
51
52 if (page > 2)
53 {
54 @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
55 }
56
57 for (int i = page; i < Model.CurrentIndex + (Model.DisplayMaxPages - 2) / 2; i++)
58 {
59 @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
60 }
61 @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
62 }
63
64 }
65 }
66
67 @Url.CreatPageLiTag(Model, Model.TotalPages, Model.TotalPages == Model.CurrentIndex)
68 @Url.CreatPageLiTag(Model, Model.CurrentIndex + 1, false, Model.IsHasNextPage, "»")
69
70 }
71 </ul>
72
73 }}
以上就是分页的核心代码，包括了一些判断逻辑，其中的 @Url.CreatPageLiTag 我是写了一个扩展
1 public static class HtmlHelperExtensions
2 {
3 public static MvcHtmlString CreatPageLiTag(this UrlHelper urlHelper,
4 BasePageModel pageModel,
5 int index,
6 bool isCurrentIndex = false,
7 bool isDisable = true,
8 string content = "")
9 {
10
11 string url = urlHelper.Action(pageModel.ActionName, new { searchkey = pageModel.SearchKeyWord, index = index });
12 string activeClass = !isCurrentIndex ? string.Empty : "class='active'";
13 string disableClass = isDisable ? string.Empty : "class='disabled'";
14 url = isDisable ? "href='" + url + "'" : string.Empty;
15 string contentString = string.IsNullOrEmpty(content) ? index.ToString() : content;
16
17 return new MvcHtmlString("<li " + activeClass + disableClass + "><a " + url + ">" + contentString + "</a></li>");
18 }
19 }
在这里面里面 是生成<a/>标签的，样式可以自己定。无非就是一些css 的定义。
然后就在action 的方法里取数据
1 public ActionResult Index(string searchkey, string index)
2 {
3 if (string.IsNullOrEmpty(index))
4 index = "1";
5 if (string.IsNullOrEmpty(searchkey))
6 searchkey = string.Empty;
7
8 List<User> totalList = GetData().Where(p=>p.Name.ToLower().Contains(searchkey.ToLower())).ToList();
9 BasePageModel page = new BasePageModel() { SearchKeyWord = searchkey, CurrentIndex = Int32.Parse(index), TotalCount = totalList.Count };
10
11 List<User> pageList = totalList.Skip((page.CurrentIndex - 1) * page.PageSize).Take(page.PageSize).ToList();
12 ViewData["pagemodel"] = page;
13 return View(pageList);
14 }
前台代码：
1 @model List<MvcTest.Controllers.User>
2 @{
3 ViewBag.Title = "Index";
4 }
5
6 <h2>Data List</h2>
7 <form class="navbar-form navbar-right" name="searchform" action="@Url.Action("Index", new {index="1" }) method="post">
8 <div class="input-group">
9 <input type="text" id="searchkey" name="searchkey" class="form-control" placeholder="Search..." />
10 <span class="btn input-group-addon" onclick="document.searchform.submit();">
11 <span class="glyphicon glyphicon-search"></span>
12 </span>
13 </div>
14 </form>
15 <table class="table table-hover table-bordered table-condensed">
16 <thead>
17 <tr>
18 <th>Name</th>
19 <th>Age</th>
20 </tr>
21 </thead>
22 <tbody>
23 @foreach (var item in Model)
24 {
25 <tr>
26 <td>@item.Name</td>
27 <td>@item.Age</td>
28 </tr>
29 }
30
31 </tbody>
32 </table>
33 @Html.Partial("MvcPagerView", ViewData["pagemodel"])
Ok 搞定。效果如下：
分页的样式我还是比较喜欢的，当然可以自己扩展。