ajax icône "loading" avec les publications UpdatePanel

J'ai un formulaire qui est construit dynamiquement en fonction de la sélection de l'utilisateur en utilisant Ajax (construit en .NET Ajax avec UpdatePanel). Comment puis-je insérer une icône de chargement ajax "standard" (peut-être l'attacher au pointeur de la souris) alors que la publication est en cours, puis la retirer quand la publication est terminée?ajax icône "loading" avec les publications UpdatePanel

J'ai AjaxToolKit installé si cela aide.

Source

2010-05-11 Kyle

utilisation UpdateProgress du kit d'outils: espérons que cela vous aidera

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

Source

2010-05-11 19:06:37

Utilisez le code suivant ...

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

Source

2012-03-01 06:00:08

ici, je trouve un peu de JavaScript pour rendre le processus de mise à jour vous-même et vous pouvez également mettre n'importe où dans la page et il fonctionne n'importe quel panneau de mise à jour dans la page.

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

Source

2012-09-01 20:19:56

Après quelques essais limités, je trouvai être un léger retard dans l'ajout dynamique d'éléments DOM lorsque vous utilisez 'le cadre ' contrôle. Au contraire, cette méthode de connexion des événements JS pertinents a donné une rétroaction instantanée de l'interface utilisateur. –

oui c'est un peu plus rapide mais peu mais si vous avez une page lourde avec beaucoup de dom vous pouvez différencier les vitesses des deux –

Cela a bien fonctionné pour ma situation puisque j'ai entre 3-7 panneau de mise à jour dans un domaine et si une mise à jour je voulais faire un peu de "travail" cela m'a permis de les écouter tous et montrer et cacher et manipuler le dom comme j'en avais besoin, merci! –

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

Chargement des images de: http://loading.io/

Source

2015-09-22 17:25:26 OldTrain

ajax icône "loading" avec les publications UpdatePanel

Répondre

Questions connexes