學(xué)習(xí)制作MVC4分頁(yè)控件（上）

更新時(shí)間：2016年08月23日 11:36:35 作者：洞庭夕照

這篇文章主要教大家學(xué)習(xí)制作MVC4分頁(yè)控件，自己動(dòng)手編寫(xiě)HtmlHelper-Pager分頁(yè)控件，感興趣的小伙伴們可以參考一下

瀏覽欄目下內(nèi)容的時(shí)候肯定要用到分頁(yè)，MVC4下沒(méi)有帶分頁(yè)控件，那么就自己寫(xiě)一個(gè)HtmlHelper-Pager。寫(xiě)之前看了一些大神的分頁(yè)控件，啟發(fā)很大。先設(shè)想一下自己的分頁(yè)控件

分頁(yè)控件分普通分頁(yè)（Pager）和Ajax分頁(yè)（PagerAjax）兩塊。兩塊的顯示相同，如圖：

各部說(shuō)明：

在開(kāi)始寫(xiě)之前還要先有兩個(gè)類(lèi)：一個(gè)是分頁(yè)設(shè)置類(lèi)，一個(gè)是分頁(yè)數(shù)據(jù)類(lèi)。

分頁(yè)的設(shè)置類(lèi)包含了常用的分頁(yè)參數(shù)，是為了方便保存到數(shù)據(jù)庫(kù)中，可以直接在欄目中設(shè)置該欄目下每頁(yè)顯示的記錄數(shù)；記錄的計(jì)量單位：是“條”還是“篇”；記錄的名稱(chēng)是“新聞”、“文章”還是“教程”等。

分頁(yè)設(shè)置模型

分頁(yè)數(shù)據(jù)類(lèi)
用來(lái)提供記錄列表和分頁(yè)設(shè)置PagerData<T> 繼承自 List<T>

想好直接之后，開(kāi)始設(shè)置基礎(chǔ)函數(shù)

1、pager的基礎(chǔ)函數(shù)

復(fù)制代碼代碼如下:

Pager(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput) 

參數(shù)說(shuō)明：
actionName-動(dòng)作名稱(chēng)；
controllerName-控制器名稱(chēng)；
routeValues-路由參數(shù)；
pageConfig-分頁(yè)配置；
ctrlId-分頁(yè)控件Id；
cssClass-分頁(yè)控件css類(lèi)名；
digitalLinkNum-顯示的數(shù)字鏈接個(gè)數(shù)；
showTotalRecord-顯示總記錄數(shù)；
showCurrentPage-顯示當(dāng)前頁(yè)；
showTotalPage-顯示總頁(yè)數(shù)；
showSelect-顯示頁(yè)碼下拉框；
showInput-顯示頁(yè)碼輸入框。

重載可能用到參數(shù)
currentPage-當(dāng)前頁(yè)；
totalPage-總頁(yè)數(shù)；
pageSize-每頁(yè)顯示記錄數(shù)；
totalRecord-總記錄數(shù)；
recordUnit-記錄單位；
recordName-記錄名稱(chēng)；

2、PagerAjax基礎(chǔ)函數(shù)

復(fù)制代碼代碼如下:

public static MvcHtmlString PagerAjax(this HtmlHelper htmlHelper, string ctnrId, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput) 

參數(shù)說(shuō)明：
ctnrId-內(nèi)容容器Id。用于包裹ajax返回html的容器控件id
其他參數(shù)與1、pager相同
==========================
基本的東西都準(zhǔn)備好了，寫(xiě)代碼就快了。

右鍵點(diǎn)擊Extensions文件夾，添加類(lèi)PagerExtensions

命名空間改為System.Web.Mvc，在該命名空間下先寫(xiě)PagerConfig，再寫(xiě)PagerData，代碼都很簡(jiǎn)單。

