JQuery BlockUI indicateur de progression dans tous les postbacks Asp.net

Question

Je voudrais implémenter un jquery blockUI pour afficher et afficher un indicateur de progression (cercle de chargement) pendant les publications en Asp.Net. Comment puis-je l'implémenter? J'utilise masterpages alors je me demandais si je pouvais implémenter ce code en un seul endroit pour le garder simple. Est-ce seulement possible? Dans l'attente d'entendre vos pensées à ce sujet.

Merci d'avance.

---

J'ai été capable de développer ceci. J'ai inclus les étapes dans les réponses. Faites moi savoir si vous avez des questions.

Answer 1

Je l'ai compris moi-même.

1. Créez un nouveau projet Web Asp.net.

2. Inclure ce qui suit dans le balisage Site.master:

   <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 
   <script type="text/javascript" src="../Scripts/jquery.blockUI.js"></script> 
   <script language="javascript" src="../Scripts/General.js" type="text/javascript"></script> 
   
   <style> 
       div.blockOverlay { 
       background-color: #666; 
       filter: alpha(opacity=50) !important; 
       -moz-opacity:.50; 
       opacity:.50; 
       z-index: 200000 !important; 
       } 
       div.blockPage { 
       z-index: 200001 !important; 
       position: fixed; 
       padding: 10px; 
       margin: -38px 0 0 -45px; 
       width: 70px; 
       height: 56px; 
       top: 50%; 
       left: 50%; 
       text-align: center; 
       cursor: wait; 
       background: url(ajax-loader.gif) center 30px no-repeat #fff; 
       border-radius: 5px; 
       color: #666; 
       box-shadow:0 0 25px rgba(0,0,0,.75); 
       font-weight: bold; 
       font-size: 15px; 
       border: 1px solid #ccc; 
       } 
   </style> 
   

3. Ajouter le balisage suivant dans default.aspx:

   <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
       <ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button" 
        onclick="Button1_Click" /></ContentTemplate> 
   </asp:UpdatePanel> 
   

4. Ajouter une image indicateur de progression (ajax-loader.gif) à la racine du projet

5. Ajouter les éléments suivants dans General.js

   // BlockUI setup 
   
   $.extend({ 
       // Block ui during ajax post back 
       initializeUiBlocking: function() { 
       if (typeof ($.blockUI) != 'undefined') { 
        $.blockUI.defaults.message = 'LOADING'; 
        $.blockUI.defaults.overlayCSS = {}; 
        $.blockUI.defaults.css = {}; 
   
        var request = Sys.WebForms.PageRequestManager.getInstance(); 
        request.add_initializeRequest(function (sender, args) { 
        request.get_isInAsyncPostBack() && args.set_cancel(true); 
        }); 
        request.add_beginRequest(function() { $.blockUI(); }); 
        request.add_endRequest(function() { $.unblockUI(); }); 
       } 
       } 
   }); 
   
   $(document).ready(function() { 
       $.initializeUiBlocking(); 
   }); 
   

Answer 2

Jetez un oeil à ce
http://www.malsup.com/jquery/block/#overview
Cela fonctionne pour les appels ajax.

Et vous devez placer la ligne suivante
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
dans un endroit à la disposition de toutes les pages.