Ajax Update progress screen to block access to form during background server side processes

If you are writing an Ajax based .NET web application or web page, there are situations were you might want to block the whole webpage from being accessed while a background or server side process is taking place. So for example if the user clicks submit, you want to make the web page not accessible until the backend server side event handler function finishes and reloads the page.

To do this, you need to do the following:

In the button click event, call the javascript function showprogress (client side – aspx page code):
———————-

<asp:Button ID="ApplyFilterButton" runat="server" OnClick="ApplyFilterButton_Click"
OnClientClick="if(Page_ClientValidate())ShowProgress();" Text="Apply Filter"
CssClass="ms-crm-Button" Style="height: 23px" />

The show progress function should look something like the following:
————————

<script type="text/javascript">
   function ShowProgress() {
document.getElementById('<% Response.Write(PageUpdateProgress.ClientID); %>').style.display = "inline";
        }
</script>

 The update progress control should look something like this:
————————

<asp:UpdateProgress ID="PageUpdateProgress" runat="server"
AssociatedUpdatePanelID="PageHiddenPanel" DisplayAfter="50">
  <ProgressTemplate>
     <div id="progressDiv"
     style="background-position: center center;
     background-image: url(../../Images/progress.gif);
     background-repeat: no-repeat; background-attachment: fixed;
     vertical-align: middle; background-color: #000;
     filter: alpha(opacity=50);">
            </div>
            <script type="text/javascript">
                var targetDiv = document.getElementById("progressDiv");
                targetDiv.style.top = 0;
                targetDiv.style.left = 0;
                targetDiv.style.height = screen.availHeight;
                targetDiv.style.width = screen.availWidth;
            </script>
        </ProgressTemplate>
    </asp:UpdateProgres> 

 Hope it helps.