ATENCIÓN AL CLIENTE: +34 923 199 148

Mensaje de espera en AJAX con C#

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 120×128 px aunque luego lo hemos reducido con las reglas CSS.

Quizá te interese...

Deja un comentario...

Suscribirme
Notificación de
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios