你的位置:首页 > ASP.net教程

[ASP.net教程]asp.net mvc 简易通用自定义Pager实现分页


asp.net mvc 简易通用自定义Pager实现分页

Intro

一个WEB应用程序中经常会用到数据分页,本文将实现一个简单通用的分页组件,包含一个 PagerModel (用来保存页码信息),一个 HtmlHelperPager 扩展方法和一个 PagedListModel<T> 分页数据模型。

PagerModel 分页模型

PagerModel 用来保存分页信息,代码实现如下:

 1   /// <summary> 2   /// PagerModel 分页模型 3   /// </summary> 4   public class PagerModel 5   { 6     public int PageIndex { get; set; } 7  8     public int PageSize { get; set; } 9 10     public int PageCount { get; private set; }11 12     public int TotalCount { get; set; }13 14     public PagerModel(int totalCount)15     {16       PageIndex = 1;17       PageSize = 10;18       TotalCount = totalCount;19       PageCount = Convert.ToInt32(Math.Ceiling(TotalCount * 1.0 / PageSize));20     }21 22     public PagerModel(int pageSize, int totalCount)23     {24       PageIndex = 1;25       PageSize = pageSize;26       TotalCount = totalCount;27       PageCount = Convert.ToInt32(Math.Ceiling(TotalCount * 1.0 / PageSize));28     }29 30     public PagerModel(int pageIndex, int pageSize, int totalCount)31     {32       PageIndex = pageIndex;33       PageSize = pageSize;34       TotalCount = totalCount;35       PageCount = Convert.ToInt32(Math.Ceiling(TotalCount * 1.0 / PageSize));36     }37   }

PagerModel
 /// <summary> /// PagerModel 分页模型 /// </summary> public class PagerModel {   public int PageIndex { get; set; }   public int PageSize { get; set; }   public int PageCount { get; private set; }   public int TotalCount { get; set; }   public PagerModel(int totalCount)   {     PageIndex = 1;     PageSize = 10;     TotalCount = totalCount;     PageCount = Convert.ToInt32(Math.Ceiling(TotalCount * 1.0 / PageSize));   }   public PagerModel(int pageSize, int totalCount)   {     PageIndex = 1;     PageSize = pageSize;     TotalCount = totalCount;     PageCount = Convert.ToInt32(Math.Ceiling(TotalCount * 1.0 / PageSize));   }   public PagerModel(int pageIndex, int pageSize, int totalCount)   {     PageIndex = pageIndex;     PageSize = pageSize;     TotalCount = totalCount;     PageCount = Convert.ToInt32(Math.Ceiling(TotalCount * 1.0 / PageSize));   } }

Pager扩展方法

Pager扩展方法 可根据自己的需求进行定制话实现,Pager扩展方法需要一个PagerModel类型的参数来生成页码,我这里是用的bootstrap的样式来做的分页,整个系统用的是同一个样式的分页所以把样式直接写死在代码里了。
Pager这里的代码重构做的不是太好,我觉得主要两个地方:* 样式直接写死,前端不好维护* 点击页码触发的事件直接写死了,如果需要改成其他名称则需要改动 Pager扩展方法 代码

 1   /// <summary> 2   /// PagerHelper 分页帮助类 3   /// </summary> 4   public static class PagerHelper 5   { 6     public static MvcHtmlString Pager(this HtmlHelper helper, PagerModel pager) 7     { 8       StringBuilder sbHtmlText = new StringBuilder(); 9       sbHtmlText.Append("<div style=\"text-align:center\"><nav><ul class=\"pagination\">");10       if (pager.PageIndex <= 1)11       {12         sbHtmlText.Append("<li class=\"disabled\"><a href=\"javascript:void()\" aria-label=\"Previous\"><span aria-hidden=\"true\">&laquo;</span></a></li>");13       }14       else15       {16         sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\" aria-label=\"{0}\"><span aria-hidden=\"true\">&laquo;</span></a></li>", pager.PageIndex - 1);17         sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\">{0}</a></li>", pager.PageIndex - 1);18       }19       sbHtmlText.AppendFormat("<li class=\"active\"><a href=\"javascript:void()\">{0}<span class=\"sr-only\">(current)</span></a></li>", pager.PageIndex);20       if (pager.PageIndex >= pager.PageCount)21       {22         sbHtmlText.Append("<li class=\"disabled\"><a href=\"javascript:void()\" aria-label=\"Next\"><span aria-hidden=\"true\">&raquo;</span></a></li>");23       }24       else25       {26         sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\">{0}</a></li>", pager.PageIndex + 1);27         sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\" aria-label=\"Next\"><span aria-hidden=\"true\">&raquo;</span></a></li>", pager.PageIndex + 1);28       }29       sbHtmlText.Append("</ul></nav>");30       sbHtmlText.AppendFormat("<div><span>每页有<strong>{0}</strong>条数据,一共有<strong>{1}</strong>页,总计<strong>{2}</strong>条数据</span></div></div>", pager.PageSize, pager.PageCount, pager.TotalCount);      31       return MvcHtmlString.Create(sbHtmlText.ToString());32     }33   }

