Atlas, AJAX para ASP.NET: el UpdateProgress

Otra maravilla del Atlas es el control UpdateProgress... el propio nombre lo define, no?

Simplemente se trata de un control que muestra un mensaje mientras dura una ida y vuelta AJAX al servidor.

Siguiendo con el ejemplo explicado en el artículo sobre el UpdatePanel, tendremos un Button y una Label. La Label estará dentro del ContentTemplate de un UpdatePanel, y en el apartado de Triggers del UpdatePanel, cazamos el evento Click del Button, de modo que el efecto final será que cuando se haga clic sobre el Button, la Label actualizará su valor a la hora en que estamos.

Y para conocer el efecto del UpdateProgress, vamos a imponer que la ida y vuelta al servidor tarde 5 segundos, y mientras tanto queremos que se muestre el mensaje "Cargando Datos...". El código es más corto que la propia explicación:

NuestroCodeBehind.aspx.cs
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
        System.Threading.Thread.Sleep(5000);
    }


NuestroEjemplo.aspx
        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
        </atlas:ScriptManager>
        <atlas:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Cargando datos...
            </ProgressTemplate>
        </atlas:UpdateProgress>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>           
            </ContentTemplate>
            <Triggers>
                <atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </atlas:UpdatePanel>


Como vemos, dentro del UpdateProgress definimos un ProgressTemplate, dentro del cuál podemos poner absolutamente lo que queramos. Desde un simple texto (como es el caso) hasta una imagen o todo lo que se nos ocurra.

De hecho, lo único que ocurre es que lo que está dentro del UpdateProgress estará dentro de un <div /> con style="display:none;", y cuando se ejecuta una llamada AJAX, lo que hay dentro de ese div se mostrará, hasta que la llamada AJAX sea devuelta y de nuevo deje de mostrarse.