Modify the Mvcpager pagination control to apply the bootstrap effect (English version, downloadable)

Software development paging is essential, and Mvcpager is a good choice for ASP. Please visit http://www.webdiyer.com/mvcpager/

Since the resulting paging style cannot be compatible with the overall style of the project, we are prepared to rewrite the source code so that it can use the bootstrap style of pagination.

First, look at the HTML code for the two types of pagination

Bootstrap Style:

1<ulclass="pagination">2<liclass="Disabled"><a href="#">«</a></li>3<liclass="Active"><a href="#">1<spanclass="sr-only"> (current) </span></a></li>4     ...5</ul>

A UL tag, Li has a label below.

Mvcpager Style:

1 <!--Mvcpager v2.0 for ASP. NET MVC 4.0+©2009-2013 webdiyer (http://www.webdiyer.com) -2 <Divdata-maxpages= "5"Data-mvcpager= "true"Data-pageparameter= "id"Data-urlformat= "/mvcpager/demo/basic/__id__/"><aDisabled= "Disabled">Home</a>&nbsp;&nbsp;<aDisabled= "Disabled">Previous page</a>&nbsp;&nbsp;1&nbsp;&nbsp;<ahref= "/mvcpager/demo/basic/2/">2</a>&nbsp;&nbsp;<ahref= "/mvcpager/demo/basic/3/">3</a>&nbsp;&nbsp;<ahref= "/mvcpager/demo/basic/4/">4</a>&nbsp;&nbsp;<ahref= "/mvcpager/demo/basic/5/">5</a>&nbsp;&nbsp;<ahref= "/mvcpager/demo/basic/2/">Next page</a>&nbsp;&nbsp;<ahref= "/mvcpager/demo/basic/5/">Last</a>&nbsp;&nbsp;<SelectData-pageindexbox= "true"Data-autosubmit= "true"><optionvalue= "1"selected= "Selected">1</option><optionvalue= "2">2</option><optionvalue= "3">3</option><optionvalue= "4">4</option><optionvalue= "5">5</option></Select></Div>3 <!--Mvcpager v2.0 for ASP. NET MVC 4.0+©2009-2013 webdiyer (http://www.webdiyer.com) -

It's easier here, with a div under a tag.

So the question is, how do we modify the source code to achieve bootstrap paging effect?

1, to the official website download Mvcpager source code

2, began to study the HTML generation rules.

These two steps the author has helped you to do, below with me to do the modification.

Through code debug tracking and viewing source comments, we know that the final HTML rendering is the Renderpager () method under PagerBuilder.cs.

1  varSB =NewStringBuilder ();2             if(_ajaxpagingenabled)3             {4                 foreach(Pageritem Iteminchpageritems)5                 {6                         //before modification7                   //sb. Append (Generateajaxpagerelement (item));8                        //after modification9Sb. Append ("<li>"+ generateajaxpagerelement (item) +"</li>");Ten                 } One             } A             Else -             { -                 foreach(Pageritem Iteminchpageritems) the                 { -                       //before modification -                      //sb. Append (Generatepagerelement (item)); -                       //after modification +Sb. Append ("<li>"+ generatepagerelement (item) +"</li>"); -                 } +}

Modify the above code to get the LI tag. Since the UL label is last added, we are here to modify:

1    if(_pageroptions.showpageindexbox)2             {3                 if(!_ajaxpagingenabled)4                 {5                     varAttrs =Newdictionary<string,Object>();6 adddataattributes (attrs);7Tb. Mergeattributes (Attrs,true);8                 }9 sb. Append (Buildgotopagesection ());Ten             } One             Else ASb. Length-=_pageroptions.pageritemsseperator.length; -              //before modification -              //TB. InnerHtml = sb. ToString (); the              //after modification, add class= ' pagination ' to UL to get Boostrap page style -Tb. InnerHtml ="<ul class= ' pagination ' >"+ sb. ToString () +"</ul>";

With the above not enough, you also need to add style to the current page,

The modified Generateajaxanchor (Pageritem Item) method is:

1   }2         Private stringGenerateajaxanchor (Pageritem Item)3         {4             stringURL =GenerateURL (item. PageIndex);5             if(string. Isnullorwhitespace (URL))6                   //here is a direct fake inline style that can be replaced with class7                 return "<a style= ' z-index:2;color: #fff; Cursor:default;background-color: #428bca; Border-color: #428bca; ' disabled= ' disabled ' >"+ Item. Text +"</a>";8             //return Httputility.htmlencode (item. Text);9             varTag =NewTagbuilder ("a") {InnerHtml =item. Text};TenTag. Mergeattribute ("href", URL); OneTag. Mergeattribute ("Data-pageindex", item. Pageindex.tostring (CultureInfo.InvariantCulture)); A             //after modification, the Li tag was added -             return "<li>"+ tag. ToString (Tagrendermode.normal) +"</li>"; -}

There are so many changes to the source code that we look at the effect together.

Chinese version effect:

English version of the effect (the same is to modify the source code, added support for English):

Code click here to download

Modify the Mvcpager pagination control to apply the bootstrap effect (English version, downloadable)