Mensaje de espera en AJAX con C#

C#
Autor: Dámaso Velázquez Álvarez
Ordenador mostrando un mensaje de espera mientras procesa datos
Ordenador mostrando un mensaje de espera mientras procesa datos

Cuando un sistema informático está procesando información, el usuario debe saberlo y una forma de saberlo es mostrando un mensaje que así lo indique.

Vamos a ver un ejemplo sobre cómo mostrar dicho mensaje (en nuestro caso es un gif animado de espera a modo de reloj) en CSharp, utilizando un UpdateProgress. El código a procesar estará dentro de un UpdatePanel.

Inicialmente tenemos que implementar las siguientes reglas CSS:

.actualizando_principal
{
    background-color: #333333;
    filter: alpha(opacity=60);
    opacity: 0.60;
    width: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    height: 100%;
}

.actualizando
{
    margin:auto;
    filter: alpha(opacity=100);
    opacity: 1;
    font-size:small;
    vertical-align: middle;
    top: 35%;
    position: fixed;
    right: 45%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    background-color: #ffffff;
    height: 128px;
    width:128px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

.actualizando img
{
    width:60px;
    height:64px;
    margin-left:auto;
    margin-right:auto;
    margin-top:32px;
}

Ahora veamos nuestro UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <!-- Componentes producen procesamiento -->
    <ContentTemplate>
</asp:UpdatePanel>   

Y finalmente veamos el UpdateProgress:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div class="actualizando_principal">
            <div class="actualizando">
                <asp:Image ID="imgEsperando" ImageUrl="/cargando.gif" runat="server" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

En nuestro ejemplo hemos utilizado un fichero gif de 120x128 px aunque luego lo hemos reducido con las reglas CSS.