Matt BersethA .Net Developer's Blog

I recently used the AJAX.NET framework in a project and I was impressed with how easy it was to implement and how much it improved the usability of our pages.  Our project had quite a few advanced search pages where users can enter in a number of different filters and then hit the search button (usually iteratively - filter/search; filter/search; etc...).  Before the Ajax framework and Ajax Control Toolkit were applied to the pages, each time the user would tweak a filter or request a different column sort, the complete page would refresh.  After adding Ajax to the pages, just the GridView is re-rendered giving the user the much nicer web 2.0 user experience.  Anyway, here are the steps I followed for adding these features to our project ...

Step 1: Download and install the official ASP.NET Ajax Framework
Microsoft released the RTM version of the Ajax framework (previously named Atlas) for .Net 2.0 a few months ago. You can download from http://ajax.asp.net/. The installation is straight forward, but in case you get lost they also provide a video that walks you through the process.

Step 2: Download and install the ajax control toolkit
The toolkit consists of a collection of community developed controls that provide extensions (mostly client side) to the existing controls. The project was started by a group of Microsoft developers, but has since moved to Microsoft’s open source project page (codeplex) and is now community owned. The download is just a zip file so you can unpack it to whatever location you want. Part of the toolkit includes a showcase website that contains interactive pages that you can use to play with the different controls - it is identical to the 'live' demo of the controls that is available at http://ajax.asp.net/ajaxtoolkit/

This is the messiest step. Before you can leverage the Ajax features, you have to add a number of entries to you web.config. I have found the easiest way to do this is to start from a template version of the web.config and then add in any additional settings that are specific to your application. To obtain a template version of the web.config you can navigate to the installation directory of the ASP.NET Ajax Framework (it is located at C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025 on my machine) and use this as your template.   Alternatively, if you are building a new site from scratch you can create a new Web Site based on the ASP.NET Ajax-Enabled Web Site template that is installed as part of Step 1. This will automatically add the required settings into the web.config
Step 4: Add a reference to the AjaxControlToolkit.dll to your web site
1. Create a new tab in the designer toolbox by right clicking and selecting 'Add Tab'.  Name the tab ‘Ajax Toolkit’
2. Right click anywhere in the ‘Ajax Toolkit’ tab and select the ‘Choose Items …’ option
3. Go to the SampleWebSite\bin lder contained in the root folder from where the Ajax Control Toolkit was unzipped to and select the AjaxControlToolkit.dll
After you complete these steps, your toolbox should be populated with the control extensions.

Step 5: Add the GridView
Now you just build a GridView just like normal. In my sample application, I have a single page that looks up OrderDetails from the northwind database using an order id.

Step 6: Add the Ajax.NET components to the page
Now we just need to add the last bit of plumbing. The Ajax framework requires all Ajax enabled pages to contain a ScriptManager. You can drag this item onto the page from the toolbox.

Finally – some fun; partial page rendering (i.e. refreshing the data in our GridView without rerendering the entire page). The Ajax framework requires a couple pieces of information before you can start using partial page rendering.
It needs to know 
The section of the page requires the partial rendering (i.e. our GridView)
The events cause this section to be re-rendered
You declaratively tell the Ajax framework both of these items. You place the contents you would like refreshed inside the ContentTemplate of the ASP UpdatePanel control. You also tell the UpdatePanel what triggers the refresh. In our example, clicking the btnFindOrder causes the GridView to rerender, so we tell the UpdatePanel that the GridView needs to be redrawn whenever the ‘Click’ server side event of the btnFindOrder control is fired.

Step 7: Add an animation extender

While this alone is pretty cool, it gets even better with the UpdatePanelAnimationExtender. A usability issue with the approach above is that the user has no way of knowing that anything is happening which the round-trip is being made back to the server to retrieve the Order information. In some scenarios this may be OK, but if the operation takes longer than a few seconds, it is nice to give the user some visual cues as to what is happening. (If you are running this example at home, try placing a call to Thread.Sleep in the BtnFindOrders_Click)

This issue can easily be overcome by using the UpdatePanelAnimationExtender provided by the AjaxControlToolkit.  We will configure this extender do the following:

• Disable the btnFindOrder button while the operation is in progress
• Fade out the GridView while the search is in progess

To enable this functionality

• Drag the UpdatePanelAnimatorExtender control from the toolbox onto the page
• Set the TargetControlID to the ID of the UpdatePanel you created earlier (udpOrderDetails for the running example)
• Add the Animation nodes as follows in the markup below
  • We are telling the extender to disable and fade-out the btnFindOrder while the panel is updated and re-enable and fade-in when it has finished

Thats it.  Your pages are now ready to be ajax-enabled.