Disable controls on the page pending the UpdatePanels

A few months ago we started to develop a client for a fairly complex web application with. NET 3.5 and rather use AJAX. In this application there are several pages that use UpdatePanels, and perform some of these complex processes can take several seconds to reach, which is why our client asked us to, to start these processes, the page is locked so that the user can not perform any other action on it until it completes the pending proceedings. Obviously we did not want to run a script "by hand" each time an action is executed and another at the end of it, so look for ways to automate it a bit. We started looking for proper engine event AJAX Microsoft® and found that we can capture the RequestManager when you initiate a request to the server and when it ends. This can be done using the methods add_endRequest add_initializeRequest and the current instance of PageRequestManager, which can be obtained with the following code: Sys.WebForms.PageRequestManager.getInstance(). 

In the first event we showed one ModalPopup (control showing a "window" on the page and disables all other controls thereof) of Seller ASP.NET AJAX Control Toolkit from Microsoft®, which contained a message saying "Wait a time..."and so we closed the second event. Then as was shown in the PopUp page:

<cc1:ModalPopupExtender ID="mpeLoading" runat="server" BehaviorID="idmpeLoading"PopupControlID="pnlLoading" TargetControlID="btnLoading" EnableViewState="false"DropShadow="true" BackgroundCssClass="ModalBackground" /><br />
<asp:Panel ID="pnlLoading" runat="server" Width="300" Height="50" HorizontalAlign="Center"CssClass="ModalPopup" EnableViewState="false" Style="display: none"><br />
    <br />Wait a time...</asp:Panel>
<asp:Button ID="btnLoading" runat="server" Style="display: none" />

And here is the JavaScript code:

function initializeRequest(sender, args){
    $find('idmpeLoading').show();
}

function endRequest(sender, args){
    $find('idmpeLoading').hide();
}

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

Next step ModalPopup review the code (the same can be downloaded from the same link I showed above) and found that the panels are set to a fixed value in the zIndex style for display on the other controls. Then we review the properties of the JavaScript object representing the panel and found that it has two interesting items: _backgroundElement and _foregroundElement . These represent the DIVs background and content PopUp respectively, then to these HTML objects are positioned above all others simply have to incrementarles the zIndex property of their style. So our JavaScript code is as shown below:

function initializeRequest(sender, args){
    var mpeLoading = $find('idmpeLoading');
    mpeLoading.show();
    mpeLoading._backgroundElement.style.zIndex += 10;
    mpeLoading._foregroundElement.style.zIndex += 10;
}

function endRequest(sender, args){
    $find('idmpeLoading').hide();
}

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

Finally, to make this functionality is present on every page of our application, we add it to the " master" page of the site, and after that on any page ( that uses this master) possesses the functionality described here.

See Also:

How Do I Add JavaScript UpdatePanel In Runtime

FileUpload Control In Update Panel - ASP.NET AJAX - C#

Force downloading a file from C #