MVC3 分页Helper

　　利用mvc3实现分页效果。效果图如下：

　　

　　直接拷代码：

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

　　

 public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount)
         {
             var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;
             pageSize = pageSize ==  ?  : pageSize;
             var totalPages = Math.Max((totalCount + pageSize - ) / pageSize, ); //总页数
             var output = new StringBuilder();
             if (totalPages > )
             {
                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize);
                 if (currentPage > )
                 {//处理上一页的连接
                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - , pageSize);
                 }                

                 output.Append(" ");
                 int currint = ;
                 for (int i = ; i <= ; i++)
                 {//一共最多显示10个页码，前面5个，后面5个
                     if ((currentPage + i - currint) >=  && (currentPage + i - currint) <= totalPages)
                     {
                         if (currint == i)
                         {//当前页处理
                             output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
                         }
                         else
                         {//一般页处理
                             output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
                         }
                     }
                     output.Append(" ");
                 }
                 if (currentPage < totalPages)
                 {//处理下一页的链接
                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + , pageSize);
                 }

                 output.Append(" ");
                 if (currentPage != totalPages)
                 {
                     output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize);
                 }
                 output.Append(" ");
             }
             output.AppendFormat("<label>第{0}页 / 共{1}页</label>", currentPage, totalPages);//这个统计加不加都行

             return new HtmlString(output.ToString());
         }

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

　　

 public class PagerInfo
     {
         public int RecordCount { get; set; }

         public int CurrentPageIndex { get; set; }

         public int PageSize { get; set; }
     }

　　

  public class PagerQuery<TPager, TEntityList>
     {
         public PagerQuery(TPager pager, TEntityList entityList)
         {
             this.Pager = pager;
             this.EntityList = entityList;
         }
         public TPager Pager { get; set; }
         public TEntityList EntityList { get; set; }
     }

　　然后在Controller里面添加Action

　　

 public ActionResult Index(int? pageSize,int? pageIndex)
         {
             int pageIndex1 = pageIndex ?? ;
             int pageSize1 = pageSize ?? ;
             int count=;
             //从数据库在取得数据，并返回总记录数
             var temp = newsSer.LoadPageEntities(c => true, c => c.id, false, pageSize1, pageIndex1, out count);
             PagerInfo pager = new PagerInfo();
             pager.CurrentPageIndex = pageIndex1;
             pager.PageSize = pageSize1;
             pager.RecordCount = count;
             PagerQuery<PagerInfo,IQueryable<news>> query = new PagerQuery<PagerInfo,IQueryable<news>>(pager,temp);
             return View(query);
         }

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

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

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

  <tbody>
                         @foreach (var item in Model.EntityList)
                         {
                             <tr>
                                 <td class="checkBox">
                                     <input name="ids[]" type="checkbox" value="" />
                                 </td>
                                 <td>
                                     @item.author
                                 </td>
                                 <td>
                                     @item.title
                                 </td>
                                 <td>
                                     @item.ctime
                                 </td>
                                 <td>
                                     @Html.ActionLink("编辑", "Edit", new { id = item.id }) |
                                     @Html.ActionLink("删除", "Delete", new { id = item.id })
                                 </td>
                             </tr>
                         }
                         @*分页*@
                         <tr class="">
                             <td colspan="5" align="center" class="paginator">
                                 <span>
                                     @Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount)
                                 </span>
                             </td>
                         </tr>
                     </tbody>

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

　　

 .paginator
 {
     font: 12px Arial, Helvetica, sans-serif;
     padding: 10px 20px 10px 0;
     margin: 0px auto;
 }

 .paginator a
 {
     border: solid 1px #ccc;
     color: #0063dc;
     cursor: pointer;
     text-decoration: none;
 }

 .paginator a:visited
 {
     padding: 1px 6px;
     border: solid 1px #ddd;
     background: #fff;
     text-decoration: none;
 }

 .paginator .cpb
 {
     border: 1px solid #F50;
     font-weight:;
     color: #F50;
     background-color: #ffeee5;
 }

 .paginator a:hover
 {
     border: solid 1px #F50;
     color: #f60;
     text-decoration: none;
 }

 .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover
 {
     float: left;
     height: 16px;
     line-height: 16px;
     min-width: 10px;
     _width: 10px;
     margin-right: 5px;
     text-align: center;
     white-space: nowrap;
     font-size: 12px;
     font-family: Arial,SimSun;
     padding: 0 3px;
 }

 .paginator label
 {
     display:block;
     float:left;
 }

　　最终的显示图如下：

　

　　大功告成！