Ajax Update Progress(Waiting Popup image) in asp.net and C#

If the server side operation is really time consuming and if the user clicks the page elements again and again for response, the PageRequestManager class will cancel the current request and sends a new request to the server for every click.  canceling a postback through PageRequestManager class will prevent the panel updations/refresh but the actual server side processing will be continued. To prevent this, we can either disable the page elements until a response is received or allow one postback at a time. If the number of control in the page is more then it will become cumbersome to disable/enable page elements for every request/response.

We can simulate a behavior where we can make the page look like disabled but it’s actually not. Refer the below figure.

To do this, we can include the whole content of the page inside a DIV tag(ParentDiv) and apply some css rules which make the DIV partially opaque by applying a CSS class from OnBeginRequest event. In the same way, we can revert back the CSS rules in endRequest() event.

<style>

    .Background

    {

        position: fixed;

        left: 0;

        top: 0;

        z-index: 10;

        width: 100%;

        height: 100%;            

        filter: alpha(opacity=40)

    }

</style>

<script type="text/JavaScript" language="JavaScript">

    function pageLoad()

    {      

       var manager = Sys.WebForms.PageRequestManager.getInstance();

       manager.add_endRequest(endRequest);

       manager.add_beginRequest(OnBeginRequest);

    }

    function OnBeginRequest(sender, args)

    {    

     $get('ParentDiv').className ='Background';   

    }

    function endRequest(sender, args)

    {

       $get('ParentDiv').className ='';

    }  

</script>

<form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" />

        <div id="ParentDiv">

       //Page contents go here

        </div>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

                    <ProgressTemplate>

                    <DIV id="IMGDIV" align="center" valign="middle" runat="server" style=" position: absolute;left: 35%;top: 25%;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:40;">

                    <img src=icon_inprogress.gif /><br />

                    <input type="button" onclick="CancelPostBack()" value="Cancel" />

                    </DIV>

                    </ProgressTemplate>

</asp:UpdateProgress>

</form>

When executed, this will give the illusion that the page is disabled similar to the above figure and the user will understand the processing is going on. To increase/decrease opacity of the page, adjust the value of “filter:alpha(opacity=40)” in Background CSS class.