快捷導(dǎo)航

MVC HtmlHelper擴(kuò)展類(PagingHelper)實現(xiàn)分頁功能

更新時間：2017年05月06日 14:59:14 作者：長毛象

這篇文章主要為大家詳細(xì)介紹了MVC HtmlHelper擴(kuò)展，實現(xiàn)分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

MVC HtmlHelper擴(kuò)展類PagingHelper實現(xiàn)分頁功能，供大家參考，具體內(nèi)容如下

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace HtmlHelperMvc.Models
{
 /// <summary>
 /// 分頁類如果一個頁面顯示兩個列表只需要復(fù)制該類到項目中重命名一個就可以
 /// </summary>
 public static class PagingHelper
 {
  #region 屬性Property
  /// <summary>
  /// 當(dāng)前頁碼
  /// </summary>
  private static int? _currentPage = null;
  /// <summary>
  /// 當(dāng)前頁碼
  /// </summary>
  public static int CurrentPage
  {
   get
   {
    return _currentPage ?? 1;
   }
   set
   {
    _currentPage = value;
   }
  }
  /// <summary>
  /// 每頁記錄條數(shù)
  /// </summary>
  private static int? _pageSize = null;
  /// <summary>
  /// 每頁記錄條數(shù)
  /// </summary>
  public static int PageSize
  {
   get
   {
    return _pageSize ?? 15;
   }
   set
   {
    _pageSize = value;
   }
  }
  /// <summary>
  /// 是否顯示上一頁
  /// </summary>
  public static bool HasPreviousPage
  {
   get
   {
    return (CurrentPage > 1);
   }
  }
  /// <summary>
  /// 是否顯示下一頁
  /// </summary>
  public static bool HasNextPage
  {
   get
   {
    return (CurrentPage < TotalPages);
   }
  }
  /// <summary>
  /// 當(dāng)前頁:
  /// </summary>
  public static string CurrentPageDisplayName { get; set; }
  /// <summary>
  /// 每頁顯示:
  /// </summary>
  public static string PageSizeDisplayName { get; set; }
  public static string FirstDisplayName { get; set; }
  public static string PreDisplayName { get; set; }
  public static string NextDisplayName { get; set; }
  public static string LastDisplayName { get; set; }
  public static string TotalCountDisplayName { get; set; }
  public static string TotalPagesDisplayName { get; set; }
  /// <summary>
  /// 總條數(shù)
  /// </summary>
  public static int TotalCount
  {
   get;
   set;
  }
  public static int TotalPages
  {
   get
   {
    return (int)Math.Ceiling(TotalCount / (double)PageSize);
    //return (TotalCount % PageSize == 0 ? TotalCount / PageSize : TotalCount / PageSize + 1);
   }
  }
  /// <summary>
  /// 設(shè)置分頁url eg:/Admin/Product/Index
  /// </summary>
  public static string PagingUrl
  {
   get;
   set;
  }
  /// <summary>
  /// 默認(rèn)page,設(shè)置分頁參數(shù)名 eg:/Admin/Product/Index?PagingParamName=1
  /// </summary>
  public static string PagingParamName
  {
   get;
   set;
  }
  #endregion
  #region Paging String
  /// <summary>
  /// MVC分頁 如果用jquery分頁只需要class不需要href,用以下實現(xiàn):
  /// $(".class值").live("click", function () {
  /// var page = $(this).attr("pagingParamName值");
  /// $("#order").html("").load("/Customer/Order?page="+page);
  /// });live自動給遍歷增加事件
  /// </summary>
  /// <param name="html"></param>
  /// <param name="htmlAttributes">new {@class="grey",pagingParamName="page",href="/Admin/Product/Index" rel="external nofollow" } pagingParamName默認(rèn)page,匿名類添加控件屬性</param>
  /// <returns></returns>
  public static MvcHtmlString Paging(this System.Web.Mvc.HtmlHelper html, object htmlAttributes)
  {
   RouteValueDictionary values = new RouteValueDictionary(htmlAttributes);
   #region 屬性賦值
   if (values["href"] != null)
   {
    PagingUrl = values["href"].ToString();
   }
   if (values["pagingParamName"] != null)
   {
    PagingParamName = values["pagingParamName"].ToString();
    values.Remove("pagingParamName");
   }
   else
   {
    PagingParamName = "page";
   }
   #endregion
   #region 分頁最外層div/span
   TagBuilder builder = new TagBuilder("div");//span
   //創(chuàng)建Id,注意要先設(shè)置IdAttributeDotReplacement屬性后再執(zhí)行GenerateId方法. 
   //builder.IdAttributeDotReplacement = "_";
   //builder.GenerateId(id);
   //builder.AddCssClass("");
   //builder.MergeAttributes(values);
   builder.InnerHtml = PagingBuilder(values);
   #endregion
   return MvcHtmlString.Create(builder.ToString(TagRenderMode.Normal));//解決直接顯示html標(biāo)記
  }
  private static string PagingBuilder(RouteValueDictionary values)
  {
   #region 條件搜索時包括其他參數(shù)
   StringBuilder urlParameter = new StringBuilder();
   NameValueCollection collection = HttpContext.Current.Request.QueryString;
   string[] keys = collection.AllKeys;
   for (int i = 0; i < keys.Length; i++)
   {
    if (keys[i].ToLower() != "page")
    {
     urlParameter.AppendFormat("&{0}={1}", keys[i], collection[keys[i]]);
    }
   }
   #endregion
   //CurrentPage = Convert.ToInt32(HttpContext.Current.Request.QueryString["page"] ?? "0");
   StringBuilder sb = new StringBuilder();
   #region 分頁統(tǒng)計
   sb.AppendFormat("Total &nbsp;{0} &nbsp; Records Page &nbsp;{1} of &nbsp;{2} &nbsp; ", TotalCount, CurrentPage, TotalPages);
   #endregion
   #region 首頁 上一頁
   sb.AppendFormat(TagBuilder(values, 1, " First"));
   //sb.AppendFormat("<a href={0}?page=1{1}>First</a>&nbsp;",url,urlParameter);
   if (HasPreviousPage)
   {
    sb.AppendFormat(TagBuilder(values, CurrentPage - 1, " Prev "));
    //sb.AppendFormat("<a href={0}?page={1}{2}>Prev</a>&nbsp;", url, CurrentPage - 1, urlParameter);
   }
   #endregion
   #region 分頁邏輯
   if (TotalPages > 10)
   {
    if ((CurrentPage + 5) < TotalPages)
    {
     if (CurrentPage > 5)
     {
      for (int i = CurrentPage - 5; i <= CurrentPage + 5; i++)
      {
       sb.Append(TagBuilder(values, i, i.ToString()));
      }
     }
     else
     {
      for (int i = 1; i <= 10; i++)
      {
       sb.Append(TagBuilder(values, i, i.ToString()));
      }
     }
     sb.Append("...&nbsp;");
    }
    else
    {
     for (int i = CurrentPage - 10; i <= TotalPages; i++)
     {
      sb.Append(TagBuilder(values, i, i.ToString()));
     }
    }
   }
   else
   {
    for (int i = 1; i <= TotalPages; i++)
    {
     sb.Append("&nbsp;" + TagBuilder(values, i, i.ToString()) + "&nbsp");
    }
   }
   #endregion
   #region 下一頁 末頁
   if (HasNextPage)
   {
    sb.AppendFormat(TagBuilder(values, CurrentPage + 1, "Next"));
    //sb.AppendFormat("<a href={0}?page={1}{2}>Next</a>&nbsp;", url, CurrentPage + 1, urlParameter);
   }
   sb.AppendFormat(TagBuilder(values, TotalPages, "Last"));
   //sb.AppendFormat("<a href={0}?page={1}{2}>Last</a>",url,TotalPages,urlParameter);
   #endregion
   return sb.ToString();
  }
  private static string TagBuilder(RouteValueDictionary values, int i, string innerText)
  {
   values[PagingParamName] = i;
   TagBuilder tag = new TagBuilder("a");
   if (PagingUrl != null)
   {
    values["href"] = PagingUrl + "?" + PagingParamName + "= " + i + "&nbsp;&nbsp;&nbsp;";
   }
   if (CurrentPage == i && innerText != " First" && innerText != " Last")
   {
    values["id"] = "on";
   }
   else
   {
    tag.Attributes["id"] = "";
   }
   tag.MergeAttributes(values);
   tag.SetInnerText(innerText);
   return tag.ToString();
  }
  #endregion
 }
}

