Updatepanelanimationextender on updating

In this article, we will study three different techniques that allow you to visually display progress to users while performing partial-page updates using the Update Panel.

For all the three approaches, I have used a image to show a spinning gear kind of a progress bar while the Update Panel is performing some action.

The image can be found with the source code for this article over here.

updatepanelanimationextender on updating-18

This class defines client events that you can use during an asynchronous request cycle.Let us see how to use some events of this class to display progress to the user while the Update Panel updates its contents.As shown in the code above, we first get a reference to the Page Request Manager and then wire up the initialize Request and end Request events to execute, when an async postback begins and ends respectively.When the user initiates a postback by clicking on the button kept inside the Update Panel, we set a delay of 3 seconds.To display progress to the user, we handle the Initialize Request at the client side and set the to visible.

This shows up the image with the progress as shown below.

The button that caused the postback is disabled during this event, so in order to prevent users from hitting the button again.

Another very simple option to display progress during an async postback is to use the Update Progress control.

You can use this control to display status information to the user, while the Update Panel updates its content.

In the example below, we use the same to display progress while the Update Panel is updating its content.

For understanding purposes, we have emulated a time consuming operation by setting a delay of 3 seconds by using Thread. In the code shown above, we use the Associated Update Panel ID property of the Update Progress control to associate it with an Update Panel control.