學習制作MVC4分頁控件（上）
更新時間：2016年08月23日 11:36:35 作者：洞庭夕照
這篇文章主要教大家學習制作MVC4分頁控件，自己動手編寫HtmlHelper-Pager分頁控件，感興趣的小伙伴們可以參考一下
瀏覽欄目下內容的時候肯定要用到分頁，MVC4下沒有帶分頁控件，那么就自己寫一個HtmlHelper-Pager。寫之前看了一些大神的分頁控件，啟發(fā)很大。先設想一下自己的分頁控件
分頁控件分普通分頁（Pager）和Ajax分頁（PagerAjax）兩塊。兩塊的顯示相同，如圖：
各部說明：
在開始寫之前還要先有兩個類：一個是分頁設置類，一個是分頁數據類。
分頁的設置類包含了常用的分頁參數，是為了方便保存到數據庫中，可以直接在欄目中設置該欄目下每頁顯示的記錄數；記錄的計量單位：是“條”還是“篇”；記錄的名稱是“新聞”、“文章”還是“教程”等。
分頁設置模型
分頁數據類
用來提供記錄列表和分頁設置PagerData<T> 繼承自 List<T>
想好直接之后，開始設置基礎函數
1、pager的基礎函數
復制代碼 代碼如下:
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)
參數說明：
actionName-動作名稱；
controllerName-控制器名稱；
routeValues-路由參數；
pageConfig-分頁配置；
ctrlId-分頁控件Id；
cssClass-分頁控件css類名；
digitalLinkNum-顯示的數字鏈接個數；
showTotalRecord-顯示總記錄數；
showCurrentPage-顯示當前頁；
showTotalPage-顯示總頁數；
showSelect-顯示頁碼下拉框；
showInput-顯示頁碼輸入框。
重載可能用到參數
currentPage-當前頁；
totalPage-總頁數；
pageSize-每頁顯示記錄數；
totalRecord-總記錄數；
recordUnit-記錄單位；
recordName-記錄名稱；
2、PagerAjax基礎函數
復制代碼 代碼如下:
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)
參數說明：
ctnrId-內容容器Id。用于包裹ajax返回html的容器控件id
其他參數與1、pager相同
==========================
基本的東西都準備好了，寫代碼就快了。
右鍵點擊Extensions文件夾，添加類PagerExtensions
命名空間改為System.Web.Mvc，在該命名空間下先寫PagerConfig，再寫PagerData，代碼都很簡單。
namespace System.Web.Mvc
{
/// <summary>
/// 分頁配置
/// </summary>
public class PagerConfig
{
[Key]
public int PagerConfigId { get; set; }
/// <summary>
/// 當前頁
/// </summary>
[NotMapped]
public int CurrentPage { get; set; }
/// <summary>
/// 每頁記錄數
/// </summary>
[Display(Name = "每頁記錄數", Description = "每頁顯示的記錄數。")]
[Required(ErrorMessage="×")]
public int PageSize { get; set; }
/// <summary>
/// 總頁數
/// </summary>
[NotMapped]
public int TotalPage { get { return (int)Math.Ceiling(TotalRecord / (double)PageSize); } }
/// <summary>
/// 總記錄數
/// </summary>
[NotMapped]
public int TotalRecord { get; set; }
/// <summary>
/// 記錄單位
/// </summary>
[Display(Name="記錄單位",Description="記錄的數量單位。如文章為“篇”；新聞為“條”")]
[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>
/// 分頁數據
/// </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; }
}
}
下面到了關鍵部分：
在文件PagerExtensions.cs底部再添加一個命名空間namespace System.Web.Mvc.Html。
在里面添加靜態(tài)類public static class PagerExtensions。
在類中間添加函數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>");
//數字導航開始
int _startPage, _endPage;
//總頁數少于要顯示的頁數，頁碼全部顯示
if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
else//顯示指定數量的頁碼
{
int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
if (pageConfig.CurrentPage > _forward)//起始頁碼大于1
{
_endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
if (_endPage > pageConfig.TotalPage)//結束頁碼大于總頁碼結束頁碼為最后一頁
{
_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>");
}
//數字
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>");
}
////數字導航結束
//下一頁和尾頁
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(" 跳轉到第<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("轉到第<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是轉到相應頁面，PagerAjax是在點擊paer內的鏈接的時候利用jquery Post獲取鏈接指定頁面的html代碼替換內容包裹容器的html。實際上就是這句jquery語句
復制代碼 代碼如下:
<script type="text/javascript">$("#ctrlId a").click(function () {$.post($(this).attr("href"), function (data) {$("#ctnrId").html(data);});return false; });</script>
PagerAjax的整個內容
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>");
//數字導航開始
int _startPage, _endPage;
//總頁數少于要顯示的頁數，頁碼全部顯示
if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
else//顯示指定數量的頁碼
{
int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
if (pageConfig.CurrentPage > _forward)//起始頁碼大于1
{
_endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
if (_endPage > pageConfig.TotalPage)//結束頁碼大于總頁碼結束頁碼為最后一頁
{
_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>");
}
//數字
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>");
}
////數字導航結束
//下一頁和尾頁
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(" 跳轉到第<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(" 轉到第<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());
}
完工
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
提到Lucene，想必大家都有所耳聞，已經是數年前就出現的開源技術。很多站點都是利用它搭建自己網站的站內搜索。由于最近也在做數據檢索方面的東西，也學習了下Lucene.net的使用。2015-06-06
這篇文章主要為大家詳細介紹了ASP.NET頁面緩存常見的4種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
ASP與ASP.NET互相整合時，其中文COOKIES信息無法被互通共享，當使用ASP.NET寫入中文COOKIES信息后，使用ASP進行讀取，讀出來的卻是亂碼，而非中文。2010-03-03
這篇文章主要給大家介紹了關于ASP.NET MVC如何使用Unity實現Ioc的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
詳解高效而穩(wěn)定的企業(yè)級.NET Office 組件Spire（.NET組件介紹之二）
這篇文章主要介紹了詳解高效而穩(wěn)定的企業(yè)級.NET Office 組件Spire（.NET組件介紹之二），小編覺得挺不錯的，現在分享給大家，也給大家做個參考。2016-12-12
LINQ操作數組代碼（交集,并集,差集,最值,平均,去重復）
數組是大學里經常拿來做算法練習的對象。一些經典算法非常有價值，考試、裝逼、面試都十分有用。但現在是效率時代，編程講究生產效率，利用LINQ，可以讓程序猿避免寫一些基本算法，把精力花在業(yè)務處理上2012-02-02
這篇文章介紹了asp.net 按指定模板導出word,pdf實例代碼，有需要的朋友可以參考一下2013-09-09
IE提供了一個自動完成功能可以記憶我們的輸入內容(如帳號等),方便下一次快速地錄入類似資料.這確實是一個非常友好的功能, 在操作時只需用鼠標雙擊文本框或輸入前幾個字符, 系統會自動列出以前的錄入歷史供你選擇, 大大提高錄入速度及準確性.2014-06-06
這篇文章主要為大家詳細介紹了使用ASP.NET MVC引擎開發(fā)插件系統的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了如何在ASP.Net Core中使用Serilog，幫助大家更好的理解和學習使用.net技術，感興趣的朋友可以了解下2021-04-04