基于Bootstrap的Asp.net Mvc 分页的实现

最近写了一个mvc 的 分页，样式是基于 bootstrap 的 ，提供查询条件，不过可以自己写样式根据个人的喜好，以此分享一下。首先新建一个Mvc 项目，既然是分页就需要一些数据，我这边是模拟了一些假的数据，实际的项目中都是在数据库中去取得的，很简单的数据：

  public class User
     {
         public string Name { get; set; }
 
         public int Age { get; set; }
     }

取数据我这边是加了120个数据：

   public List<User> GetData()
         {
             List<User> list = new List<User>();
             string[] array = new string[] { "Tom", "Joy", "James", "Kobe", "Jodan", "LiLei", "Hanmeimei", "xiaoming", "Danneil", "Forest", "Newbee", "Azure" };
             for (int i = ; i < ; i++)
             {
                 User user = new User();
                 user.Age = i;
                 user.Name = array[i / ];
                 list.Add(user);
             }
 
             return list;
         }

然后新建一个 PageModel类

 /// <summary>
     /// 有些属性我写成了虚的， 这样可以根据不同的需要去重写便于扩展
     /// </summary>
     public class BasePageModel
     {
         public string SearchKeyWord { get; set; }
 
         /// <summary>
         ///点击分页是指向 Action 的名字 根据具体需要而定
         /// </summary>
         public virtual string ActionName
         {
             get
             {
                 return "Index";
             }
         }
 
         public int TotalCount { get; set; }
 
         public int CurrentIndex { get; set; }
 
         public int TotalPages
         {
             get
             {
                 return (int)Math.Ceiling((double)TotalCount / (double)PageSize);
             }
         }
 
         /// <summary>
         /// 根据需要具体而定PageSize
         /// </summary>
         public virtual int PageSize
         {
             get { return ; }
         }
 
         /// <summary>
         ///根据需要具体而定 分页显示最大的页数
         /// </summary>
         public virtual int DisplayMaxPages
         {
             get
             {
                 return ;
             }
         }
 
         public bool IsHasPrePage
         {
             get
             {
                 return CurrentIndex != ;
             }
         }
 
         public bool IsHasNextPage
         {
             get
             {
                 return CurrentIndex != TotalPages;
             }
         }
     }

再新建一个分布式图 建在Shared 文件夹里，代码如下：

 @using MvcTest.Models
 @model MvcTest.Models.BasePageModel
 
 @{if (Model != null && Model.TotalPages != )
 {
     <ul class="pagination">
         @{
 
             @Url.CreatPageLiTag(Model, Model.CurrentIndex - , false, Model.IsHasPrePage, "&laquo;")
 
     if (Model.TotalPages <= Model.DisplayMaxPages)
     {
         for (int i = ; i < Model.TotalPages; i++)
         {
             @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
         }
     }
     else
     {
         if (Model.CurrentIndex -  < )
         {
             for (int i = ; i <= Model.DisplayMaxPages - ; i++)
             {
                 @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
             }
 
             @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
         }
         else
         {
             @Url.CreatPageLiTag(Model, );
 
           if (Model.CurrentIndex + (Model.DisplayMaxPages - ) /  >= Model.TotalPages)
           {
               int page = Model.CurrentIndex - (Model.DisplayMaxPages - Model.TotalPages + Model.CurrentIndex - );
 
               if (page > )
               {
                @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
               }
 
               for (int i = page + ; i < Model.TotalPages; i++)
               {
                  @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
                }
             }
          else
            {
               int page = Model.CurrentIndex - (Model.DisplayMaxPages - ) / ;
 
                if (page > )
                {
                  @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
                }
 
                 for (int i = page; i < Model.CurrentIndex + (Model.DisplayMaxPages - ) / ; i++)
                 {
                   @Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
                  }
                 @Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
          }
 
         }
     }
 
     @Url.CreatPageLiTag(Model, Model.TotalPages, Model.TotalPages == Model.CurrentIndex)
     @Url.CreatPageLiTag(Model, Model.CurrentIndex + , false, Model.IsHasNextPage, "&raquo;")
 
         }
     </ul>
 
 }}

以上就是分页的核心代码，包括了一些判断逻辑，其中的 @Url.CreatPageLiTag 我是写了一个扩展

 public static class HtmlHelperExtensions
     {
         public static MvcHtmlString CreatPageLiTag(this UrlHelper urlHelper,
                                                    BasePageModel pageModel,
                                                    int index,
                                                    bool isCurrentIndex = false,
                                                    bool isDisable = true,
                                                    string content = "")
         {
 
             string url = urlHelper.Action(pageModel.ActionName, new { searchkey = pageModel.SearchKeyWord, index = index });
             string activeClass = !isCurrentIndex ? string.Empty : "class='active'";
             string disableClass = isDisable ? string.Empty : "class='disabled'";
             url = isDisable ? "href='" + url + "'" : string.Empty;
             string contentString = string.IsNullOrEmpty(content) ? index.ToString() : content;
 
             return new MvcHtmlString("<li " + activeClass + disableClass + "><a " + url + ">" + contentString + "</a></li>");
         }
     }

在这里面里面 是生成<a/>标签的，样式可以自己定。无非就是一些css 的定义。

然后就在action 的方法里取数据

   public ActionResult Index(string searchkey, string index)
         {
             if (string.IsNullOrEmpty(index))
                 index = "";
             if (string.IsNullOrEmpty(searchkey))
                 searchkey = string.Empty;
 
             List<User> totalList = GetData().Where(p=>p.Name.ToLower().Contains(searchkey.ToLower())).ToList();
             BasePageModel page = new BasePageModel() { SearchKeyWord = searchkey, CurrentIndex = Int32.Parse(index), TotalCount = totalList.Count };
 
             List<User> pageList = totalList.Skip((page.CurrentIndex - ) * page.PageSize).Take(page.PageSize).ToList();
             ViewData["pagemodel"] = page;
             return View(pageList);
         }

前台代码：

 @model List<MvcTest.Controllers.User>
 @{
     ViewBag.Title = "Index";
 }
 
 <h2>Data List</h2>
 <form class="navbar-form navbar-right" name="searchform" action="@Url.Action("Index", new {index="1" }) method="post">
     <div class="input-group">
         <input type="text" id="searchkey" name="searchkey" class="form-control" placeholder="Search..." />
         <span class="btn input-group-addon" onclick="document.searchform.submit();">
             <span class="glyphicon  glyphicon-search"></span>
         </span>
     </div>
 </form>
 <table class="table  table-hover table-bordered  table-condensed">
     <thead>
         <tr>
             <th>Name</th>
             <th>Age</th>
         </tr>
     </thead>
     <tbody>
         @foreach (var item in Model)
         {
             <tr>
                 <td>@item.Name</td>
                 <td>@item.Age</td>
             </tr>
         }
 
     </tbody>
 </table>
 @Html.Partial("MvcPagerView", ViewData["pagemodel"])

Ok 搞定。效果如下：

分页的样式我还是比较喜欢的，当然可以自己扩展。