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

11 thoughts on “Ajax Popup “Procesando”

  1. Antoni Nerin says:

    Tengo en un formulario 2 botones, Aceptar y Cancelar.
    Al pulsar el Aceptar, se presenta el ModalProgress, se jecutan los cálculos, etc. y se desactiva el ModalProgress.
    En este momento deberia desactivar toda una serie de controles para volver a ejecutar los cálculos con otra selección, pero no lo hace hasta que pulsas por segunda vez alguno de los 2 botones anteriores.
    ¿Como de podria resolver?

    • Hola..

      De hecho el funcionamiento es ese, los botones que tienes estan dentro de un AJAX UpdatePanel, es por eso que solo cuando presionas uno de los botones se muestra el Modal, hasta que el proceso termine, si requieres mostrarlo en otro lugar en otro evento solo tienes que forzarlo manualmente.

      ModalProgress.Show();
      ModalProgress.Hide();

      Saludos

      • Antoni Nerin says:

        Gracias por la respuesta, pero ¿Como se tendria que especificar?

        Te pongo lo que tengo en VB que es en lo que estoy trabajando, pero me puedes responder en C#

        ========================================================
        ASP:

         

         

        ========================================================
        Protected Sub cmdAceptar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdAceptar.Click

        If Page.IsValid Then
        actualitzarParametres()
        RemesesRebuts(lblAccio.Text)

        Amaga_Dades()
        tbSeleccio.Visible = True
        tbButons.Visible = False
        End If

        End Sub

        ========================================================
        Protected Sub cmdCancelar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdCancelar.Click
        Amaga_Dades()
        tbSeleccio.Visible = True
        tbButons.Visible = False
        End Sub

        ========================================================

        y no encuento la manera de hacer que una vez que una vez termine el CmdAceptar o el cmdCancelar, ejecute lo que yo necesito, ya que hasta que no lo ejecuto por segunda vez, no reacciona.

        Gracias por tu paciencia

  2. Antoni Nerin says:

    Los ASP desaparecen, per es una celda con

    UpdatePanel ID=”updatePanel” runat=”server”
    ContentTemplate
    Button ID=”cmdAceptar” runat=”server” Text=”Acceptar”
    Button ID=”cmdCancelar” runat=”server” CausesValidation=”false” Text=”Cancel·lar”
    ContentTemplate>
    UpdatePanel

    Espero lo entiendas

    • Hola..

      Tal vez no comprendo muy bien cual es el problema o lo que deseas hacer…
      Pero te explico.. El boton Guradar, que es el que desencadena el Modal, va dentro de un UpdatePanel debido a que quiero que el procesamiento sea asincrono, al hacer clic en este, se ejecuta el codigo Javascript BeginRequest en donde muestro el Modal.

      Cuando termina el procesamiento asicrono, automaticamente se ejecuta EndRequest y ahi lo escondo.

      Si lo quieres hacer de manera manual, tendras que quitar el Javascript y mostrar el popup dentro de codigo c# o vb pero no sera asincrono, es decir mientras que el popu este activo no podras hacer nada mas…

      Saludos

      • Antoni Nerin says:

        El problema es el siguiente:
        Tengo una pantalla ASP en la que se van siguiendo unos pasos para al final generar una remesa de recibos.
        Segun vamos pasando pasos, aparecen uns opciones de selección u otras.
        Al final de todos los pasos, aparecen 2 botones: “Aceptar” “Cancelar” que son los que lanzan el JavaScript.
        Una vez ha finalizado el proceso, quiero regresar, automáticamente, al inicio del proceso, para que, si es el caso, poder efectuar otra selección distinta y poder generar otra remesa.

        Es en este punto, al terminar de generar la remesa anterior, que se queda en el punto de “Aceptar”, y no regresa al punto de inicio, salvo que vuelvas a pulsar “Aceptar” o “Cancelar”.

        Espero me haya explicado, ya que no quiero que el programa se quede en esta posición. Si se vuelve a pulsar “Aceptar”, no ejecuta el JavaScript, pero si genera una nueva remesa, y es esto lo que quiero evitar.

        Gracias por tu paciencia

        • Es bastante parecido a lo que yo lo uso, yo tengo un formulario donde se da de alta una orden de pago, al hacer clic en guardar, se revisan algunos parametros, se almacena en una BD y se envia un correo electronico, todo esto ocupa mucho tiempo (a veces) es por eso que necesitaba implementarlo, y asi los usuario se dieran cuenta que la orden se estaba procesando.

          Te envio por correo, un codigo ejemplo que acabo de hacer.

          Saludos

  3. Roman says:

    Hola,
    ahora se me esta presentado un problema similar, quiero hacer una consulta a una bd pero en ocasiones tarda un poco, y quiero mostrar una imagen indicando que se esta cargando la pagina, nada mas que estoy teniendo problemas al querer mostrarla en mi web form.
    te agradecería bastante si me pueden orientar un poco, ya que llevo varios días buscando información sobre este tema,

    saludos!

  4. Maio says:

    Funciona de maravilla, sólo una cosa, la ventana modal que genera se cierra mucho antes de que termine el procedimiento almacenado de SQL Server.

    ¿Podrías darme alguna sugerencia de lo que me puede estar ocurriendo?

    • La verdad no se que pueda estar pasando, se supone que JavaScript lo hace de forma automática cuando detecta funcionamiento asíncrono y cuando termina de hacerlo, a mi me funciono excelente

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.