namespace System.Web.Mvc
{
  /// <summary>
  /// 分頁(yè)配置
  /// </summary>
  public class PagerConfig
  {
    [Key]
    public int PagerConfigId { get; set; }
    /// <summary>
    /// 當(dāng)前頁(yè)
    /// </summary>
    [NotMapped]
    public int CurrentPage { get; set; }
    /// <summary>
    /// 每頁(yè)記錄數(shù)
    /// </summary>
    [Display(Name = "每頁(yè)記錄數(shù)", Description = "每頁(yè)顯示的記錄數(shù)。")]
    [Required(ErrorMessage="×")]
    public int PageSize { get; set; }
    /// <summary>
    /// 總頁(yè)數(shù)
    /// </summary>
    [NotMapped]
    public int TotalPage { get { return (int)Math.Ceiling(TotalRecord / (double)PageSize); } }
    /// <summary>
    /// 總記錄數(shù)
    /// </summary>
    [NotMapped]
    public int TotalRecord { get; set; }
    /// <summary>
    /// 記錄單位
    /// </summary>
    [Display(Name="記錄單位",Description="記錄的數(shù)量單位。如文章為“篇”；新聞為“條”")]
    [Required(ErrorMessage = "×")]
    public string RecordUnit { get; set; }
    /// <summary>
    /// 記錄名稱(chēng)
    /// </summary>
    [Display(Name = "記錄名稱(chēng)", Description = "記錄的名稱(chēng)。如“文章”、“新聞”、“教程”等")]
    [Required(ErrorMessage = "×")]
    public string RecordName { get; set; }

    public PagerConfig()
    {
      CurrentPage = 1;
      PageSize = 20;
      RecordUnit = "條";
      RecordName = "記錄";
    }
  }

  /// <summary>
  /// 分頁(yè)數(shù)據(jù)
  /// </summary>
  public class PagerData<T> : List<T>
  {
    public PagerData(List<T> list, PagerConfig pagerConfig)
    {
      this.AddRange(list);
      Config = pagerConfig;
    }
    public PagerData(List<T> list, int currentPage, int pageSize, int totalRecord)
    {
      this.AddRange(list);
      Config.CurrentPage = currentPage;
      Config.PageSize = pageSize;
      Config.TotalRecord = totalRecord;
    }
    public PagerData(List<T> list, int currentPage, int pageSize, int totalRecord, string recordUnit, string recordName)
    {
      this.AddRange(list);
      Config.CurrentPage = currentPage;
      Config.PageSize = pageSize;
      Config.TotalRecord = totalRecord;
      Config.RecordUnit = recordUnit;
      Config.RecordName = recordName;
    }

    public PagerConfig Config { get; set; }
  }
}

下面到了關(guān)鍵部分：
在文件PagerExtensions.cs底部再添加一個(gè)命名空間namespace System.Web.Mvc.Html。
在里面添加靜態(tài)類(lèi)public static class PagerExtensions。
在類(lèi)中間添加函數(shù)public static MvcHtmlString Pager(……)
代碼也很容易就是用UrlHelper.Action生成鏈接的地址，再創(chuàng)建一個(gè)StringBuilder _strBuilder，不停的向里面附加html代碼，最后使用return MvcHtmlString.Create(_strBuilder.ToString());返回MvcHtmlString。就是寫(xiě)的太亂啦

