如何制作MVC4分頁控件-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“如何制作MVC4分頁控件”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何制作MVC4分頁控件”這篇文章吧。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了剛察免費建站歡迎大家使用！

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

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

如何制作MVC4分頁控件

各部說明：

如何制作MVC4分頁控件

在開始寫之前還要先有兩個類：一個是分頁設(shè)置類，一個是分頁數(shù)據(jù)類。

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

分頁設(shè)置模型

如何制作MVC4分頁控件

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

如何制作MVC4分頁控件

想好直接之后，開始設(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ù)說明：
actionName-動作名稱；
controllerName-控制器名稱；
routeValues-路由參數(shù)；
pageConfig-分頁配置；
ctrlId-分頁控件Id；
cssClass-分頁控件css類名；
digitalLinkNum-顯示的數(shù)字鏈接個數(shù)；
showTotalRecord-顯示總記錄數(shù)；
showCurrentPage-顯示當(dāng)前頁；
showTotalPage-顯示總頁數(shù)；
showSelect-顯示頁碼下拉框；
showInput-顯示頁碼輸入框。

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

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

右鍵點擊Extensions文件夾，添加類PagerExtensions

命名空間改為System.Web.Mvc，在該命名空間下先寫PagerConfig，再寫PagerData，代碼都很簡單。

namespace System.Web.Mvc
{
  /// <summary>
  /// 分頁配置
  /// </summary>
  public class PagerConfig
  {
    [Key]
    public int PagerConfigId { get; set; }
    /// <summary>
    /// 當(dāng)前頁
    /// </summary>
    [NotMapped]
    public int CurrentPage { get; set; }
    /// <summary>
    /// 每頁記錄數(shù)
    /// </summary>
    [Display(Name = "每頁記錄數(shù)", Description = "每頁顯示的記錄數(shù)。")]
    [Required(ErrorMessage="×")]
    public int PageSize { get; set; }
    /// <summary>
    /// 總頁數(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>
    /// 記錄名稱
    /// </summary>
    [Display(Name = "記錄名稱", Description = "記錄的名稱。如“文章”、“新聞”、“教程”等")]
    [Required(ErrorMessage = "×")]
    public string RecordName { get; set; }

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

  /// <summary>
  /// 分頁數(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底部再添加一個命名空間namespace System.Web.Mvc.Html。
在里面添加靜態(tài)類public static class PagerExtensions。
在類中間添加函數(shù)public static MvcHtmlString Pager(……)
代碼也很容易就是用UrlHelper.Action生成鏈接的地址，再創(chuàng)建一個StringBuilder _strBuilder，不停的向里面附加html代碼，最后使用return MvcHtmlString.Create(_strBuilder.ToString());返回MvcHtmlString。就是寫的太亂啦

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("每頁" + pageConfig.PageSize + pageConfig.RecordUnit + " ");
      if(showTotalPage) _strBuilder.Append("第" + pageConfig.CurrentPage + "頁/共" + pageConfig.TotalPage + "頁 ");
      //首頁鏈接
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">首頁</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">首頁</span>");
      //上一頁
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = pageConfig.CurrentPage - 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">上一頁</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">上一頁</span>");
      //數(shù)字導(dǎo)航開始
      int _startPage, _endPage;
      //總頁數(shù)少于要顯示的頁數(shù)，頁碼全部顯示
      if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
      else//顯示指定數(shù)量的頁碼
      {
        int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
        if (pageConfig.CurrentPage > _forward)//起始頁碼大于1
        {
          _endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
          if (_endPage > pageConfig.TotalPage)//結(jié)束頁碼大于總頁碼結(jié)束頁碼為最后一頁
          {
            _startPage = pageConfig.TotalPage - digitalLinkNum;
            _endPage = pageConfig.TotalPage;

          }
          else _startPage = pageConfig.CurrentPage - _forward;
        }
        else//起始頁碼從1開始
        {
          _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é)束
      //下一頁和尾頁
      if (pageConfig.CurrentPage < pageConfig.TotalPage)
      {
        routeValues["page"] = pageConfig.CurrentPage + 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">下一頁</a>");
        routeValues["page"] = pageConfig.TotalPage;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">尾頁</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">下一頁</span><span class=\"btn\">尾頁</span>");
      //顯示頁碼下拉框
      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>頁");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagerselect\").change(function () { location.href = $(\"#" + ctrlId + " #nspagerselect\").attr(\"data-url\").replace(\"-nspageselecturl-\", $(\"#" + ctrlId + " #nspagerselect\").val());});</script>");
      }
      //顯示頁碼輸入框
      if (showInput)
      {
        routeValues["page"] = "-nspagenumurl-";
        _strBuilder.Append("轉(zhuǎn)到第<input id=\"nspagernum\" type=\"text\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\" />頁");
        _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基本一樣。不同點是在點擊鏈接的時候Pager是轉(zhuǎn)到相應(yīng)頁面，PagerAjax是在點擊paer內(nèi)的鏈接的時候利用jquery Post獲取鏈接指定頁面的html代碼替換內(nèi)容包裹容器的html。實際上就是這句jquery語句

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

PagerAjax的整個內(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("每頁" + pageConfig.PageSize + pageConfig.RecordUnit + " ");
      if (showTotalPage) _strBuilder.Append("第" + pageConfig.CurrentPage + "頁/共" + pageConfig.TotalPage + "頁 ");
      //首頁鏈接
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">首頁</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">首頁</span>");
      //上一頁
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = pageConfig.CurrentPage - 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">上一頁</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">上一頁</span>");
      //數(shù)字導(dǎo)航開始
      int _startPage, _endPage;
      //總頁數(shù)少于要顯示的頁數(shù)，頁碼全部顯示
      if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
      else//顯示指定數(shù)量的頁碼
      {
        int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
        if (pageConfig.CurrentPage > _forward)//起始頁碼大于1
        {
          _endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
          if (_endPage > pageConfig.TotalPage)//結(jié)束頁碼大于總頁碼結(jié)束頁碼為最后一頁
          {
            _startPage = pageConfig.TotalPage - digitalLinkNum;
            _endPage = pageConfig.TotalPage;

          }
          else _startPage = pageConfig.CurrentPage - _forward;
        }
        else//起始頁碼從1開始
        {
          _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é)束
      //下一頁和尾頁
      if (pageConfig.CurrentPage < pageConfig.TotalPage)
      {
        routeValues["page"] = pageConfig.CurrentPage + 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">下一頁</a>");
        routeValues["page"] = pageConfig.TotalPage;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">尾頁</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">下一頁</span><span class=\"btn\">尾頁</span>");
      //顯示頁碼下拉框
      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>頁");
        _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>");
      }
      //顯示頁碼輸入框
      if (showInput)
      {
        routeValues["page"] = "-nspagenumurl-";
        _strBuilder.Append(" 轉(zhuǎn)到第<input id=\"nspagernum\" type=\"text\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\" />頁");
        _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());
    }

以上是“如何制作MVC4分頁控件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：如何制作MVC4分頁控件-創(chuàng)新互聯(lián)
當(dāng)前URL：http://www.muchs.cn/article42/depsec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站策劃、靜態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)、服務(wù)器托管、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容