Cómo mostrar una imagen (gif) de procesando en asp.net

By | 2010/08/27

Realicé una aplicación que dependiendo del número de registros que debía procesar tomaba cierto tiempo en dar respuesta por lo que los usuarios se desesperaban.
La solución fue agregar una imagen (gif) de procesando mientras esto ocurria.
Para esto debemos colocar lo siguiente en el código aspx:

<span id=’procesando_div’ style=’display: none; position:absolute; text-align:center’>
<img src=” id=’procesando_gif’ align=’center’ />
</span>

Luego en el botón o link que activa el procedimiento que causa la demora agregamos:

<asp:Button ID=”btn_salvar” runat=”server” CssClass=”recuadro” Text=”Salvar” OnClientClick=”mostrar_procesar();” />

En el HEAD debemos agregar la función javascript que muestra la imagen de procesando:

<script type=’text/javascript’ language=’javascript’>
function mostrar_procesar()
{
document.getElementById(‘procesando_div’).style.display =””;
setTimeout(‘document.images[“procesando_gif”].src=”images/ajax-loader.gif”‘, 200);
}
</script>

Si no poseen de un Gif animado que muestre “procesando” pueden generar uno en esta dirección ajax-loader

6 thoughts on “Cómo mostrar una imagen (gif) de procesando en asp.net

  1. superjau

    Buenos días! Me ha sido bastante útil tu solución.

    Unicamente comentar que le veo un pequeño fallo que estoy tratando de resolver.

    Se trata de que si tienes una validación de campo (por ejemplo, un campo requerido) y le das al botón, te aparece el mensaje de que “el campo es necesario” pero la barra de progreso se inicia… aunque realmente no está haciendo ningún proceso aún.

    No se si me he explicado jejeje

    En definitiva, muchas gracias por el aporte… a ver si consigo solucionar el problemilla que comento.

  2. Dunderio

    Has que en el javascript verifique que no aparezca el texto de el campo es requerido. Si detecta esto no corra la función.

  3. Drakenaton

    Dunderio.Muy interesante el articulo. Si no es mucho pedir, podrias poner un ejemplo acerca de lo que le habias dicho a superjau?Acerca del javascript verifique que no aparezca el texto de el campo es requerido.

  4. Dunderio

    Seguro Drakenaton,

    Sería algo así suponiendo que el campo requerido tenga el ID “nombre_completo”
    function mostrar_procesar()
    {
    var nombre;
    nombre=forma.nombre_completo.value;
    if (nombre!=”)
    {
    document.getElementById(‘procesando_div’).style.display =””;
    setTimeout(‘document.images[“procesando_gif”].src=”images/ajax-loader.gif”‘, 200);
    }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.