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:

AJAX: Opening a new web page/document using UpdatePanel

Recently, I'm experimenting with AJAX technology to be used in my web application project.
To get more details on AJAX, you can refer to AJAX main website http://www.asp.net/ajax/.

I'm trying to open up a new window when I click on a Button, not the Hyperlink.
Previously, in ASP.Net, I can just use a Response.Write with a javascript window.open function to do that.

Response.Write("<script>window.open('NewPage.aspx');</script>");

However, with AJAX and it's UpdatePanel, I'm getting an error when I pump in this statement in the code behind.

So, with the help of Google and some useful website link, I found this page, http://delroger.wordpress.com/2008/03/26/ajax-an-update-panel-and-opening-a-new-window/ which solves my problem.

To open up a new page/document, you can use RegisterClientScriptBlock function passing the UpdatePanel as the first parameter, the UpdatePanel's type as the second parameter, and so on.

In the example below, str is a variable that contains the javascript statement to open up the Default.aspx page. Then followed by ScriptManager.RegisterClientScriptBlock function. The NewClientScript name is just a name and you can name it anything you like.

string str;
str = "window.open('Default.aspx');";
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "NewClientScript", str, true);


... continue exploring AJAX ...