后臺Controller代碼

//
// GET: /Home/

public ActionResult Index(int? page)
{
 page = page ?? 1;
 PagingHelper.CurrentPage = Convert.ToInt32(page);
 PagingHelper.PageSize = 20;

 //{獲取數(shù)據(jù)集的中條數(shù)，以及分頁的數(shù)據(jù)集}

 PagingHelper.TotalCount = 2000;
 return View();
}

前臺頁面代碼

@{
 ViewBag.Title = "Index";
}
@using HtmlHelperMvc.Models;
<h2>Index</h2>
<hr />
<style type="text/css">
 #on
 {
  color: #FFF;
  background-color: #337AB7;
  border-color: #337AB7;
 }

 .pagination a
 {
  margin-right: 3px;
  padding: 5px 10px;
  font-size: 12px;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  display: inline-block;
  border-radius: 3px;
 }

 a
 {
  color: #337ab7;
  text-decoration: none;
 }

 a
 {
  background-color: transparent;
 }

 *
 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
</style>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
 $(function () {
  $(".pagination .active").live("click", function () {
   $("#page").val($(this).attr("page"));
   $("#form_Submit").submit();
  });
 });
</script>
<form id="form_Submit" action="/Home/Index" method="post">
 <div class="fix">
  <div class="page">
   <div class="pagination pagination-sm pull-right" id="pageDiv" style="margin: 0px 0;">
    <input type="hidden" id="page" name="page" value="@PagingHelper.CurrentPage" />
    @Html.Paging(new { @class = "active" })
   </div>
  </div>
 </div>
</form>

最終效果圖：