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

1  public class User2     {3         public string Name { get; set; }4 5         public int Age { get; set; }6     }

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

1   public List
     
       GetData() 2         { 3             List
      
        list = new List
       
        (); 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 /// 
 2     /// 有些属性我写成了虚的， 这样可以根据不同的需要去重写便于扩展 3     /// 
 4     public class BasePageModel 5     { 6         public string SearchKeyWord { get; set; } 7  8         /// 
 9         ///点击分页是指向 Action 的名字 根据具体需要而定10         /// 
11         public virtual string ActionName12         {13             get14             {15                 return "Index";16             }17         }18 19         public int TotalCount { get; set; }20 21         public int CurrentIndex { get; set; }22 23         public int TotalPages24         {25             get26             {27                 return (int)Math.Ceiling((double)TotalCount / (double)PageSize);28             }29         }30              31         /// 
32         /// 根据需要具体而定PageSize33         /// 
34         public virtual int PageSize35         {36             get { return 10; }37         }38 39         /// 
40         ///根据需要具体而定 分页显示最大的页数 41         /// 
42         public virtual int DisplayMaxPages43         {44             get45             {46                 return 10;47             }48         }49 50         public bool IsHasPrePage51         {52             get53             {54                 return CurrentIndex != 1;55             }56         }57 58         public bool IsHasNextPage59         {60             get61             {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     
     
       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     else19     {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         else30         {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          else49            {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     
     
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("
" + contentString + "
");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
     
       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
      
        pageList = totalList.Skip((page.CurrentIndex - 1) * page.PageSize).Take(page.PageSize).ToList();12             ViewData["pagemodel"] = page;13             return View(pageList);14         }
      
     

前台代码：

1 @model List
     
       2 @{ 3     ViewBag.Title = "Index"; 4 } 5  6 
      
Data List
 7 
      
        8     
       
         9         
        10         
        11             12         13     
       
14 
      
15 
      
       16     
        17         
         18             
19             
20         
21     
22     
        23         @foreach (var item in Model)24         {25             
         26                 
27                 
28             
29         }30 31     
32 
       
        
         
Name
         
Age
        
       
       
        
         
@item.Name
         
@item.Age
        
       
      
33 @Html.Partial("MvcPagerView", ViewData["pagemodel"])
     

 

 

Ok 搞定。效果如下：

 

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