Update: If you’re looking for something more graphical, also see my example of using a CSS style as AJAX progress indicator.

The ASP.NET AJAX UpdatePanel control provides us a quick and easy way to AJAX enable websites without changing our familiar design patterns. It’s certainly much better than using full postbacks in many situations.

However, it lacks usability. While the user waits on the async postback to occur, they are left without any of the usual indicators. We’ve spent decades training our users to wait when they see an hourglass icon. Why throw all that away for a spinning Web 2.0 progress indicator that means little to an average user?

Luckily, the ASP.NET AJAX framework provides us with tools to correct this shortcoming.

We’ll start with a run of the mill UpdatePanel setup:

This is how it works with just an UpdatePanel:

First, we need to expand the Container div to fill the entire page using CSS:

Next, we need to hook and handle the initializeRequest and endRequest events exposed by the ASP.NET AJAX framework, using this JavaScript embedded in the page anywhere after the ScriptManager control:

To further enhance usability, we can disable the update button for the duration of the async postback:

Now, we have a much better user experience:

Of course, this is only the tip of the iceberg. The code could use some refinement, but it demonstrates the concept well.