ASP.NET MVC3自定义分页Helper

首页添加一个Helper的类(命名空间为System.Web.Mvc;)。    

  
复制代码
 1 public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount)
 2         {
 3             var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;
 4             pageSize = pageSize == 0 ? 3 : pageSize;
 5             var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
 6             var output = new StringBuilder();
 7             if (totalPages > 1)
 8             {                
 9                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize);                
10                 if (currentPage > 1)
11                 {//处理上一页的连接
12                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - 1, pageSize);
13                 }                
14 
15                 output.Append(" ");
16                 int currint = 5;
17                 for (int i = 0; i <= 10; i++)
18                 {//一共最多显示10个页码,前面5个,后面5个
19                     if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
20                     {
21                         if (currint == i)
22                         {//当前页处理                            
23                             output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
24                         }
25                         else
26                         {//一般页处理
27                             output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
28                         }
29                     }
30                     output.Append(" ");
31                 }
32                 if (currentPage < totalPages)
33                 {//处理下一页的链接
34                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + 1, pageSize);
35                 }
36                 
37                 output.Append(" ");
38                 if (currentPage != totalPages)
39                 {
40                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize);
41                 }
42                 output.Append(" ");
43             }
44             output.AppendFormat("<label>第{0}页 / 共{1}页</label>", currentPage, totalPages);//这个统计加不加都行
45 
46             return new HtmlString(output.ToString());
47         }
复制代码

  其次再添加两个公共类:PagerInfo与PageQuery。PagerInfo类用于放置分页相关内容。PageQuery则用于放置PagerInfo及要显示的数据信息。

  
复制代码
1 public class PagerInfo
2     {
3         public int RecordCount { get; set; }
4 
5         public int CurrentPageIndex { get; set; }
6 
7         public int PageSize { get; set; }
8     }
复制代码
  
复制代码
 1  public class PagerQuery<TPager, TEntityList>
 2     {
 3         public PagerQuery(TPager pager, TEntityList entityList)
 4         {
 5             this.Pager = pager;
 6             this.EntityList = entityList;
 7         }
 8         public TPager Pager { get; set; }
 9         public TEntityList EntityList { get; set; }
10     }
复制代码

  然后在Controller里面添加Action

  
复制代码
 1 public ActionResult Index(int? pageSize,int? pageIndex)
 2         {
 3             int pageIndex1 = pageIndex ?? 1;
 4             int pageSize1 = pageSize ?? 5;
 5             int count=0;
 6             //从数据库在取得数据,并返回总记录数
 7             var temp = newsSer.LoadPageEntities(c => true, c => c.id, false, pageSize1, pageIndex1, out count);
 8             PagerInfo pager = new PagerInfo();
 9             pager.CurrentPageIndex = pageIndex1;
10             pager.PageSize = pageSize1;
11             pager.RecordCount = count;
12             PagerQuery<PagerInfo,IQueryable<news>> query = new PagerQuery<PagerInfo,IQueryable<news>>(pager,temp);
13             return View(query);
14         }
复制代码

  最要在View里的部分代码如下:

  @model PagerQuery<PagerInfo, IQueryable<_6_16DFAZ_Models.news>>

  最后在body里面要显示的数据如下:  

复制代码
 1  <tbody>
 2                         @foreach (var item in Model.EntityList)
 3                         { 
 4                             <tr>
 5                                 <td class="checkBox">
 6                                     <input name="ids[]" type="checkbox" value="" />
 7                                 </td>
 8                                 <td>
 9                                     @item.author
10                                 </td>
11                                 <td>
12                                     @item.title
13                                 </td>
14                                 <td>
15                                     @item.ctime
16                                 </td>
17                                 <td>
18                                     @Html.ActionLink("编辑", "Edit", new { id = item.id }) |
19                                     @Html.ActionLink("删除", "Delete", new { id = item.id })
20                                 </td>
21                             </tr>
22                         }
23                         @*分页*@
24                         <tr class="">
25                             <td colspan="5" align="center" class="paginator">
26                                 <span>
27                                     @Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount)
28                                 </span>
29                             </td>
30                         </tr>
31                     </tbody>
复制代码

  ok.分页效果已经实现。为了美观,再添加一些样式。  

  
复制代码
 1 .paginator
 2 {
 3     font: 12px Arial, Helvetica, sans-serif;
 4     padding: 10px 20px 10px 0;
 5     margin: 0px auto;
 6 }
 7 
 8 .paginator a
 9 {
10     border: solid 1px #ccc;
11     color: #0063dc;
12     cursor: pointer;
13     text-decoration: none;
14 }
15 
16 .paginator a:visited
17 {
18     padding: 1px 6px;
19     border: solid 1px #ddd;
20     background: #fff;
21     text-decoration: none;
22 }
23 
24 .paginator .cpb
25 {
26     border: 1px solid #F50;
27     font-weight: 700;
28     color: #F50;
29     background-color: #ffeee5;
30 }
31 
32 .paginator a:hover
33 {
34     border: solid 1px #F50;
35     color: #f60;
36     text-decoration: none;
37 }
38 
39 .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover
40 {
41     float: left;
42     height: 16px;
43     line-height: 16px;
44     min-width: 10px;
45     _width: 10px;
46     margin-right: 5px;
47     text-align: center;
48     white-space: nowrap;
49     font-size: 12px;
50     font-family: Arial,SimSun;
51     padding: 0 3px;
52 }
53 
54 .paginator label
55 {
56     display:block;    
57     float:left;    
58 }
复制代码

  最终的显示图如下:

  


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值