zoukankan      html  css  js  c++  java
  • 基于Bootstrap的Asp.net Mvc 分页

    基于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, "&laquo;")
    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, "&raquo;")
    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 搞定。效果如下:

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

     
  • 相关阅读:
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    SVN分支
    SVN分支
    SVN 版本回退
    SVN 版本回退
    如何在excel中取消合并单元格后内容自动填充?
    如何在excel中取消合并单元格后内容自动填充?
    如何让自己像打王者荣耀一样发了疯、拼了命的学习?
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/4198763.html
Copyright © 2011-2022 走看看