Como Poner un mensaje de Espera bien Nice.

Primero debes tener conocimiento minimos de AJAX
para una mejor definición de conceptos, dejo que WikiPedia te ilustre:
http://en.wikipedia.org/wiki/ASP.NET_AJAX
 
Una vez Aprendido sobre el ScriptManager y el UpdatePanel, te explico:

cuando un proceso de tu UpdatePanel se demora un poco mas de 3 segundos, se hace necesario
indicarle al usuario, por medio de un mensaje, que se esta procesando algo, de lo contrario este
creera que algo malo paso, o se congelo el proceso , etc.

A esto yo le llame AjaxLoadPro:

El escenario es el siguiente: tienes un MasterPage con un Scriptmanager, con paginas que la heredan y en esas paginas tienes UpdatePanel para hacer tus procesos mas profesionales.

A Los UpdatePanel tu puedes agregarles el Progress, en el cual vas a poner un mensaje con una imagen indicando que
se esta procesando algo y hay que esperar a que termine, una vez terminado se retira el mensaje.
Pero tendrias que hacer esto para cada UpdatePanel, y si cambias el mensaje o la imagen, tendrias que irte a cada
pagina y a cada Update Panel, uff esto es tedioso y no es optimo para los que lo usen.

LoadAjaxPro te hace lo mismo que el Progress, pero Centralizado en el MasterPage.

Te explico como usar:

Primero: debes tener dos archivos y ubicarlos en tu proyecto:
1. Load.css: este va a manejar todo lo referente al estilo de tu mensaje.
2. AjaxLoad.js: este tiene el codigo para el manejo del RequestBegin y RequestEnd

   Como veras en el código, PageRequestManager es el objeto que inicia y termina los procesos de Request disparando los eventos para habilitar o desabilitar la pagina.

   Page = Sys.WebForms.PageRequestManager.getInstance();

A estos eventos le atas las funciones que quieres correr

  Page.add_beginRequest(OnBeginRequest);

  Page.add_endRequest(endRequest);

Cuando se Disparen los eventos beginRequest o endRequest, cada uno ejecutara su proceso correspondiente.

 function OnBeginRequest(sender, args)
    {   
     var parentDiv = $get("IMGDIV");
     parentDiv.setAttribute("class", "modalProgressGreyBackground");    
     $get("IMGDIV").style.display="";
    }

     function endRequest(sender, args)
    {
     $get("IMGDIV").style.display="none";
    }

  Aqui esta a tu imaginación, para el ejemplo yo utilizo un Div centreado a la pagina del MasterPage. Claro
en el MaterPage deberas poner el objeto DIV como te indico a continuación en el segundo punto.

Segundo: ok entonces ya pusiste estos archivos dentro de tu proyecto, una vez hecho esto.. solo debes ir a tu MaterPage y debajo de Title pones el LINK de estos dos archivos:

    <title>Untitled Page</title>
    <link href="/css/load.css" rel="stylesheet" type="text/css" />
    <script src="js/ajaxload.js" type="text/javascript"></script>

Claro la ruta depende de donde pusiste tus archivos, para mi caso cree una carpeta (css) para mis estilos y otra carpeta (js) para mis archivos de javascript.

Tercero: esto es lo ultimo, ahy mismo en el MasterPage, debajo de tu scriptmanager colocas tu DIV..

<form id="form1" runat="server">
     <asp:ScriptManager
            ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
    <div id="IMGDIV" class="ModalProgressContainer" style="display:none;border:0; vertical-align:middle;">
        <div class="oneMoment">
        <img src="Images/indicator.gif" alt="" style="border:0" >
        One Moment Please...
        </div>
    </div>

Te puse el pedazo de codigo para que no te pierdas a la hora de ponerlo. Como pudes ver todas las class declaradas en los controles ya estan en tu codigo load.css, solo te faltaria tener un buen icono de esos tipo AJAX.

Yo te voy a poner todo el codigo andando en un proyecto hecho en VS2008 asp.net c#, para que puedas verlo o probarlo.
en ese proyecto podras ver las imagenes usadas, si quiere podes cambiarlos a tu imaginacion.

Saludos...

AjaxLoadPro.zip (27,22 kb)

Tags: