Icona "caricamento" ajax con postback UpdatePanel

Ho un modulo che viene creato dinamicamente in base alla selezione dell'utente utilizzando Ajax (integrato in Ajax .NET con UpdatePanel).Icona "caricamento" ajax con postback UpdatePanel

come è possibile inserire un'icona di caricamento standard "ajax" (potrebbe essere collegata al puntatore del mouse) mentre è in corso il postback, quindi rimuoverla al termine del postback?

Ho installato AjaxToolKit se questo aiuta.

fonte

2010-05-11 Kyle

uso UpdateProgress di kit di attrezzi: spero che questo vi aiuterà 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>

fonte

2010-05-11 19:06:37

Usa seguente codice ...

<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"; 
}

fonte

2012-03-01 06:00:08

qui ho trovato un po 'di JavaScript per rendere processo di aggiornamento te stesso e anche si può mettere ovunque nella pagina e funziona qualsiasi pannello di aggiornamento nella pagina.

<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>

fonte

2012-09-01 20:19:56

Dopo alcune prove limitate che ho trovato che ci sia un leggero ritardo nel l'aggiunta dinamica di elementi DOM quando si utilizza il framework '' controllo. Al contrario, questo metodo di collegamento degli eventi JS pertinenti ha dato un feedback immediato sull'interfaccia utente. –

sì è un po 'più veloce ma un po' se hai una pagina pesante con un sacco di dom puoi differenziare la velocità di entrambi –

Questo ha funzionato bene per la mia situazione dato che ho tra 3-7 pannello di aggiornamento in una zona e se qualsiasi aggiornamento volevo per fare un po 'di "lavoro" questo mi ha permesso di ascoltarli tutti e mostrare, nascondere e manipolare il dom come mi serviva, grazie! –

<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>

Caricamento delle immagini da: http://loading.io/

fonte

2015-09-22 17:25:26 OldTrain

Icona "caricamento" ajax con postback UpdatePanel

risposta

Problemi correlati