ASP. NET mvc2.0 implements asynchronous no-refreshing paging in tab pages

Overview

Data is presented on tabs in many places, such as the homepage of well-known portal websites such as Netease, Sina, Sohu, and QQ, as well as the well-known homepage of the blog Park, tab pages are used to display data. You like to use tab because it can greatly increase the space for displaying data and display more data in a fixed space. Paging is also required in the application system to facilitate data display. This articleArticleUse jquery to use the tab page in ASP. net mvc and implement the asynchronous pagination function in the tab page. It is estimated that everyone will use this.

Implementing paging in ASP. net mvc has been implemented in the previous blog post: ASP. NET MVC2 right-click menu and simple paging. The implementation method is very simple. Add a section of <A/>... HTML under the table.

First, we will introduce a jquery plug-in: tab, which can be downloaded at http://jqueryui.com/download. Let's take a look at its own example:

Let's take a look at the results of this article:

I

Implementation:

According to its demo, JS, CSS, and jquery are introduced in the Asp.net MVC project. I introduced these files to the Asp.net MVC dashboard page:

     < Link  Href  = "Http://www.cnblogs.com/Content/base/ui.all.css"  REL  = "Stylesheet"  Type  = "Text/CSS"/> <  Script  SRC  = "Http://www.cnblogs.com/Scripts/jquery-1.4.1.js"  Type  = "Text/JavaScript"> </  Script  > <  Script  SRC = "Http://www.cnblogs.com/Scripts/ui.core.js"  Type  = "Text/JavaScript"> </  Script  > <  Script  SRC  = "Http://www.cnblogs.com/Scripts/ui.tabs.js"  Type  = "Text/JavaScript"> </  Script  > 

After the introduction, refer to its demo to use the tab in the view of the MVC project. The getcontenttab function is more than the demo provided by tab. It has two parameters, indicating that you want to display

The page number of the tab page. By default, the first page of tabs-shoes data is displayed.

   <  Script  Type  = "Text/JavaScript"> $ (Document). Ready ( Function () {$ ( "# Tabs" ). Tabs (); getcontenttab ( 'Shoes' , 1 );}); </  Script  > <  Div  ID  = "Tabs"> <  Ul > <  Li  > <  A  Href  = "# Tabs-shoes"  Onclick  = "Getcontenttab ('shoes', 1);"> Shoes </  A  > </  Li  > <  Li  > <  A  Href = "# Tabs-Electronics"  Onclick  = "Getcontenttab ('electronics ', 1);"> Electronics </  A  > </  Li  > <  Li  > <  A  Href  = "# Tabs-food"  Onclick  = "Getcontenttab ('food', 1);"> Food </ A  > </  Li  > </  Ul  > <  Div  ID  = "Tabs-shoes"> </  Div  > <  Div  ID  = "Tabs-Electronics"> </  Div  > < Div  ID  = "Tabs-food"> </  Div  > </  Div  > 

Of course, you must write the Controller'sCodeThere is basically no code:

 
PublicActionresultViewcategory (){ReturnView ();}
 

Now let's start with some important steps. Display table and implement table paging. In this demo, the tab defines three tabs. The table structure of each page is the same, so I define a user control to implement table and paging. The Code is as follows:

 <%  @ Control  Language  = "C #"  Inherits  = "System. Web. MVC. viewusercontrol <mvcajaxpaging. Models. productviewmodel>"  %> <%  @  Import  Namespace  = "Mvcajaxpaging. htmlhelpers"  %>       <  Table  Class  = "Grid"> <  Thead > <  Tr  > <  Th  > Product Name </  Th  > <  Th  > Category </  Th  > </  Tr  > </  Thead > <  Tbody  >  <%   Foreach ( VaR Product In Viewdata. model. Products ){ %>                  <  Tr  > <  TD  >  <%  = Product. Name%>  </  TD  > <  TD  >  <%  = Product. Category %>  </  TD  > </  Tr  >  <% } %>         </  Tbody  > </  Table  > <  Div  Class  = "Pager">  <%  = Html. Pager (viewdata. model. paginginfo. currentpage, viewdata. model. paginginfo. itemsperpage, viewdata. model. paginginfo. totalitems, "" , Viewdata [ "Categorydisplayname" ] As string )%>      </  Div  > 