PagerHelper
 /// <summary> /// PagerHelper 分页帮助类 /// </summary> public static class PagerHelper {   public static MvcHtmlString Pager(this HtmlHelper helper, PagerModel pager)   {     StringBuilder sbHtmlText = new StringBuilder();     sbHtmlText.Append("<div style=\"text-align:center\"><nav><ul class=\"pagination\">");     if (pager.PageIndex <= 1)     {       sbHtmlText.Append("<li class=\"disabled\"><a href=\"javascript:void()\" aria-label=\"Previous\"><span aria-hidden=\"true\">&laquo;</span></a></li>");     }     else     {       sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\" aria-label=\"{0}\"><span aria-hidden=\"true\">&laquo;</span></a></li>", pager.PageIndex - 1);       sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\">{0}</a></li>", pager.PageIndex - 1);     }     sbHtmlText.AppendFormat("<li class=\"active\"><a href=\"javascript:void()\">{0}<span class=\"sr-only\">(current)</span></a></li>", pager.PageIndex);     if (pager.PageIndex >= pager.PageCount)     {       sbHtmlText.Append("<li class=\"disabled\"><a href=\"javascript:void()\" aria-label=\"Next\"><span aria-hidden=\"true\">&raquo;</span></a></li>");     }     else     {       sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\">{0}</a></li>", pager.PageIndex + 1);       sbHtmlText.AppendFormat("<li><a href=\"javascript:loadData({0})\" aria-label=\"Next\"><span aria-hidden=\"true\">&raquo;</span></a></li>", pager.PageIndex + 1);     }     sbHtmlText.Append("</ul></nav>");     sbHtmlText.AppendFormat("<div><span>每页有<strong>{0}</strong>条数据,一共有<strong>{1}</strong>页,总计<strong>{2}</strong>条数据</span></div></div>", pager.PageSize, pager.PageCount, pager.TotalCount);           return MvcHtmlString.Create(sbHtmlText.ToString());   } }

PagedListModel 分页数据模型

PagedListModel 用来封装返回到视图 View 的数据和 分页模型 PagerModel,实现代码如下

1   public class PagedListModel<T> where T : class, new()2   {3     public List<T> Data { get; set; }4 5     public PagerModel Pager { get; set; }6   }

PagedListModel

 

 public class PagedListModel<T> where T : class, new() {   public List<T> Data { get; set; }   public PagerModel Pager { get; set; } }

控制器数据处理

控制器处理代码如下:
search 是一个包含了 PageIndex 和 PageSize 的请求参数

 1       int rowsCount = 0; 2       try 3       { 4         List<Models.BlockEntity> blockList = new Business.BLLBlockEntity().GetPagedList(search.PageIndex, search.PageSize, out rowsCount, whereLambda, b => b.BlockTime, false); 5         PagerModel pager = new PagerModel(search.PageIndex, search.PageSize, rowsCount); 6         PagedListModel<Models.BlockEntity> dataList = new PagedListModel<Models.BlockEntity>() { Pager = pager, Data = blockList }; 7         return View(dataList); 8       } 9       catch (Exception ex)10       {11         logger.Error(ex);12         throw;13       }

Controller

 

    int rowsCount = 0;    try    {      List<Models.BlockEntity> blockList = new Business.BLLBlockEntity().GetPagedList(search.PageIndex, search.PageSize, out rowsCount, whereLambda, b => b.BlockTime, false);//记录日志      PagerModel pager = new PagerModel(search.PageIndex, search.PageSize, rowsCount);//定义Pager Model      PagedListModel<Models.BlockEntity> dataList = new PagedListModel<Models.BlockEntity>() { Pager = pager, Data = blockList };//定义返回到 View 的 PagedListModel      return View(dataList);    }    catch (Exception ex)    {      logger.Error(ex);//记录日志      throw;    }

页面处理

 1 @using ActivityReservation.Helpers; 2 @model PagedListModel<Models.BlockEntity> 3 @{  4   Layout = null; 5 } 6 <table class="table table-hover"> 7   <thead> 8     <tr> 9       <th>黑名单类型</th>10       <th>黑名单内容</th>11       <th>拉入黑名单时间</th>12       <th>状态</th>13       <th>操作</th>14     </tr>15   </thead>16   <tbody>17     @foreach (Models.BlockEntity item in Model.Data)18     {19       string className = "bg-success";20       if (!item.IsActive)21       {22         className = "bg-danger";23       }24       <tr class="@className">25           <td>26             @item.BlockType.TypeName27           </td>28           <td>29             @item.BlockValue30           </td>31           <td>32             @item.BlockTime33           </td>34           <td>35             @if (item.IsActive)36           {37               <span>启用</span>38             }39             else40             {41               <span>禁用</span>42             }43           </td>44           <td>45             @if (item.IsActive)46           {47               <button type="button" class='btn btn-warning' onclick="UpdateStatus('@item.BlockId', '@item.BlockValue',-1,this)">禁用</button>48             }49             else50             {51               <button type="button" class='btn btn-warning' onclick="UpdateStatus('@item.BlockId','@item.BlockValue',1,this)">启用</button>52             }53             <button type="button" class="btn btn-danger" onclick="DeleteEntity('@item.BlockId','@item.BlockValue',this)">删除</button>54           </td>55         </tr>56       }57   </tbody>58 </table>59 @Html.Pager(Model.Pager)

View

 

首先在页面顶部声明 model 模型

 @model PagedListModel<Models.BlockEntity>

在页面上遍历数据

 @foreach (Models.BlockEntity item in Model.Data)

在需要添加分页信息的地方使用 HtmlHelper 的 Pager 扩展方法

 @Html.Pager(Model.Pager)