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)

Ajax Paging with ASP.NET MVC

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

First of all, I want to give thanks to Martijn Boland for the MVC Paging Solution (wich was the base for my addition).

Why to give thanks? Because it was really easy to understand and also to add functionality to it!!!! Awesome!!!!

Before going on, I strongly recomend you to visit his paging post first to have an initial aproach about the MVC Paging. I’m going to explain the AJAX added features only in this post.

(Download sources)

You will find I have added two clases to the original MvcPaging solution. - AjaxPagingExtensions.cs - AjaxPager.cs This two files were all the necesary additions to made the Ajax paging possible.

The AjaxPagingExtensions class:
Inside the AjaxPagingExtensions.cs file you will find all the overloaded extension methods for the AjaxHelper type. This methods are pretty much the same than the ones on PagingExtensions.cs (I did a quick copy and paste indeed :-)) but this new ones take an AjaxOptions as second parameter.

The AjaxPager class:
Once again, you will find that it is almost the same than the content of the Pager.cs file (copy and paste strykes again!!). The only changes I had to made were:

1- Change the constructor in order to receive some additional parameters (like AjaxOptions) and the AjaxHelper itself.

2- Change the GeneratePageLink method, where I only had to pass the responsability of making the link to the AjaxHelper.ActionLink method.

And… that is all about the MvcPaging library… but not all about making AjaxPaging possible.

You will find inside the Demo solution how to add ajax paging to your code. And, you can see my new post explaining how to add paging to your Mvc application.

I hope you will find it usefull!!!

(Download sources)