A couple things to note. You’ll notice that the AJAX control is rendered inside a Ajax.BeginForm. This is because I’m using the Microsoft.Ajax way of making AJAX calls. This could also be done using jQuery or something else that can process AJAX calls. I just went this way because the scripts are already included in asp.net mvc app when you first create the project. The result of the AJAX call will be a partial view, and we’ll need to put that somewhere. That’s where the UpdatedTargetId comes into play. Other things we include in the AJAX control that are not in the original are the Action and the Controller, and some AjaxOptions. PageActionLink doesn’t work with the AJAX control, because we’ll be using Ajax.ActionLink to build the link, which is why I broke it up into Action, and Controller. For the AjaxOptions, we need those to specify the target of the call.
So now that’s been explained, let’s look at the controls themselves. Here’s a comparison of the original control and the ajax control.
The big difference here is the way that the links are generated. The original control simply creates an anchor tag and passes in the url generated by the Model. The AJAX control uses AJAX.ActionLink() instead, so we can have the link support AJAX.
So knowing how the control looks, this is the Model for the AJAX control itself:
That pretty much explains how the control is built.
The only thing left is how the interaction with PagedList happens. For that we look at the action that the control calls. In this example, we’re calling SomeAction in SomeController, and it would look something like this: