學(xué)習(xí)制作MVC4分頁控件（上）
更新時(shí)間：2016年08月23日 11:36:35 作者：洞庭夕照
這篇文章主要教大家學(xué)習(xí)制作MVC4分頁控件，自己動手編寫HtmlHelper-Pager分頁控件，感興趣的小伙伴們可以參考一下
瀏覽欄目下內(nèi)容的時(shí)候肯定要用到分頁，MVC4下沒有帶分頁控件，那么就自己寫一個(gè)HtmlHelper-Pager。寫之前看了一些大神的分頁控件，啟發(fā)很大。先設(shè)想一下自己的分頁控件
分頁控件分普通分頁（Pager）和Ajax分頁（PagerAjax）兩塊。兩塊的顯示相同，如圖：
各部說明：
在開始寫之前還要先有兩個(gè)類：一個(gè)是分頁設(shè)置類，一個(gè)是分頁數(shù)據(jù)類。
分頁的設(shè)置類包含了常用的分頁參數(shù)，是為了方便保存到數(shù)據(jù)庫中，可以直接在欄目中設(shè)置該欄目下每頁顯示的記錄數(shù)；記錄的計(jì)量單位：是“條”還是“篇”；記錄的名稱是“新聞”、“文章”還是“教程”等。
分頁設(shè)置模型
分頁數(shù)據(jù)類
用來提供記錄列表和分頁設(shè)置PagerData<T> 繼承自 List<T>
想好直接之后，開始設(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ù)字鏈接個(gè)數(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)備好了，寫代碼就快了。
右鍵點(diǎ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底部再添加一個(gè)命名空間namespace System.Web.Mvc.Html。
在里面添加靜態(tài)類public static class PagerExtensions。
在類中間添加函數(shù)public static MvcHtmlString Pager(……)
代碼也很容易就是用UrlHelper.Action生成鏈接的地址，再創(chuàng)建一個(gè)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基本一樣。不同點(diǎn)是在點(diǎn)擊鏈接的時(shí)候Pager是轉(zhuǎn)到相應(yīng)頁面，PagerAjax是在點(diǎn)擊paer內(nèi)的鏈接的時(shí)候利用jquery Post獲取鏈接指定頁面的html代碼替換內(nèi)容包裹容器的html。實(shí)際上就是這句jquery語句
復(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("每頁" + 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());
}
完工
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- laypage分頁控件使用實(shí)例詳解
- 基于jquery實(shí)現(xiàn)簡單的分頁控件
- 基于jQuery的實(shí)現(xiàn)簡單的分頁控件
- ASPNETPAGER分頁控件的使用方法[圖文]
- asp.net分頁控件AspNetPager的樣式美化
- AspNetPager分頁控件源代碼（Version 4.2）
- AspNetAjaxPager,Asp.Net通用無刷新Ajax分頁控件，支持多樣式多數(shù)據(jù)綁定
- asp.net下Repeater使用 AspNetPager分頁控件
- ASP.Net 分頁控件源碼
- AspNetPager分頁控件UrlRewritePattern參數(shù)設(shè)置的重寫代碼
相關(guān)文章
asp.net實(shí)現(xiàn)在非MVC中使用Razor模板引擎的方法
這篇文章主要介紹了asp.net實(shí)現(xiàn)在非MVC中使用Razor模板引擎的方法,較為詳細(xì)的分析了Razor模板引擎的使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關(guān)于asp.net mvc core管道及攔截器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用asp.net mvc core具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
asp.ent下合并兩個(gè)結(jié)構(gòu)相同的DataTable
今天遇到了一個(gè)情況,就是從一張數(shù)據(jù)表中讀取幾個(gè)符合條件1的客戶的信息,然后再讀取幾個(gè)符合條件2的客戶的信息,最后顯示出來.因?yàn)榍昂髢纱螖?shù)據(jù)的客戶信息的結(jié)構(gòu)是完全相同的,所以干脆合并成一個(gè)DataTable再賦值給GridView好了.2010-02-02
asp.net結(jié)合aspnetpager使用SQL2005的存儲過程分頁
項(xiàng)目中用到了，同事阿春寫了例子，并在實(shí)際項(xiàng)目中使用了，記錄下。感謝春哥的無私奉獻(xiàn)。2009-07-07
利用ASP.NET MVC+Bootstrap搭建個(gè)人博客之打造清新分頁Helper（三）
這篇文章主要介紹了利用ASP.NET MVC+Bootstrap搭建個(gè)人博客之打造清新分頁Helper（三）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
使用DataAdapter填充多個(gè)表(利用DataRelation)的實(shí)例代碼
使用DataAdapter填充多個(gè)表(利用DataRelation)的實(shí)例代碼，需要的朋友可以參考一下2013-03-03
ASP.NET Core依賴注入系列教程之控制反轉(zhuǎn)（IoC）
這篇文章主要給大家介紹了關(guān)于ASP.NET Core依賴注入系列教程之控制反轉(zhuǎn)（IoC）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
asp.net操作Word實(shí)現(xiàn)批量替換
這篇文章主要介紹了asp.net操作Word實(shí)現(xiàn)批量替換的方法，需要的朋友可以參考下2015-10-10
解析WPF綁定層次結(jié)構(gòu)數(shù)據(jù)的應(yīng)用詳解
本文講述WPF中單層次數(shù)據(jù)和多層次數(shù)據(jù)的綁定方法，主要闡述數(shù)據(jù)綁定的顯示層面，其中涉及了ListBox和Treeview控件。并說明它們之間的差異2013-05-05
ASP.Net Core基于ABP架構(gòu)配置To Json序列化
這篇文章介紹了ASP.Net Core基于ABP架構(gòu)配置To Json序列化的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06