Asp.net mvc custom pager encapsulation and optimization, mvcpager

Asp.net mvc custom pager encapsulation and optimization, mvcpager
Asp.net mvc custom pager encapsulation and optimization of Intro

A general paging component was previously created, but there were some shortcomings. The paging events and paging styles were integrated in the background code and can be customized, after turning pages and styles are separated from the code, custom pager becomes more and more easy to expand.

HtmlHelper Pager extension Pager V1.0:

1 /// <summary> 2 /// Pager V1.0 3 /// </summary> 4 /// <param name = "helper"> HtmlHelper </param> 5/ // <param name = "pager"> Page Information </param> 6 // <returns> </returns> 7 public static MvcHtmlString Pager (this HtmlHelper helper, pagerModel pager) 8 {9 StringBuilder sbHtmlText = new StringBuilder (); 10 sbHtmlText. append ("<div style = \" text-align: center \ "> <nav> <ul class = \" pagination \ ">"); 11 if (pager. pageIndex <= 1) 12 {13 sbHtmlText. append ("<li class = \" disabled \ "> <a href = \" javascript: void (0) \ "aria-label = \" Previous \ "> <span aria-hidden = \" true \ "> & laquo; </span> </a> </li> "); 14} 15 else16 {17 sbHtmlText. appendFormat ("<li> <a href = \" javascript: loadData (1) \ "aria-label = \" 1 \ "> <span aria-hidden = \" true \ "> & laquo; </span> </a> </li> ", pager. pageIndex-1); 18 sbHtmlText. appendFormat ("<li> <a href = \" javascript: loadData ({0}) \ "> {0} </a> </li>", pager. pageIndex-1); 19} 20 sbHtmlText. appendFormat ("<li class = \" active \ "> <a href = \" javascript: void (0) \ "> {0} <span class = \" sr-only \ "> (current) </span> </a> </li>", pager. pageIndex); 21 if (pager. pageIndex> = pager. pageCount) 22 {23 sbHtmlText. append ("<li class = \" disabled \ "> <a href = \" javascript: void (0) \ "aria-label = \" Next \ "> <span aria-hidden = \" true \ "> & raquo; </span> </a> </li> "); 24} 25 else26 {27 sbHtmlText. appendFormat ("<li> <a href = \" javascript: loadData ({0}) \ "> {0} </a> </li>", pager. pageIndex + 1); 28 sbHtmlText. appendFormat ("<li> <a href = \" javascript: loadData ({0 }) \ "aria-label = \" Next \ "> <span aria-hidden = \" true \ "> & raquo; </span> </a> </li> ", pager. pageIndex + 1); 29} 30 sbHtmlText. append ("</ul> </nav>"); 31 sbHtmlText. appendFormat ("<div> <span> each page contains <strong> {0} </strong> pieces of data, a total of <strong> {1} </strong> pages, total <strong> {2} </strong> data </span> </div> ", pager. pageSize, pager. pageCount, pager. totalCount); 32 return MvcHtmlString. create (sbHtmlText. toString (); 33}

 

Pager V2.0

1 /// <summary> 2 // Pager V2.0 3 /// </summary> 4 /// <param name = "helper"> HtmlHelper </param> 5/ // <param name = "pager"> Page Information </param> 6 // <param name = "onPageChange"> page turning event </param> 7 // <returns> </returns> 8 public static MvcHtmlString Pager (this HtmlHelper helper, pagerModel pager, Func <int, string> onPageChange) 9 {10 StringBuilder sbHtmlText = new StringBuilder (); 11 sbHtmlText. append ("<div style = \" text-align: center \ "> <nav> <ul class = \" pagination \ ">"); 12 if (pager. pageIndex <= 1) 13 {14 sbHtmlText. append ("<li class = \" disabled \ "> <a href = \" javascript: void (0) \ "aria-label = \" Previous \ "> <span aria-hidden = \" true \ "> & laquo; </span> </a> </li> "); 15} 16 else17 {18 sbHtmlText. appendFormat ("<li> <a href = \" {0} \ "aria-label = \" Previous \ "> <span aria-hidden = \" true \ "> & laquo; </span> </a> </li> ", onPageChange (pager. pageIndex-1); 19 sbHtmlText. appendFormat ("<li> <a href = \" {0} \ ">{1} </a> </li>", onPageChange (pager. pageIndex-1), pager. pageIndex-1); 20} 21 sbHtmlText. appendFormat ("<li class = \" active \ "> <a href = \" javascript: void (0) \ "> {0} <span class = \" sr-only \ "> (current) </span> </a> </li>", pager. pageIndex); 22 if (pager. pageIndex> = pager. pageCount) 23 {24 sbHtmlText. append ("<li class = \" disabled \ "> <a href = \" javascript: void (0) \ "aria-label = \" Next \ "> <span aria-hidden = \" true \ "> & raquo; </span> </a> </li> "); 25} 26 else27 {28 sbHtmlText. appendFormat ("<li> <a href = \" {0} \ ">{1} </a> </li>", onPageChange (pager. pageIndex + 1), pager. pageIndex + 1); 29 sbHtmlText. appendFormat ("<li> <a href = \" {0} \ "aria-label = \" Next \ "> <span aria-hidden = \" true \ "> & raquo; </span> </a> </li> ", onPageChange (pager. pageIndex + 1); 30} 31 sbHtmlText. append ("</ul> </nav>"); 32 sbHtmlText. appendFormat ("<div> <span> each page contains <strong> {0} </strong> pieces of data, a total of <strong> {1} </strong> pages, total <strong> {2} </strong> data </span> </div> ", pager. pageSize, pager. pageCount, pager. totalCount); 33 return MvcHtmlString. create (sbHtmlText. toString (); 34}

 

Pager V3.0

1 /// <summary> 2 /// Pager V3.0 3 /// </summary> 4 /// <param name = "helper"> HtmlHelper </param> 5/ // <param name = "pager"> Page Information </param> 6 // <param name = "onPageChange"> flip address or event </param> 7 /// <param name = "pagerViewName"> partition view name </param> 8 // <param name = "displayMode"> display by page </param> 9 // <returns> </returns> 10 public static MvcHtmlString Pager (this HtmlHelper helper, pagerModel pager, Func <int, string> onPageChange, string pagerViewName, PagingDisplayMode displayMode = PagingDisplayMode. always) 11 {12 pager. onPageChange = onPageChange; 13 pager. pagingDisplayMode = displayMode; 14 return MvcHtmlString. create (helper. partial (pagerViewName, pager ). toHtmlString (); 15}

 

Summary

If you want to modify Pager V1.0 paging styles and paging events, you must modify the CSharp code.

Pager V2.0 allows you to customize paging events, but you still need to modify the CSharp code to modify the paging style.

Pager V3.0 allows you to modify paging events, addresses, and paging styles in the Custom paging division view.

End

Now you have packaged the MvcSimplePager project into Nuget http://www.nuget.org/packages/mvcsimplepager/. you can search for MvcSimplePager in the nuget Package Manager in.

Custom MvcSimplePager project and sample code: https://github.com/WeihanLi/MvcSimplePager, you can customize as needed.