The community is working on translating this tutorial into Italian, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Controls:

UpdateProgress control

One of the problems with Ajax, is the fact that since it's asynchronus and in the background, the browser will not show you any status. With fast servers and fast methods, this is not a big problem, but whenever you have a method which takes up a bit of time, the user is very likely to get impatient.

Fortunately, ASP.NET AJAX solves this problem for us as well, with a nice control called UpdateProgress. It will use your own template to show that an asynchronus method is working. Have a look at the following example, which will show the control in action. It will be explained afterwards.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdateProgress control</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdateProgress runat="server" id="PageUpdateProgress">
            <ProgressTemplate>
                Loading...
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel runat="server" id="Panel">
            <ContentTemplate>
                <asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

The following method should be added to your CodeBehind file:

protected void UpdateButton_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}

This simple example will just show you how easy it is to use the UpdateProgress control. Once the button is clicked, the script sleeps for 5 seconds (don't use code like that in your real projects - it's for demonstrational purposes only!), and the "Loading..." text is displayed on your page. You can use anything in the ProgressTemplate, including ordinary markup and other controls. A common use is an animated GIF, positioned strategically on the page using CSS positioning.

You can even have multiple UpdateProgress controls on the page, and by using the AssociatedUpdatePanelID property, you can make sure that the UpdateProgress is only shown when a certain UpdatePanel is updated.

The DynamicLayout property is nice to know as well. It tells whether or not the page should reserve space for your progress control. If it's set to true, which is the default, the space is dynamic, hence it's not reserved, but taken when the control is shown. If you wish to reserve the space, set this property to false. To see the difference, add the property to our example and change it back and forth.

If some of your postbacks are fast, the UpdateProgress will only be shown for a very short amount of time, resulting in a blinking behavior, which may confuse your users. For that reason, you may specify a minimum amount of time to occur before showing the progress control. This can be done with the DisplayAfter attribute. Specify a number of milliseconds to elapse before showing the progress control, e.g. 2000 if you wish to wait for 2 seconds.

This article has been fully translated into the following languages:

Czech
Thai

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata

UpdateProgress control