ASP.NET MVC 4使用PagedList.Mvc分页

谁践踏了优雅 2022-04-24 05:08 223阅读 0赞

# [ASP.NET MVC 4使用PagedList.Mvc分页][ASP.NET MVC 4_PagedList.Mvc] #

ASP.NET MVC中进行分页的方式有多种，在NuGet上有提供使用PagedList、PagedList.Mvc进行分页。

![650351-20170716192527441-2096903785.png][]

在安装引用PagedList.Mvc的同时会安装引用PagedList。

@Html.PagedListPager((PagedList.IPagedList<SampleInfo>)ViewBag.Models, page => Url.Action("Index", new { page, keyword = Request["keyword"], datemin = Request["datemin"], datemax = Request["datemax"] }))

搜索触发事件：

后台方法：

IQueryable<SampleInfo> models = db.SampleInfoBLL.GetAllEntities().Where(d => d.IsDel == false);
    if (!String.IsNullOrEmpty(Request["keyword"]))
    {
    string keyword = Request["keyword"];
    models = models.Where(d => d.Site_Chinese.Contains(keyword));
    }
    if (!String.IsNullOrEmpty(Request["datemin"]))
    {
    int datemin = Convert.ToInt32(Request["datemin"]);
    models = models.Where(d => Convert.ToDouble(d.Lon_Degree) >= datemin);
    }
    if (!String.IsNullOrEmpty(Request["datemax"]))
    {
    int datemax = Convert.ToInt32(Request["datemax"]);
    models = models.Where(d => Convert.ToDouble(d.Lat_Degree) <= datemax);
    }
    int page = 1;
    if (Request["page"] != null)
    {
    page = Convert.ToInt32(Request["page"]);
    }
    ViewBag.ModelsCount = models.Count();
    ViewBag.Models = models.OrderBy(d => d.SampleInfoID).ToPagedList(page, 10);

分页控件样式：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

.pagination {
           
      display: inline-block;
      padding-left: 0;
      margin: 20px 0;
      border-radius: 4px;
    }
    
    .pagination > li {
           
      display: inline;
    }
    
    .pagination > li > a,
    .pagination > li > span {
           
      position: relative;
      float: left;
      padding: 6px 12px;
      margin-left: -1px;
      line-height: 1.428571429;
      text-decoration: none;
      background-color: #ffffff;
      border: 1px solid #dddddd;
    }
    
    .pagination > li:first-child > a,
    .pagination > li:first-child > span {
           
      margin-left: 0;
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
    }
    
    .pagination > li:last-child > a,
    .pagination > li:last-child > span {
           
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    
    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
           
      background-color: #eeeeee;
    }
    
    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
           
      z-index: 2;
      color: #ffffff;
      cursor: default;
      background-color: #428bca;
      border-color: #428bca;
    }
    
    .pagination > .disabled > span,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
           
      color: #999999;
      cursor: not-allowed;
      background-color: #ffffff;
      border-color: #dddddd;
    }
    
    .pagination-lg > li > a,
    .pagination-lg > li > span {
           
      padding: 10px 16px;
      font-size: 18px;
    }
    
    .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-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    
    .pagination-sm > li > a,
    .pagination-sm > li > span {
           
      padding: 5px 10px;
      font-size: 12px;
    }
    
    .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-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
    
    .pager {
           
      padding-left: 0;
      margin: 20px 0;
      text-align: center;
      list-style: none;
    }
    
    .pager:before,
    .pager:after {
           
      display: table;
      content: " ";
    }
    
    .pager:after {
           
      clear: both;
    }
    
    .pager:before,
    .pager:after {
           
      display: table;
      content: " ";
    }
    
    .pager:after {
           
      clear: both;
    }
    
    .pager li {
           
      display: inline;
    }
    
    .pager li > a,
    .pager li > span {
           
      display: inline-block;
      padding: 5px 14px;
      background-color: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 15px;
    }
    
    .pager li > a:hover,
    .pager li > a:focus {
           
      text-decoration: none;
      background-color: #eeeeee;
    }
    
    .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 {
           
      color: #999999;
      cursor: not-allowed;
      background-color: #ffffff;
    }
    .pagination-container {
           
        text-align: center;
    }

PagedList.css

分页样式效果：

![650351-20170716194544222-74693153.png][]

posted @ 2017-07-16 19:51 [波霸38][38] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

[ASP.NET MVC 4_PagedList.Mvc]: https://www.cnblogs.com/sharing1986687846/p/7191535.html
[650351-20170716192527441-2096903785.png]: /images/20220219/da02b9af98b24de0a791eea22e2d09be.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220219/35a598ce90fc4546b09efb8c78f8acf9.png
[650351-20170716194544222-74693153.png]: /images/20220219/36cc8052eb7e4211bec6ad2a58bc32bf.png
[38]: https://www.cnblogs.com/sharing1986687846/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=7191535