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.