-Pager paging control Ajax partial refreshing (MVC example)

The use of the pager paging control was recorded last time. Now, the problem arises again. How can I refresh the page without modifying the URL? URL changes, causing page changes. So I have to study the pager control again. Next I will introduce how to use the Ajax Implementation of the pager paging control. If you cannot understand it, refer to my other article first, pager open-source controls (MVC):

First, create a local view:

Note that you need to select "create as branch view", because this demo is already a branch view to implement partial Ajax refresh.

What we need to do after creating a view is to get rid of the default data on this page. The complete page is like, for your reference:

 1   @ Using webdiyer. webcontrols. MVC @ * Reference The namespace and add the pagelist wildcard to the model *@  2 @ Model pagedlist <  Pagertest  . Models. view_saleteachercours  >  3   < Div  ID  = "Prolist"  >  4       <  Table  >  5       <  Tr  >  6           <  Th  > Course name </ Th  >  7           <  Th  > Instructor name </  Th  >  8       </  Tr  >  9   @{  10       11  Foreach (VAR item in Model)  12   {  13               <  Tr  > <  TD  > @ Item. Name </  TD  >  14               <  TD  > @ Item. Username</  TD  >  15               </  Tr  >  16   }  17   }  18       <  Tr  >  19       </  Tr >  20       </  Table  >  21   @ Ajax. Pager (model, new pageroptions () {pageindexparametername = "ID"}, new ajaxoptions {updatetargetid = "prolist "})  22    23   </  Div  > 

This page is critical. The namespace reference will not be mentioned first. Note the following:
@ Ajax. Pager (model, new pageroptions () {pageindexparametername = "ID"}, new ajaxoptions {updatetargetid = "prolist "})

The main point of this sentence is to wrap it in Div id = "prolist", and pay attention to this sentence updatetargetid = "prolist". prolist is the ID of the div.

The page is complete.

Let's do what everyone is familiar:

Open the controllers to be paged:

 Using  System;  Using  System. Collections. Generic;  Using  System. LINQ;  Using  System. Web;  Using  System. Web. MVC;  Using  Pagertest. models; Using  Webdiyer. webcontrols. MVC;  Namespace  Pagertest. controllers {  Public   Class  Ordercontroller: controller {dbdatacontext DB = New  Dbdatacontext ();  Public Actionresult msajaxproduct ( Int ? ID, Int Proid = 1 ) {Pagedlist <View_saleteachercours> List = dB. view_saleteachercours.topagedlist (ID ?? 1 , 2  );  If  (Request. isajaxrequest ())  Return Partialview ( "  Produclist  "  , List );  Return  View (list );}}} 

Next, we will introduce topagedlist (ID ?? 1, 2) by default, 1st pages are displayed, with 2 rows per page.
Then look at the view:

CompleteCodeFor reference:

 1   @ Using webdiyer. webcontrols. MVC  2 @ Model pagedlist <  Pagertest  . Models. view_saleteachercours  >  3   @{  4   Viewbag. Title = "msajaxproduc ";  5   } 6   7   8 @* <  Script  SRC  = "Http://www.cnblogs.com/Scripts/jquery-1.4.4.min.js"  Type  = "Text/JavaScript"  > </  Script  >  *@  9 @* <  Script SRC  = "Http://www.cnblogs.com/Scripts/MicrosoftAjax.js"  Type  = "Text/JavaScript"  > </  Script  >  *@  10 @* <  Script  SRC  = "Http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js"  Type  = "Text/JavaScript" > </  Script  >  *@  11   <  Script  SRC  = "Http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.min.js"  Type  = "Text/JavaScript"  > </  Script  >  12    < H2  > Example of using microsoftajax for ASP. net mvc Pager </  H2  >  13   14   @{  15   Html. renderpartial ("produclist", model );  16 }

I have tested the first three script references one by one. It does not matter to me, And the page is still refreshing. The reference is required for 4th scripts, however, local refresh cannot be implemented.
Of course, these do not need to be downloaded. They are included in the script folder of the project. I will drag them and use them. If you want to standardize them, @ URL is required for src. content (.....) to fill. Let's just say, don't make bricks. (^. ^ ).

Take a look at my:

 

~~~ URL note

Next page:

Completed demo creation. O (distinct V Branch) O ~~

Send the attachment --. Mail also trouble: http://files.cnblogs.com/x-xk/PagerTest.zip