Monday, October 27, 2008

Weekly Source Code: ASP.Net AJAX UpdatePanel And UpdateProgress

On the VCC website that I wrote, there is a Sermons web page You will notice that when you select a month it displays a progress animation image at the bottom of the drop down box and within seconds the grid refreshs with the new sermons without reloading the entire web page... This is a good example of an AJAX call that happens when you select the drop down box but did you know that I didn't write any Javascript code to get it working?

To accomplish this I used ASP.Net AJAX in MS Visual Studio.Net 2008 with no Javascript or C# coding. ASP.Net AJAX is part of ASP.Net 3.5 but as a seprate download for ASP.Net 2.0 (MS Visual Studio.Net 2005).

The magic is done by the control with the drop down box and the grid getting wrapped inside the tag of ... the drop down box is a control and the grid is a control, so nothing special about the drop down box or the grid.

Also within the is the control that executes when the is busy updating the page, this gives feedback to the user that something is happening.

You must also add the control since all ASP.Net AJAX pages requires this control.

Thats it! Nothing else required, no JavaScript code... no coding at all!

When the drop down box fire an event when the user chooses a new item the update panel handles the event a-synchronously , fetching the new updated grid and displaying it all the while the update progress controls indicates to the user the busy image.

ASP.Net AJAX makes this easy for you, as a developer since it takes care of all the back-end stuff for you so it generates and handles the JavaScript code etc without you even knowing about it.

No comments: