Usar UpdateProgress Para Cubrir La Pantalla

Como mencione en otro post, AJAX es utilizado para hacer las paginas web mas interactivas y responsivas. Vimos que el control UpdatePanel es una manera fácil de añadir funciones AJAX a una pagina web.

Pero hay ocasiones en que una operación no se puede completar muy rápido, así que para el usuario puede parecer como que nada esta pasando en la pagina.

ASP.NET ofrece el control UpdateProgress para mostrar contenido HTML al usuario mientras el navegador esta esperando que una operación AJAX termine.

Por favor observa que un control UpdateProgress puede ser asociado con un control UpdatePanel en especifico o puede ser disparado por cualquier UpdatePanel en la pagina.

Crea una Aplicación Web ASP.NET.

Abre la pagina Default.aspx y copia el código siguiente.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="CoverScreen._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <style type="text/css">
        .overlay  
        {
    	    position: fixed;
    	    z-index: 98;
    	    top: 0px;
    	    left: 0px;
    	    right: 0px;
    	    bottom: 0px;
            background-color: #aaa; 
            filter: alpha(opacity=80); 
            opacity: 0.8; 
        }
        .overlayContent
        {
    	    z-index: 99;
    	    margin: 250px auto;
    	    width: 80px;
    	    height: 80px;
        }
        .overlayContent h2
        {
            font-size: 18px;
            font-weight: bold;
            color: #000;
        }
        .overlayContent img
        {
    	    width: 80px;
    	    height: 80px;
        }
    </style>

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

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Click Me" onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div class="overlay" />
            <div class="overlayContent">
                <h2>Loading...</h2>
                <img src="Images/ajax-loader.gif" alt="Loading" border="1" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>

</asp:Content>

Primero tenemos una sección style. La clase overlay será utilizada para cubrir la pantalla con un div semitransparente. El div será hecho visible por el control UpdateProgress cuando sea necesario.

Para utilizar los controles UpdatePanel y UpdateProgress necesitamos agregar un control ScriptManager.

Después agregamos el UpdatePanel con un botón para disparar un postback asíncrono.

Finalmente agregamos el control UpdateProgress. Este control tiene los elementos div que serán hechos visibles cada vez que el botón sea presionado. El primer div cubrirá toda la pantalla gracias al estilo que definimos anteriormente. Después mostramos otro div con un texto y una imagen en el centro de la pantalla.

Para la imagen cree un gif animado en http://ajaxload.info/.

En este ejemplo asociamos el UpdateProgress con el UpdatePanel explícitamente. Esto no es realmente necesario ya que solo tenemos un UpdatePanel en la pagina.

Ahora editemos el código detrás.

using System;

namespace CoverScreen
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

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

Todo lo que hacemos aquí es pausar el subproceso (thread) por 3 segundos cuando el botón es presionado para que podamos ver el UpdateProgress en acción.

Ejecuta el proyecto.

Haz clic en el botón.

El texto Loading y la imagen aparecerán por 3 segundos.

Puedes descargar el código de este ejemplo aquí.

Por favor deja tus comentarios.