public static MvcHtmlString Pager(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)
    {
      UrlHelper _url = new UrlHelper(htmlHelper.ViewContext.RequestContext);
      StringBuilder _strBuilder = new StringBuilder("<div id=\"" + ctrlId + "\" class=\"" + cssClass + "\">");
      if (showTotalRecord) _strBuilder.Append("共" + pageConfig.TotalRecord + pageConfig.RecordUnit + pageConfig.RecordName + " ");
      if (showCurrentPage) _strBuilder.Append("每頁(yè)" + pageConfig.PageSize + pageConfig.RecordUnit + " ");
      if(showTotalPage) _strBuilder.Append("第" + pageConfig.CurrentPage + "頁(yè)/共" + pageConfig.TotalPage + "頁(yè) ");
      //首頁(yè)鏈接
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">首頁(yè)</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">首頁(yè)</span>");
      //上一頁(yè)
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = pageConfig.CurrentPage - 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">上一頁(yè)</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">上一頁(yè)</span>");
      //數(shù)字導(dǎo)航開(kāi)始
      int _startPage, _endPage;
      //總頁(yè)數(shù)少于要顯示的頁(yè)數(shù)，頁(yè)碼全部顯示
      if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
      else//顯示指定數(shù)量的頁(yè)碼
      {
        int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
        if (pageConfig.CurrentPage > _forward)//起始頁(yè)碼大于1
        {
          _endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
          if (_endPage > pageConfig.TotalPage)//結(jié)束頁(yè)碼大于總頁(yè)碼結(jié)束頁(yè)碼為最后一頁(yè)
          {
            _startPage = pageConfig.TotalPage - digitalLinkNum;
            _endPage = pageConfig.TotalPage;

          }
          else _startPage = pageConfig.CurrentPage - _forward;
        }
        else//起始頁(yè)碼從1開(kāi)始
        {
          _startPage = 1;
          _endPage = digitalLinkNum;
        }
      }
      //向上…
      if (_startPage > 1)
      {
        routeValues["page"] = _startPage - 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      //數(shù)字
      for (int i = _startPage; i <= _endPage; i++)
      {
        if (i != pageConfig.CurrentPage)
        {
          routeValues["page"] = i;
          _strBuilder.Append("<a class=\"linknum\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">" + i.ToString() + "</a>");
        }
        else
        {
          _strBuilder.Append("<span class='currentnum'>" + i.ToString() + "</span>");
        }
      }
      //向下…
      if (_endPage < pageConfig.TotalPage)
      {
        routeValues["page"] = _endPage + 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      ////數(shù)字導(dǎo)航結(jié)束
      //下一頁(yè)和尾頁(yè)
      if (pageConfig.CurrentPage < pageConfig.TotalPage)
      {
        routeValues["page"] = pageConfig.CurrentPage + 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">下一頁(yè)</a>");
        routeValues["page"] = pageConfig.TotalPage;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">尾頁(yè)</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">下一頁(yè)</span><span class=\"btn\">尾頁(yè)</span>");
      //顯示頁(yè)碼下拉框
      if (showSelect)
      {
        routeValues["page"] = "-nspageselecturl-";
        _strBuilder.Append(" 跳轉(zhuǎn)到第<select id=\"nspagerselect\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\">");
        for (int i = 1; i <= pageConfig.TotalPage; i++)
        {
          if (i == pageConfig.CurrentPage) _strBuilder.Append("<option selected=\"selected\" value=\"" + i + "\">" + i + "</option>");
          else _strBuilder.Append("<option value=\"" + i + "\">" + i + "</option>");
        }
        _strBuilder.Append("</select>頁(yè)");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagerselect\").change(function () { location.href = $(\"#" + ctrlId + " #nspagerselect\").attr(\"data-url\").replace(\"-nspageselecturl-\", $(\"#" + ctrlId + " #nspagerselect\").val());});</script>");
      }
      //顯示頁(yè)碼輸入框
      if (showInput)
      {
        routeValues["page"] = "-nspagenumurl-";
        _strBuilder.Append("轉(zhuǎn)到第<input id=\"nspagernum\" type=\"text\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\" />頁(yè)");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagernum\").keydown(function (event) {if (event.keyCode == 13) location.href = $(\"#" + ctrlId + " #nspagernum\").attr(\"data-url\").replace(\"-nspagenumurl-\", $(\"#" + ctrlId + " #nspagernum\").val()); });</script>");
      }
      _strBuilder.Append("</div>");
      return MvcHtmlString.Create(_strBuilder.ToString());
    }

PagerAjax跟Pager基本一樣。不同點(diǎn)是在點(diǎn)擊鏈接的時(shí)候Pager是轉(zhuǎn)到相應(yīng)頁(yè)面，PagerAjax是在點(diǎn)擊paer內(nèi)的鏈接的時(shí)候利用jquery Post獲取鏈接指定頁(yè)面的html代碼替換內(nèi)容包裹容器的html。實(shí)際上就是這句jquery語(yǔ)句

復(fù)制代碼代碼如下:

<script type="text/javascript">$("#ctrlId a").click(function () {$.post($(this).attr("href"), function (data) {$("#ctnrId").html(data);});return false; });</script> 

PagerAjax的整個(gè)內(nèi)容

