Mensaje de espera en AJAX con C#

24/02/2015
C#
aspnet, csharp, updatepanel, updateprogress
No hay comentarios

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.