Ajax Popup “Procesando”

Una forma de “controlar” la paciencia de los usuarios al estarse ejecutando procesos dentro del servidor, es la de mostrar un popup de progreso, deshabilitando la interaccion de cualquier control de la aplicacion.

Comenzamos con el codigo JavaScript que mostrara el Popup

<script type=”text/javascript”>
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args)
{
      // muestra el popup
      $find(ModalProgress).show();
}
function endReq(sender, args)
{
      // esconde el popup
      $find(ModalProgress).hide();
}

var ModalProgress = ‘<%=ModalProgress.ClientID%>’;
</script>

El evento beginRequest se provoca antes de que se inicie el procesamiento de una devolución de datos asincrónica y se envíe la devolución (postback) al servidor.
El evento endRequest se provoca después de que finalice una devolución de datos asincrónica y se haya devuelto el control al explorador.
Si se observa en las funciones de JavaScript se hace Referencia a la variable ModalProgress la cual debe ser creada desde el code-behind para que luego pueda ser utilizada por javascript.

Luego de esto crearemos el control popup.

<asp:Panel runat=”server” CssClass=”modalPopup” ID=”panelUpdateProgress”>
<asp:UpdateProgress ID=”UpdatePrg” DisplayAfter=”0″ runat=”server”>
<ProgressTemplate>
<div style=”position:relative; top:50%; text-align:center; height:100px;”>
<img src=”../../../images/loading.gif” style=”vertical-align:middle” alt=”Procesando…” width=”90px” />
Procesando ….
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<asp:ModalPopupExtender runat=”server” ID=”ModalProgress” TargetControlID=”panelUpdateProgress” PopupControlID=”panelUpdateProgress”
BackgroundCssClass=”modalBackground”>
</asp:ModalPopupExtender>

Y por ultimo, el control que iniciara el proceso.

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:Button ID=”Boton_guardar” runat=”server” Text=”Guardar”
ValidationGroup=”LoginUserValidationGroup” onclick=”Boton_guardar_Click” />
   
</ContentTemplate>
</asp:UpdatePanel>

Es importante que el boton este dentro de un PanelUpdate, ya que asi ajax sabra que es este el evento que procesara asincronicamente.

Fuente: Blog Guillermo G.

Gracias