How to use AjaxPaging in your MVC application

Hi again!! I guess if you are here it’s because you have already been at my previous post (Ajax Paging with ASP.NET MVC). If you did not, I recomend you to read that one first (and Martijn Boland related post also!!!).

Well, let’s start with the implementation of the AjaxPaging in your application.

(Download sources)

In order to implement Ajax Paging in your application, you will first need to move the grid you are going to paginate to an user control outside the view page. It will looks like this:

Without AjaxPaging	With AjaxPaging

Why to do this? Because we will need to change the controller action result depending if the request is a normal request or an ajax one.

This means in your controller action code:

Without AxajPaging	With AjaxPaging
return View("ProductsByCategory", productsByCategory);	if (Request.IsAjaxRequest())                 return PartialView("ListControlByCategory", productsByCategory);             else                 return View("ProductsByCategory", productsByCategory);

Why? Because in the non ajax code, you always returns the full view, but using ajax the idea is to refresh only a part of the screen. For that, we need to define wich is the part we are going to refresh, and then add the logic to our controller to render only that part in response to an ajax call!!

If you open the ProductsByCategory.aspx page, you will find that in the place that it use to be a table definition and all the foreach magic to render the grid, now it is only this:

And there is something very important!! The div with id=”divGrid” is one of the important parts for the AjaxPaging to work!! Now we will see why.

Inside the ListControlByCategory.ascx control you will find first the grid rendering code ( table and foreach magic ) and also this:

Let’s explain the parameters that are being passed to the Ajax.Pager method:

UpdateTargetId: This is one of the most important parameters! And as you are already thinking… it is related to the name of the div we have already seen up in this post. This parameter says where is the html that is going to be replaced when the ajax call have finished.

OnBegin, OnSuccess and OnFailure: This parameters provides some extra hang points just if you want to take some fine grained access to the ajax call steps. (You will find in the demo solution that the ajax call is using some JQuery effects when paging…)

I guess you don’t need the PageSize, PageNumber or TotalItemCount parameters to be explained… they are self explicative.

Finally, the route information where we want to made the Ajax call. This demo is a very simple scenario… but you would like to make the request to another method (not the same who rendered the view the first time) or perhaps you will find an scenario with two grids inside the same view!! (Think about! I already tested it and works great!!)

Well, that’s all for now…!!

Hoping it will be usefull for somebody!

Etiquetas de Technorati: ASP.NET MVC,Paging,Ajax,AjaxHelper,MVC

(Download sources)