icono de "carga" de ajax con las devoluciones de datos de UpdatePanel

Tengo un formulario que se crea dinámicamente según la selección del usuario usando Ajax (construido en .NET Ajax con UpdatePanel).icono de "carga" de ajax con las devoluciones de datos de UpdatePanel

¿cómo puedo insertar un ícono de carga de ajax "estándar" (tal vez tenerlo conectado al puntero del mouse) mientras se está produciendo la devolución de datos y luego eliminarlo cuando finaliza la publicación?

Tengo el AjaxToolKit instalado si eso ayuda.

Fuente

2010-05-11 Kyle

uso UpdateProgress del kit de herramientas: espero que esto le ayudará a

<asp:updatepanel id="ResultsUpdatePanel" runat="server">  
<contenttemplate> 

<div style="text-align:center;"> 
    <asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="ResultsUpdatePanel" dynamiclayout="true"> 
         <progresstemplate> 

          <img src="support/images/loading.gif"> 

         </progresstemplate> 
        </asp:updateprogress> 

        </div> 

//your control code 
</contenttemplate> 
</asp:updatepanel>

Fuente

2010-05-11 19:06:37

Uso siguiente código ...

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:ScriptManager ID="ScriptManager1" runat="server"> 
      </asp:ScriptManager> 
    <asp:UpdateProgress ID="updProgress" 
    AssociatedUpdatePanelID="UpdatePanel1" 
    runat="server"> 
     <ProgressTemplate>    
     <img alt="progress" src="images/progress.gif"/> 
      Processing...    
     </ProgressTemplate> 
    </asp:UpdateProgress> 

    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:Label ID="lblText" runat="server" Text=""></asp:Label> 
      <br /> 
      <asp:Button ID="btnInvoke" runat="server" Text="Click" 
       onclick="btnInvoke_Click" /> 
     </ContentTemplate> 
    </asp:UpdatePanel>   
     </div> 
    </form> 
    </body> 
</html> 


protected void btnInvoke_Click(object sender, EventArgs e) 
{ 
    System.Threading.Thread.Sleep(3000); 
    lblText.Text = "Processing completed"; 
}

Fuente

2012-03-01 06:00:08

Aquí he encontrado algo de JavaScript para hacer proceso de actualización de sí mismo y también se puede poner en cualquier lugar de la página y funciona cualquier panel de actualización en la página.

<script type="text/javascript"> 
      // Get the instance of PageRequestManager. 
      var prm = Sys.WebForms.PageRequestManager.getInstance(); 
      // Add initializeRequest and endRequest 
      prm.add_initializeRequest(prm_InitializeRequest); 
      prm.add_endRequest(prm_EndRequest); 

      // Called when async postback begins 
      function prm_InitializeRequest(sender, args) { 
       // get the divImage and set it to visible 
       var panelProg = $get('divImage');     
       panelProg.style.display = ''; 
       // reset label text 
       var lbl = $get('<%= this.lblText.ClientID %>'); 
       lbl.innerHTML = ''; 

       // Disable button that caused a postback 
       $get(args._postBackElement.id).disabled = true; 
      } 

      // Called when async postback ends 
      function prm_EndRequest(sender, args) { 
       // get the divImage and hide it again 
        $('divImage').hide();     
        // Enable button that caused a postback 
       $get(sender._postBackSettings.sourceElement.id).disabled = false; 
      } 
     </script>

Fuente

2012-09-01 20:19:56

Después de algunas pruebas limitada encontré que haya un ligero retraso en la adición dinámica de elementos DOM utilizando las del marco '' control. Por el contrario, este método de conectar los eventos JS relevantes dio una respuesta UI instantánea. –

sí, es un poco más rápido, pero si tienes una página grande con mucho dom puedes diferenciar las velocidades de ambos –

Esto funcionó bien para mi situación ya que tengo entre 3 y 7 paneles de actualización en un área y si necesitaba alguna actualización hacer algo de "trabajo" esto me permitió escucharlos a todos y mostrar, esconder y manipular el dom como lo necesitaba, ¡gracias! –

<asp:UpdateProgress ID="updateProgress" runat="server"> 
      <ProgressTemplate> 
       <div class="loading-panel"> 
        <div class="loading-container"> 
         <img src="<%= this.ResolveUrl("~/images/gears.gif")%>" /> 
        </div> 
       </div> 
      </ProgressTemplate> 
     </asp:UpdateProgress> 
     <style> 
      .loading-panel { 
       background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0; 
       position: relative; 
       width: 100%; 
      } 

      .loading-container { 
       background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0; 
       color: #fff; 
       font-size: 90px; 
       height: 100%; 
       left: 0; 
       padding-top: 15%; 
       position: fixed; 
       text-align: center; 
       top: 0; 
       width: 100%; 
       z-index: 999999; 
      } 
     </style>

Cargando imágenes de: http://loading.io/

Fuente

2015-09-22 17:25:26 OldTrain

icono de "carga" de ajax con las devoluciones de datos de UpdatePanel

Respuesta

Cuestiones relacionadas