ASP.Net: Wait for postback response

We have a ASP.Net application where some postbacks might take some time to be handled by the server. When the user triggers a postback, we want the client to be forced to wait until the postback is handled by the server.

My Problem

I want this mechanism to kick in on every page of the site, though some pages do not realy require it.

Problem solved?

Obviously you end up in the master page, but as in animal farm: "All pages are equal, but some pages are more equal then others". I want certain pages to handle the postback slightly different from the default...

Problem Solved!

The solution contains 3 elements: html, css and a little javascript. It's the javascript that helped me out.

html:

     <div id="mainContent">  
       <div class="loadinggs" id="loadingoverlay">  
         <div class="loadingmsg">  
           <img src="../../Images/ajax-loader.gif" align="middle" alt="busy" />  
           Bezig met verwerken...  
         </div>  
       </div>  
       <asp:ContentPlaceHolder ID="MainContent" runat="server" />  
     </div>  

The place of the code depends on what part you want to block. The example code 'blocks' the main content, leaving the menu (in another placeholder) accessible.

CSS:

 .loadinggs  
 {  
   position:fixed;  
   width:100%;  
   height:100%;  
   background:rgba(255, 255, 255, 0.5);  
   z-index:1000000000000;  
   display:none;  
   }  
 .loadingmsg  
 {  
   position:absolute;  
   top:30%;  
   left:50%;  
   background:#fff;  
   border:2px solid #196DC1;  
   padding:5px;  
 }  

HTML & CSS by Gio! (thanks again!) The CSS is primarily IE9 (as by my requirement), but you can easily tweak it to support other browsers aswell.

Javascript

 <%--  
     Initializing the Page PageRequestManager, handling 4 key events:  
     1 - BeginRequest - Start of a postback  
     2 - Endrequest  - Server response on postback event  
     3 - PageLoading - ... (self explainatory I guess)  
     4 - PageLoaded  -  
     By default on each page a animated loading img is shown. But certain pages have additional functionality.  
     In appl_init we check if additional functions were provided for each event. If not the default behaviour is applied.  
 --%>  
 <script type="text/javascript">  
   var pgRegMgr;  
   // add an event handler to 'pageload'  
   Sys.Application.add_init(appl_init);  
   /*  
   The PageRequestManager contains postback information.  
   When this page initializes, we can add handlers to this manager to catch events.  
   NOTE: This javascript code need te be placed AFTER the </body> tag !!!!  
   */  
   function appl_init() {  
     // if we do not have the PageRequestManager instance, get it AND add the handler(s)  
     if (pgRegMgr == null) {  
       if (Sys != null) {  
         if (Sys.WebForms != null) {  
           pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();  
           // check for specific event handlers, if not found use the default  
           if (window.pageBeginRequest) { pgRegMgr.add_beginRequest(pageBeginRequest); } else { pgRegMgr.add_beginRequest(BeginHandler); }  
           if (window.pageEndRequest) { pgRegMgr.add_endRequest(pageEndRequest); } else { pgRegMgr.add_endRequest(EndHandler); }  
           if (window.pageLoading) { pgRegMgr.add_pageLoading(pageLoading); } else { pgRegMgr.add_pageLoading(BeginHandler); }  
           if (window.pageLoaded) { pgRegMgr.add_pageLoaded(pageLoaded); } else { pgRegMgr.add_pageLoading(EndHandler); }  
         }  
       }  
     }  
   }  
   /*  
   Default pageBeginRequest and pageLoading behaviour.  
   */  
   function BeginHandler() {  
     document.getElementById('loadingoverlay').style.display = 'block';  
   }  
   /*  
   Default pageEndRequest and pageLoaded behaviour.  
   */  
   function EndHandler() {  
     document.getElementById('loadingoverlay').style.display = 'none';  
   }  
 </script>  
 <asp:ContentPlaceHolder ID="AfterBody_AddedHandlers" runat="server" />  

Now on each postback of a control the content part of the screen is 'locked' until the server responds. The script supports the usage of  a specific handler on the content page hosted by the master. Just add the handlers in the <asp:Content> tag and do enclose them with <script></script> tags. And -if applicable- don't forget to hide the loading message...

 <asp:Content ID="Content2" ContentPlaceHolderID="AfterBody_AddedHandlers" runat="Server">  
   <script type="text/javascript">  
     /*  
     When a postback was handled by the server (Code behind was executed...)  
     we want to check if a specific control was causing the postback...  
     */  
     function pageEndRequest() {  
       //do specific page stuff...  
     }  
     /*  
     Catch the pageLoaded event.  
     */  
     function pageLoaded() {  
      //eg. call a specific function like a body onload  
       UpdateTotals();  
       document.getElementById('loadingoverlay').style.display = 'none';  
     }  
   </script>  
 </asp:Content>