MVC3 Pager Helper

PagedList are becoming popular in web applications in cases where ther are a huge list of
items and pagination is needed to show the list of items. By using JQuery we can
construct the pager, but it has a serious issue like it will download all the items and then
bind them to JQuery. But Paged list can download only the number of items required per
page and it can retrieve the items based on the count which has been configured in the
application. But for showing the paginator in the application based on the PagedList we
need an !"Lelper which will construct a pager image and bind the action link to the
items. #n this article # will show you how to construct a pager in mvc$ application and
how to use it in the %&P.'(! mvc$ application.
PagerHelper.cs
public static string Pager(this HtmlHelper helper, int currentPage, int
currentPageSize, int totalRecords, string urlPrefix)
{
StringBuilder pageControl ne! StringBuilder()"
int totalPages (totalRecords#$%% & %) ' totalRecords($%% )
$ * totalRecords($%%"
if (totalPages & $)
pageControl+,ppend-ine(String+.ormat(/0a href1/{%2'
page%1/&.irst0(a&/, urlPrefix))"
if (currentPage & $)
pageControl+,ppend-ine(String+.ormat(/0a href1/{%2'
page{$21/&Pre3ious0(a&/, urlPrefix, currentPage 4 5))"
for (int page6ndex $" page6ndex 0 totalPages" page6ndex)))
{

if (page6ndex currentPage)
{
pageControl+,ppend-ine(String+.ormat(/0a href1/{%2'
page{521/ st7le1/bac8ground4color*9:$;<=$1/&{$20(a&/, urlPrefix,
page6ndex, page6ndex 4 $))"
2
else if( page6ndex & currentPage >> page6ndex 0 currentPage
)? >> page6ndex 0 totalPages45)
{
pageControl+,ppend-ine(String+.ormat(/0a href1/{%2'
page{521/&{$20(a&/, urlPrefix, page6ndex, page6ndex 4 $))"
2
else if(page6ndex currentPage)? >> page6ndex 0
totalPages4$ )
{
pageControl+,ppend-ine(String+.ormat(/0a
st7le1/border4color*9......1/&++++++++0(a&/))"
2
else if (page6ndex currentPage ) 5 >> page6ndex 0
totalPages 4 $)
{
pageControl+,ppend-ine(String+.ormat(/0a
st7le1/border4color*9......1/&++++++++0(a&/))"
2
else if (page6ndex currentPage ) $ >> page6ndex 0
totalPages 4 $)
{
pageControl+,ppend-ine(String+.ormat(/0a
st7le1/border4color*9......1/&++++++++0(a&/))"
2
else if(page6ndex & totalPages45)
{
pageControl+,ppend-ine(String+.ormat(/0a href1/{%2'
page{521/&{$20(a&/, urlPrefix, page6ndex, page6ndex 4 $))"
2
else if(page6ndex totalPages4? >> currentPage&
totalPages4?)
{
pageControl+,ppend-ine(String+.ormat(/0a
st7le1/border4color*9......1/&++++++++0(a&/))"
2

2

if (currentPage 0 (totalRecords ( $%%) ) $)
pageControl+,ppend-ine(String+.ormat(/0a href1/{%2'
page{$21/&@ext0(a&/, urlPrefix, currentPage))"
if (totalPages & $)
pageControl+,ppend-ine(String+.ormat(/0a href1/{%2'
page{$21/&-ast0(a&/, urlPrefix, totalPages4$))"
return pageControl+AoString()"
2
Let us create an inde) view page called as inde).cshtml or inde).asp)
Index.aspx
0di3 class/pagination/&
0#Html+Pager(Bodel+=rrors+Page6ndex)$, 5C, Bodel+AotalCount,
Bodel+,pp@ame)#&
0(di3&
!he css which can be used to display the pager is as follows
Pagination.css
+pagination
{
font4size* %+<em"
2
+pagination a
{
text4decoration* none"
border* solid $px 9%%%%%%"
color* 9%%?CD%"
2
+pagination a, +pagination span
{
displa7* bloc8"
float* left"
padding* %+?em %+Cem"
margin4right* Cpx"
margin4bottom* Cpx"
min4!idth* $em"
text4align* center"
2
+pagination +current
{
bac8ground* 9?a;$aa"
color* 9fff"
border* solid $px 9ccc"
2
+pagination +current+pre3, +pagination +current+next
{
color* 9<<<"
border4color* 9ccc"
bac8ground* 9fff"
2
The snapshot of the pager will be as follows
(ach number in the pager will have the href link set, which when we click on will
retrieve the needed information for that particular page alone, which will increase the
performance considerably.