We use an Ajax call to display this control on the view corresponding to viewcategory and define a JS function:

FunctionGetcontenttab (categoryname, page ){VaRUrl ='<%= URL. Content ("~ /Mypaging/viewbycategory /")%>'+ Categoryname +"/"+ Page;VaRTargetdiv ="# Tabs -"+ Categoryname; $. Get (URL,Null,Function(Result) {detail (targetdiv).html (result );});}
 

Let's look at the code above. We will request the viewbycategory method of the server to obtain the data in the table. View the code of viewbycategory:

 Public  Actionresult Viewbycategory (String Categoryname, Int ? Page) {categoryname = categoryname ?? This . Categories [0]; Int Currentpageindex = page. hasvalue? Page. Value: 0; Productviewmodel Productviewmodel = New  Productviewmodel (); Ilist < Product > Productsbycategory = This . Allproducts. where (P => P. category. equals (categoryname )). tolist (); productviewmodel. products = productsbycategory. skip (currentpageindex-1) * 10 ). take (10 ). tolist (); productviewmodel. paginginfo. currentpage = currentpageindex; productviewmodel. paginginfo. itemsperpage = 10; productviewmodel. paginginfo. totalitems = productsbycategory. count; Return View ( "Viewbycategorytable" , Productviewmodel );}

For the sake of simplicity, the data comes from the memory and the take of the List is used to implement paging. You can easily retrieve data from the database. To see how to generate pagination HTML, we only need to use the getcontenttab function in the generated pagination HTML.

 Public static string Pager ( This  Htmlhelper Helper, Int Currentpage,Int Currentpagesize, Int Totalrecords, String Urlprefix, String Status ){ Stringbuilder SB1 = New  Stringbuilder (); Int Seed = currentpage % currentpagesize = 0? Currentpage: currentpage-(currentpage % currentpagesize ); If (Currentpage> 0) sb1.appendline ( String . Format ("<A href = '# 'onclick = getcontenttab (\" {0} \ ", \" {1} \ ")> previous </a>" , Status, currentpage )); If (Currentpage-currentpagesize> = 0) sb1.appendline ( String . Format ( "<A href = '# 'onclick = getcontenttab (\" {0} \ ", \" {1} \ ")>... </a>" , Status, (currentpage-currentpagesize) + 1 )); For ( Int I = seed; I < Math . Round (totalrecords/currentpagesize) + 0.5) & I <seed + currentpagesize; I ++) {sb1.appendline ( String . Format ("<A href = '# 'onclick = getcontenttab (\" {0} \ ", \" {1} \ ") >{1} </a>" , Status, I + 1 ));} If (Currentpage + currentpagesize <= ( Math . Round (totalrecords/currentpagesize) + 0.5)-1) sb1.appendline ( String . Format ( "<A href = '# 'onclick = getcontenttab (\" {0} \ ", \" {1} \ ")>... </a>" , Status, (currentpage + currentpagesize) + 1 )); If (Currentpage <( Math . Round (totalrecords/currentpagesize) + 0.5)-1) sb1.appendline ( String . Format ("<A href = '# 'onclick = getcontenttab (\" {0} \ ", \" {1} \ ")> next </a>" , Status, currentpage + 2 )); Return Sb1.tostring ();}

Effect:

II:

Figure 3:

Summary:In Asp.net MVC, asynchronous pagination is implemented on tab pages without refreshing new pages. This is too common. Here, I hope it will help you.

Code: http://cid-aef1e64945224a20.office.live.com/self.aspx/.Public/MvcAjaxPaging.rar