AJAX - Using UpdateProgress Control and Status Animation

The UpdateProgress control allows you to display progress/status information on a page while an AJAX callback is in progress. It helps you design a more intuitive UI when a Web page contains one or more UpdatePanel controls for partial-page rendering. If a partial-page update is slow, you can use the UpdateProgress control to provide visual feedback about the status of the update.

You can put multiple UpdateProgress controls on a page, each associated with a different UpdatePanel control. Alternatively, you can use one UpdateProgress control and associate it with all UpdatePanel controls on the page.

At the same time, it also allows you to provide the UI to allow user to cancel the AJAX callback if it is taking too long.

Refer to http://www.asp.net/AJAX/Documentation/Live/overview/UpdateProgressOverview.aspx for more information.

In the simple example below, I will associate one UpdateProgress control to one UpdatePanel controls.

<div>















<asp:ScriptManager ID="ScriptManager1" runat="server" />















<asp:UpdatePanel ID="UpdatePanel1" runat="server">















<ContentTemplate>















<asp:TextBox ID="TextBox1" runat="server" />















<asp:Button ID="Button1" runat="server" Text="Update" onclick="Button1_Click" />















</ContentTemplate>















</asp:UpdatePanel>















<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">















<ProgressTemplate>















<img src="images/3MA_processingbar.gif" />















</ProgressTemplate>















</asp:UpdateProgress>















</div> 

On the code behind,

Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnUpdate.Click 















    System.Threading.Thread.Sleep(4000) 















    TextBox1.Text = System.DateTime.Now















End Sub

As for the loading indicator icon, you can get it from (thanks to Alan Le):

1. http://www.ajaxload.info/
2. http://mentalized.net/activity-indicators/

Sample of indicator gif downloaded from the websites: