ASP. NET MVC pagination Instance

Paging is the basic functionality of the Web page, which focuses on the front-end implementation of pagination in ASP. NET-MVC environment, and does not involve background paging. The implementation effect is as shown:

Step 1: Create a paging information class

1      Public classPaginginfo2     {3          Public intTotalitmes {Set;Get; }4          Public intItemsPerPage {Set;Get; }5          Public intcurrentpage {Set;Get; }6          Public intTotalPages7         {8             Get{return(int) Math.ceiling (decimal) Totalitmes/itemsperpage); }9         }Ten}

Step 2: Create a htmlhelper page extension method

1      Public Static classpaginghelpers2     {3          Public StaticMvchtmlstring Pagelinks ( ThisHtmlHelper Html,paginginfo paginginfo,func<int,string>pageurl)4         {5StringBuilder result =NewStringBuilder ();6Result. Append ("<ul>");7 8            9             if(Paginginfo.currentpage >1)Ten             {  One                 //Set up home page pagination link AResult. Append ("<li>"); -Result. Append ("<a href= '"); -Result. Append (Pageurl (1)); theResult. Append ("' > Home </a>"); -Result. Append ("</li>"); -                 //Create previous page pagination link -Result. Append ("<li>"); +Result. Append ("<a href= '"); -Result. Append (Pageurl (paginginfo.currentpage-1)); +Result. Append ("' > Prev </a>"); AResult. Append ("</li>"); at             } -  -              for(intI=1; i<=paginginfo.totalpages;i++) -             { -                 if(i<=2|| i>=paginginfo.currentpage-3&&i<=paginginfo.currentpage+3|| i>=paginginfo.totalpages-1) -                 { in Createpagelink (Paginginfo, pageurl, result, i); -                 } to                 Else if(Result[result. length-1]!='.') +                 { -Result. Append ("..."); the                 } *             } $ Panax Notoginseng             if(Paginginfo.currentpage <paginginfo.totalpages) -             { the                 //Create previous page pagination link +Result. Append ("<li>"); AResult. Append ("<a href= '"); theResult. Append (Pageurl (Paginginfo.currentpage +1)); +Result. Append ("' > Next </a>"); -Result. Append ("</li>"); $                 //Set up home page pagination link $Result. Append ("<li>"); -Result. Append ("<a href= '"); - result. Append (Pageurl (paginginfo.totalpages)); theResult. Append ("' > Last </a>"); -Result. Append ("</li>");Wuyi             } theResult. Append ("</ul>"); -             returnmvchtmlstring.create (result. ToString ()); Wu         } -  About         Private Static voidCreatepagelink (Paginginfo paginginfo, func<int,string> pageurl, StringBuilder result,inti) $         { -             if(i = =paginginfo.currentpage) -             { -Result. Append ("<li class= ' current ' >"); A             } +             Else the             { -Result. Append ("<li>"); $             } theResult. Append ("<a href= '"); the result. Append (Pageurl (i)); theResult. Append ("' >"); the result. Append (i); -Result. Append ("</a>"); inResult. Append ("</li>"); the         } the}

The extension method takes the form of a spelling string, or you can use Tagbuilder.

Step 3. Add action

         Public ActionResult Index (int1)        {            new5};             return View (paginginfo);        }

Here TotalItems, itemsperpage both write dead data, the actual totalitems should be calculated from the database, ItemsPerPage can write to the appsettings of Web. config, also can read the database.

Step 4. Add view

@using pagination. Htmlhelpers@model paging. Models.paginginfo<class= "pages">    @ Html.pagelinks (Model, x = url.action ("Index", new {page = x})</div>

You can now run the view results:

Step 5: Add css, modify styles

. Pages{margin:20px Auto;Clear:both;width:890px;text-align:Center;padding:10px 0px;text-align:Center;font-size:12px;}. Pages ul{Display:inline;margin:0 Auto;width:890px; }. Pages Li{Display:inline;margin:0 Auto; }. Pages a{padding:7px 11px;Border-radius:3px;margin:4px;Background-color:#f2f3f5;Border:#ddd 1px solid;Color:#555;text-decoration:None; }. Pages A:hover, li.current a{Background-color:#CC0000;Color:#FFFFFF;Border:#CC0000 1px solid;text-decoration:None; }

This completes the front end of the paging display, and of course, background paging, routing settings, and so on, to be completed next time. Another part of the code can be modified for WebForm.

ASP. NET MVC pagination Instance