public static MvcHtmlString PagerAjax(this HtmlHelper htmlHelper, string ctnrId, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)
    {
      UrlHelper _url = new UrlHelper(htmlHelper.ViewContext.RequestContext);
      StringBuilder _strBuilder = new StringBuilder("<div id=\"" + ctrlId + "\" class=\"" + cssClass + "\">");
      if (showTotalRecord) _strBuilder.Append("共" + pageConfig.TotalRecord + pageConfig.RecordUnit + pageConfig.RecordName + " ");
      if (showCurrentPage) _strBuilder.Append("每頁(yè)" + pageConfig.PageSize + pageConfig.RecordUnit + " ");
      if (showTotalPage) _strBuilder.Append("第" + pageConfig.CurrentPage + "頁(yè)/共" + pageConfig.TotalPage + "頁(yè) ");
      //首頁(yè)鏈接
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">首頁(yè)</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">首頁(yè)</span>");
      //上一頁(yè)
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = pageConfig.CurrentPage - 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">上一頁(yè)</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">上一頁(yè)</span>");
      //數(shù)字導(dǎo)航開(kāi)始
      int _startPage, _endPage;
      //總頁(yè)數(shù)少于要顯示的頁(yè)數(shù)，頁(yè)碼全部顯示
      if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
      else//顯示指定數(shù)量的頁(yè)碼
      {
        int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
        if (pageConfig.CurrentPage > _forward)//起始頁(yè)碼大于1
        {
          _endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
          if (_endPage > pageConfig.TotalPage)//結(jié)束頁(yè)碼大于總頁(yè)碼結(jié)束頁(yè)碼為最后一頁(yè)
          {
            _startPage = pageConfig.TotalPage - digitalLinkNum;
            _endPage = pageConfig.TotalPage;

          }
          else _startPage = pageConfig.CurrentPage - _forward;
        }
        else//起始頁(yè)碼從1開(kāi)始
        {
          _startPage = 1;
          _endPage = digitalLinkNum;
        }
      }
      //向上…
      if (_startPage > 1)
      {
        routeValues["page"] = _startPage - 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      //數(shù)字
      for (int i = _startPage; i <= _endPage; i++)
      {
        if (i != pageConfig.CurrentPage)
        {
          routeValues["page"] = i;
          _strBuilder.Append("<a class=\"linknum\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">" + i.ToString() + "</a>");
        }
        else
        {
          _strBuilder.Append("<span class='currentnum'>" + i.ToString() + "</span>");
        }
      }
      //向下…
      if (_endPage < pageConfig.TotalPage)
      {
        routeValues["page"] = _endPage + 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      ////數(shù)字導(dǎo)航結(jié)束
      //下一頁(yè)和尾頁(yè)
      if (pageConfig.CurrentPage < pageConfig.TotalPage)
      {
        routeValues["page"] = pageConfig.CurrentPage + 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">下一頁(yè)</a>");
        routeValues["page"] = pageConfig.TotalPage;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">尾頁(yè)</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">下一頁(yè)</span><span class=\"btn\">尾頁(yè)</span>");
      //顯示頁(yè)碼下拉框
      if (showSelect)
      {
        routeValues["page"] = "-nspageselecturl-";
        _strBuilder.Append(" 跳轉(zhuǎn)到第<select id=\"nspagerselect\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\">");
        for (int i = 1; i <= pageConfig.TotalPage; i++)
        {
          if (i == pageConfig.CurrentPage) _strBuilder.Append("<option selected=\"selected\" value=\"" + i + "\">" + i + "</option>");
          else _strBuilder.Append("<option value=\"" + i + "\">" + i + "</option>");
        }
        _strBuilder.Append("</select>頁(yè)");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagerselect\").change(function () {$.post($(\"#" + ctrlId + " #nspagerselect\").attr(\"data-url\").replace(\"-nspageselecturl-\", $(\"#" + ctrlId + " #nspagerselect\").val()), function (data) {$(\"#" + ctnrId + "\").html(data);});});</script>");
      }
      //顯示頁(yè)碼輸入框
      if (showInput)
      {
        routeValues["page"] = "-nspagenumurl-";
        _strBuilder.Append(" 轉(zhuǎn)到第<input id=\"nspagernum\" type=\"text\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\" />頁(yè)");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagernum\").keydown(function (event) {if (event.keyCode == 13) { $.post($(\"#" + ctrlId + " #nspagernum\").attr(\"data-url\").replace(\"-nspagenumurl-\", $(\"#" + ctrlId + " #nspagernum\").val()), function (data) {$(\"#" + ctnrId + "\").html(data);}); } });</script>");
      }
      _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " a\").click(function () {$.post($(this).attr(\"href\"), function (data) {$(\"#" + ctnrId + "\").html(data);});return false; });</script>");
      _strBuilder.Append("</div>");
      return MvcHtmlString.Create(_strBuilder.ToString());
    }

完工

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: