Learn how to create an MVC4 paging control (on) and an mvc4 paging Control

Learn how to create an MVC4 paging control (on) and an mvc4 paging Control

When browsing the content under the topic, you must use pagination. If there is no pagination control under MVC4, you can write an HtmlHelper-Pager by yourself. I read some huge paging controls before writing them, which is very enlightening. First, imagine your own paging control.

The pagination control is divided into two parts: Pager and PagerAjax. The display of the two parts is the same,

Description of each department:

There are two classes before writing: one is the paging setting class and the other is the paging data class.

The paging setting class contains common paging parameters to facilitate storage to the database. You can directly set the number of records displayed on each page of the column in the column. The unit of measurement of the record: the record name is "news", "article", or "tutorial.

Paging Setting Model

Paging data
Used to provide record lists and pagination settings PagerData <T> inherited from List <T>

After thinking about it, start setting basic functions.

1. Basic pager Functions
Copy codeCode: Pager (this HtmlHelper htmlHelper, string actionName, string controllerName, routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool callback, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)

Parameter description:
ActionName-action name;
ControllerName-controller name;
RouteValues-route parameters;
PageConfig-pagination configuration;
CtrlId-the Id of the paging control;
CssClass-css Class Name of the paging control;
DigitalLinkNum-number of digital links displayed;
ShowTotalRecord-displays the total number of records;
ShowCurrentPage-displays the current page;
ShowTotalPage-displays the total number of pages;
ShowSelect-display the page number drop-down box;
ShowInput-display page number input box.

Overload parameters may be used 
CurrentPage-current page;
TotalPage-Total number of pages;
PageSize-number of records displayed per page;
TotalRecord-Total number of records;
RecordUnit-record unit;
RecordName-Record Name;

2. Basic PagerAjax Functions 
Copy codeCode: public static extends PagerAjax (this HtmlHelper htmlHelper, string ctnrId, string actionName, string controllerName, routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)
Parameter description:
CtnrId-content container Id. Container Control id used to wrap ajax and return html
Other parameters are the same as those of 1 and pager.
======================================
All the basic things are ready, so you can write code quickly.

Right-click the Extensions folder and add the class PagerExtensions.

Change the namespace to System. Web. Mvc. Write PagerConfig and PagerData in the namespace. The code is very simple.

