Using ASP.net mvc+bootstrap to build a personal blog to create a fresh paging helper (c) practical skills

0. Did not find a favorite page plug, and do not want to use ready-made (ugly to the explosion), so do your own to build a bar

First look at the effect (actually not a drop ...) ：

My station address: my bootstrap station;

PS: (Ask Blog Park: Why always delete my top casually? The last reading volume is nearly 500, also give me a minute to delete from the home page ... It's really silent < blog Park address:http://www.cnblogs.com/haust/p/5615946.html>).

Somewhat alternative, pagination is directly in the background stitching good HTML, and then sent to the foreground:

1. Paging Container:

<div class= "pagination" >
<ul>
//************ paging html*********
</ul>
</div >

2. Pagerhelper:

Namespace Zyn. BLOG. Webhelper {public class Pagerhelper {///<summary>///raw page HTML data///</summary>///<param name= "current Page > Current page </param>///<param name= "pageSize" > Page capacity </param>///<param name= "TotalCount" > Data Total bar </param>///<returns>pagerHtmlString</returns> public static string generatepagerstring (int  currentpage, int pageSize, int totalcount) {var redirecttourl = HttpContext.Current.Request.Url.AbsolutePath; pageSize = PageSize <= 0?
4:pagesize;
1.0 total Pages int totalpages = Math.max ((totalcount + pageSize-1)/pageSize, 1); 2.0 the capacity int pagebarsize = 6;//The default one page page displays 6 pages. Paging bar capacity//3.0 The number of totalpages pages by Pagebarsize = 6 can be divided into the number of pagination int pagebarnum = (totalpages + pageBarSize-1)/Pagebarsi Ze 
Totalpages=13, that is, 13 pages divided into 3 pagination//To determine the current page currentpage is located in the first few pagination within the int position = (currentPage-1)/pagebarsize;
According to the ordinal of the page bar, calculate the first page number of the page start and the last page end int start = position * pagebarsize + 1; If it is the last page bar, you need to determine its actual paging capacity;Otherwise, the page bar capacity is pagebarsize int curbarcapacity = pagebarsize;
if (position = = pageBarNum-1) {curbarcapacity = TotalPages-(pageBarNum-1) * pagebarsize;}
StringBuilder pagerhtmlstring = new StringBuilder ();
StringBuilder endhtmlstring = new StringBuilder (); Processing Home Pagerhtmlstring.appendformat ("<li id= ' start-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} '"
> Home </a></li> ", Redirecttourl, 1, pageSize); Process Previous page: If the current page is not the first page, add the previous page if (CurrentPage > 1) {pagerhtmlstring.appendformat ("<li class= ' prev-page ' ><a
Href= ' {0}?pageindex={1}&pagesize={2} ' > Prev </a></li> ', Redirecttourl, currentPage-1, pageSize);} If start position is 1 7 for (int i = 0; i < curbarcapacity; i++)//curbarcapacity=3 i=0 1 2 {int J = start + I;//the page number to display when Measure if (j = = CurrentPage) {//Processing of current page: Class=active pagerhtmlstring.appendformat ("<li class= ' active Show-page ' ><
Span>{0}</span></li> ", currentpage); if (curbarcapacity = = pagebarsize) {//Don't handle the last onePage page if (currentpage = = start + pageBarSize-1) {if (currentpage + 1 < totalpages) {Endhtmlstring.appendformat ("< Li class= ' show-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} ' >{3}</a></li> ',
Redirecttourl, CurrentPage + 1, pageSize, currentpage + 1);
} endhtmlstring.append ("<li class= ' show-page ' ><span>...</span></li>"); Endhtmlstring.appendformat ("<li class= ' show-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} ' >{3}"
</a></li> ", Redirecttourl, TotalPages, PageSize, totalpages); }} else {Pagerhtmlstring.appendformat ("<li class= ' show-page ' ><a href= ' {0}?pageindex={1}&pagesize={2}
' >{3}</a></li> ', Redirecttourl, J, PageSize, j);}
Processing of ellipses Pagerhtmlstring.append (endhtmlstring.tostring ()); Process Next page: If the current page is not the last page, add the next page. That is, all the page bars in the middle show the next page if (currentpage!= totalpages) {Pagerhtmlstring.appendformat ("<li class= ' next-page ' ><a ') to href = ' {0}?pageindex={1}&pagesize={2} ' > next page;/a></li> ", Redirecttourl, CurrentPage + 1, pageSize);} Process last page Pagerhtmlstring.appendformat ("<li id= ' end-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} ' >
Last </a></li> ", Redirecttourl, TotalPages, pageSize); Pagerhtmlstring.appendformat ("<li id= ' total-page ' ><span> total-{0}-page </span></li>", TotalPages
);
Pagerhtmlstring.append ("");
return pagerhtmlstring.tostring ();  }
}
}

Page HTML rendered by

3 is like this:

<div class= "pagination" > <ul> <li id= "start-page" ><a href= "/home/wrapartlist/0?pageindex=1" &pagesize=6 "> Home </a></li> <li class=" Active Show-page "><span>1</span></li > <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=2&pagesize=6" >2</a></ li> <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=3&pagesize=6" >3</a>< /li> <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=4&pagesize=6" >4</a> </li> <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=5&pagesize=6" >5</a ></li> <li class= "next-page" ><a href= "/home/wrapartlist/0?pageindex=2&pagesize=6" > next page </a></li> <li id= "end-page" ><a href= "/home/wrapartlist/0?pageindex=5&pagesize=6" > last page </a></li> <li id= "total-page" ><span> total page </Span></li> </ul> </div>  

4. CSS styles:

/* pagination style pagination = = * * Pagination {/* div pagination*/margin:0; padding:20px; text-align:center
px
Display:block; }. pagination ul {display:inline-block; *display:inline; *zoom:1; margin-left:0; margin-bottom:0; padding:0; pag Ination ul > li {display:inline; pagination ul > li > A,. pagination ul > li > Span {margin:0 2px; f
Loat:left;
padding:5px 12px;
Background-color: #ddd;
Color: #666;
border-radius:2px;
Opacity:. 88; Pagination ul > li > A:hover,. pagination ul > li > A:focus {background-color: #bce8f1; pagination ul & gt;. Active > A,. pagination ul >. Active > Span {background-color: #45B6F7; color: #fff; pagination ul > . Active > A,. pagination ul >. Active > Span {cursor:default}. pagination ul > li > Span,. pagination U L > Disabled > span,. pagination ul > Disabled > A,. pagination ul >. Disabled > A:hover,. pagination UL > Disabled > A: Focus {color: #999999; background-color:transparent; Cursor:default}//* custom pagination End = =  

The above is a small series to introduce the use of ASP.net mvc+bootstrap build personal blog to create a fresh page helper (iii), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!