For keeping a fast and comfortable navigation, every control that displays information on different data collections must have an efficient pagination associated. For those of us who would prefer the DataList control, there is an impediment in that because this specific control does not have pagination implemented by default. That was the case on Blocks4.net too; we wanted our products to be displayed using a certain style template and the DataList control was the best alternative. So the pagination issue was solved by implementing a custom paging module that was associated to the DataList. By the way, asp alliance still hosts that great article on DataList paging: http://aspalliance.com/articleViewer.aspx?aId=157&pId . It is not just a great tutorial, but in our case it turned out this is a significantly better paging method than the one offered by the GridView control.

This post is about improving that particular DataList paging method using AJAX controls. We chose to try this approach for the DataList displaying search results and, as a preview for the final result of this, the pagination method without an actual round trip to the server speeds up the browsing of the returned results.

To start up, you should know that in order to use any type of AJAX controls you must include in the page a ScriptManager control. So whether you have to include it in a certain page or in a master page inherited by the page you are working on, make sure the ScriptManager is loaded before trying to load other AJAX controls.

Now, all the code representing the DataList and the paging module associated with it (you can very well already have them grouped in a User Control) must be included in an UpdatePanel – this control should be included in your AJAX Extensions controls tab. To be more precise, the already existing code will become the UpdatePanel’s ContentTemplate. In this manner, all you have to do for refreshing the part of the page containing the DataList is calling the Update() method of the UpdatePanel.

Let’s analyze now the other aspects that have to be taken care of, in order for this to work. The UpdatePanel must have the UpdateMode property set on Conditional. In the code behind page this property must be declared, something like this:

public UpdatePanelUpdateMode UpdateMode   

{ get { return this.ProductListUpdatePanel.UpdateMode; }       

set

{ this.ProductListUpdatePanel.UpdateMode = value; }   

}

The pagination links are probably html anchors that receive some custom URL address for navigating to the next or previous page of items. In that case I suggest replacing them with some LinkButtons, without any PostBackUrl specified and having handled the OnClick event. The method for this event will contain a call for the Update() method I was referring earlier. Another issue that will almost surely appear is related to any parameters you might have sent through page QueryString. It is very likely that the search key or at least the page index would depend on the URLs you were providing to the paging anchors. And now, because the refreshing is done client-side, the QueryString can’t be used for sending such type of information. So, as a replacing alternative, you can create some Session State variables (http://msdn2.microsoft.com/en-us/library/ms178581.aspx). Just make sure those variables are reset in the right place and that aren’t any browser impediments.

Another step in completing this task is signaling the user that the information is being updated. When somebody clicks a link is expecting some action to take place. And especially when only client-side refreshing is involved and if that action takes a few seconds, if the user is not announced about the progress of the action he will think the link has no effect.

For that, we have the UpdateProgress control (located also in the Ajax Extensions control tab). This control has a property called AssociatedUpdatePanelID. Here is where we must specify the ID of our UpdatePanel. The UpdateProgress has a ProgressTemplate element that will contain the text and the animated picture that will show during updating. The UpdateProgress control will show in page during update, but if we don’t want it to display in a modal manner over the whole active page, we can do something so it will overlay only the desired control, the DataList in our case.

Here is a great tutorial for using the UpdateProgress control as a modal overlay: http://weblogs.asp.net/rajbk/archive/2007/01/08/using-the-updateprogress-control-as-a-modal-overlay.aspx .  

Basically, an Extender Control named UpdateProgressOverlayExtender is required for this and the declaration of a couple of CSS classes that will manage the way our UpdateProgress overlays on the desired control.

So now you have an efficient pagination that uses some cool AJAX controls too. With this final note, take a look at the end result in action.