Namespace System. web. mvc {// <summary> /// page configuration /// </summary> public class PagerConfig {[Key] public int PagerConfigId {get; set ;} /// <summary> /// current page /// </summary> [NotMapped] public int CurrentPage {get; set ;} /// <summary> /// number of records per page /// </summary> [Display (Name = "number of records per page ", description = "number of records displayed per page. ")] [Required (ErrorMessage =" × ")] public int PageSize {get; set ;} /// <summary> /// total number of pages /// </summary> [NotMapped] public int TotalPage {get {return (int) Math. ceiling (TotalRecord/(double) PageSize) ;}/// <summary> // total number of records /// </summary> [NotMapped] public int TotalRecord {get; set ;}//< summary> /// record unit /// </summary> [Display (Name = "record Unit", Description = "record Quantity Unit. For example, the article is "article", the news is "article")] [Required (ErrorMessage = "×")] public string RecordUnit {get; set ;} /// <summary> /// Record Name /// </summary> [Display (Name = "Record Name", Description = "Record Name. For example, "articles", "news", "tutorials", etc. ")] [Required (ErrorMessage =" × ")] public string RecordName {get; set;} public PagerConfig () {CurrentPage = 1; PageSize = 20; RecordUnit = "entries"; RecordName = "record ";}} /// <summary> // paging data // </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 ;}}}

The following are the key parts:
Add a namespace System. Web. Mvc. Html at the bottom of the file PagerExtensions. cs.
Add the static class public static class PagerExtensions.
Add the public static MvcHtmlString Pager (…) function in the middle of the class (......)
The Code is also easy to use UrlHelper. create a StringBuilder _ strBuilder for the URL generated by Action, add html code to it without stopping, and use return MvcHtmlString. create (_ strBuilder. toString (); returns MvcHtmlString. It's just a mess.

Public static callback Pager (this HtmlHelper htmlHelper, string actionName, string controllerName, routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool callback, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput) {UrlHelper _ url = new UrlHelper (htmlHelper. viewContext. requestContext); StringBuilder _ st RBuilder = new StringBuilder ("<div id = \" "+ ctrlId +" \ "class = \" "+ cssClass +" \ ">"); if (showTotalRecord) _ strBuilder. append ("Total" + pageConfig. totalRecord + pageConfig. recordUnit + pageConfig. recordName + ""); if (showCurrentPage) _ strBuilder. append ("per page" + pageConfig. pageSize + pageConfig. recordUnit + ""); if (showTotalPage) _ strBuilder. append ("th" + pageConfig. currentPage + "Page/total" + pageConfig. T OtalPage + "page"); // if (pageConfig. currentPage> 1) {routeValues ["page"] = 1; _ strBuilder. append ("<a class = \" linkbtn \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"> homepage </a> ");} else _ strBuilder. append ("<span class = \" btn \ "> homepage </span>"); // if (pageConfig. currentPage> 1) {routeValues ["page"] = pageConfig. currentPage-1; _ strBuilder. append ("<a class = \" linkbtn \ "href = \ "" + _ Url. action (actionName, controllerName, routeValues) + "\"> previous page </a> ");} else _ strBuilder. append ("<span class = \" btn \ "> previous page </span>"); // start int _ startPage, _ endPage in the digital navigation; // The total number of pages is less than the number of pages to be displayed. if (digitalLinkNum> = pageConfig. totalPage) {_ startPage = 1; _ endPage = pageConfig. totalPage;} else // display the specified number of pages {int _ forward = (int) Math. ceiling (digitalLinkNum/2.0); if (pageConfig. currentPage> _ forwa Rd) // The starting page number is greater than 1 {_ endPage = pageConfig. currentPage + digitalLinkNum-_ forward; if (_ endPage> pageConfig. totalPage) // The ending page number is greater than the total page number. The ending page number is the last page {_ startPage = pageConfig. totalPage-digitalLinkNum; _ endPage = pageConfig. totalPage;} else _ startPage = pageConfig. currentPage-_ forward;} else // start page number from 1 {_ startPage = 1; _ endPage = digitalLinkNum;} // up... If (_ startPage> 1) {routeValues ["page"] = _ startPage-1; _ strBuilder. append ("<a class = \" linkbatch \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\">... </A> ") ;}// number 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>") ;}// downward... If (_ endPage <pageConfig. totalPage) {routeValues ["page"] = _ endPage + 1; _ strBuilder. append ("<a class = \" linkbatch \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\">... </A> ") ;}//// digital navigation end // next page and last page if (pageConfig. currentPage <pageConfig. totalPage) {routeValues ["page"] = pageConfig. currentPage + 1; _ strBuilder. append ("<a class = \" linkbtn \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"> next page </a> "); routeValues [" page "] = pageConfig. totalPage; _ strBuilder. append ("<a class = \" linkbtn \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"> last page </a> ");} else _ strBuilder. append ("<span class = \" btn \ "> next page </span> <span class = \" btn \ "> last page </span> "); // display the page number drop-down box if (showSelect) {routeValues ["page"] = "-nspageselecturl-"; _ strBuilder. append ("Jump to the <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> page"); _ strBuilder. append ("<script type = \" text/javascript \ ">$ (\" # "+ ctrlId +" # nspagerselect \"). change (function () {location. href = $ (\ "#" + ctrlId + "# nspagerselect \"). attr (\ "data-url \"). replace (\ "-nspageselecturl-\", $ (\ "#" + ctrlId + "# nspagerselect \"). val () ;}); </script> ") ;}// display the page number input box if (showInput) {routeValues [" page "] ="-nspagenumurl -"; _ strBuilder. append ("go to the <input id = \" nspagernum \ "type = \" text \ "data-url = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"/> page "); _ 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 is basically the same as Pager. The difference is that when you click a link, Pager is directed to the corresponding page, pagerAjax uses jquery Post to obtain the html code of the link specified page when clicking the link in The paer to replace the html of the content package container. This is actually the jquery statement.

Copy codeThe Code is as follows: <script type = "text/javascript" >$ ("# ctrlId "). click (function () {$. post ($ (this ). attr ("href"), function (data) {$ ("# ctnrId" ).html (data) ;}); return false ;}); </script>

PagerAjax content

Public static export PagerAjax (this HtmlHelper htmlHelper, string ctnrId, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool callback, 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 ("Total" + pageConfig. totalRecord + pageConfig. recordUnit + pageConfig. recordName + ""); if (showCurrentPage) _ strBuilder. append ("per page" + pageConfig. pageSize + pageConfig. recordUnit + ""); if (showTotalPage) _ strBuilder. append ("th" + pageConfig. currentPage + "Page/total" + pageConfig. totalPage + "page"); // if (pageConfig. currentPage> 1) {routeValues ["page"] = 1; _ strBuilder. append ("<a class = \" linkbtn \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"> homepage </a> ");} else _ strBuilder. append ("<span class = \" btn \ "> homepage </span>"); // if (pageConfig. currentPage> 1) {routeValues ["page"] = pageConfig. currentPage-1; _ strBuilder. append ("<a cl Ass = \ "linkbtn \" href = \ "" + _ url. action (actionName, controllerName, routeValues) + "\"> previous page </a> ");} else _ strBuilder. append ("<span class = \" btn \ "> previous page </span>"); // start int _ startPage, _ endPage in the digital navigation; // The total number of pages is less than the number of pages to be displayed. if (digitalLinkNum> = pageConfig. totalPage) {_ startPage = 1; _ endPage = pageConfig. totalPage;} else // display the specified number of pages {int _ forward = (int) Math. ceiling (digitalLinkNum/2.0); if (pageConfig. CurrentPage> _ forward) // The starting page number is greater than 1 {_ endPage = pageConfig. currentPage + digitalLinkNum-_ forward; if (_ endPage> pageConfig. totalPage) // The ending page number is greater than the total page number. The ending page number is the last page {_ startPage = pageConfig. totalPage-digitalLinkNum; _ endPage = pageConfig. totalPage;} else _ startPage = pageConfig. currentPage-_ forward;} else // start page number from 1 {_ startPage = 1; _ endPage = digitalLinkNum;} // up... If (_ startPage> 1) {routeValues ["page"] = _ startPage-1; _ strBuilder. append ("<a class = \" linkbatch \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\">... </A> ") ;}// number 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>") ;}// downward... If (_ endPage <pageConfig. totalPage) {routeValues ["page"] = _ endPage + 1; _ strBuilder. append ("<a class = \" linkbatch \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\">... </A> ") ;}//// digital navigation end // next page and last page if (pageConfig. currentPage <pageConfig. totalPage) {routeValues ["page"] = pageConfig. currentPage + 1; _ strBuilder. append ("<a class = \" linkbtn \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"> next page </a> "); routeValues [" page "] = pageConfig. totalPage; _ strBuilder. append ("<a class = \" linkbtn \ "href = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"> last page </a> ");} else _ strBuilder. append ("<span class = \" btn \ "> next page </span> <span class = \" btn \ "> last page </span> "); // display the page number drop-down box if (showSelect) {routeValues ["page"] = "-nspageselecturl-"; _ strBuilder. append ("Jump to the <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> page"); _ 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> ") ;}// display page number input box if (showInput) {routeValues [" page "] ="-nspagenumurl-"; _ strBuilder. append ("go to the <input id = \" nspagernum \ "type = \" text \ "data-url = \" "+ _ url. action (actionName, controllerName, routeValues) + "\"/> page "); _ 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 +" \"). click (function () {$. post ($ (this ). attr (\ "href \"), function (data) {$ (\ "#" + ctnrId + "\" ).html (data) ;}); return false ;}); </script> "); _ strBuilder. append ("</div>"); return MvcHtmlString. create (_ strBuilder. toString ());}

Finished

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.