This article is currently in the process of being translated into Spanish (~29% done).

Controls:

UpdateProgress control

Uno de los problemas con Ajax, es el hecho de que al ser asíncrono y funcionar en segundo plano, el navegador no mostrará ningún estado. Con servidores y métodos rápidos, esto no es un gran problema. Por otra parte, si tienes un método que toma un poco más de tiempo, el usuario tenderá a impacientarse.

Afortunadamente, ASP.NET AJAX también resuelve este problema, con un control llamado UpdateProgress. Este control, usará tu propio modelo para mostrar que un método asíncrono está trabajando. Mira el siguiente ejemplo, en el podrás ver el control en acción. Este será explicado mas adelante.

<%@ 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>

El siguiente método debe ser añadido en el CodeBehind de tu archivo:

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