Update Panel - Handle async partial-page state with client script

This is a sample script you can put at the master page. So that you dont need to have updatepanel progress every time you add the update panel in you aspx page.

Script 

<div id="pageUpdating"></div>

    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
        function BeginRequestHandler(sender, args) {
            //page is begin request, you can put code to lock screen etc.  
            writePageLoading();

        }
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)
        function endRequestHandler(sender, args) {
            //page load successfully , end request  
            RemoveLoading();
            if (args.get_error() != undefined && args.get_error().httpStatusCode == '500') {
                //if have error
                var errorMessage = args.get_error().message;
                alert(errorMessage + " . " + errorMessageAdditional);
            }
        }

        Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler)
        function pageLoadingHandler(sender, args) {
            //page updating..
            writePageUpdating();
        }

        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler)
        function pageLoadedHandler(sender, args) {
            //page loaded
            RemoveLoading();
        }

        //method to write loading indicator
        function writePageLoading() {
            var divPageUpdating = document.getElementById('pageUpdating');
            divPageUpdating.innerHTML = "<div id=\"loading\" style=\"position: absolute; top: 46%; left: 40%; width: 200px; z-index: 100000;\" class=\"PopupBackground\"><center><br /> <img src=\"images/loading.gif\" alt=\"page is updating\" /><br /><br/>Please Wait While Processing Your Request...</center></div>";

        }

        //method to remove any updating / loading indicator
        function RemoveLoading() {
            var divPageUpdating = document.getElementById('pageUpdating');
            divPageUpdating.innerHTML = "";
        }

        //method to write updating indicator
        function writePageUpdating() {
            var divPageUpdating = document.getElementById('pageUpdating');
            divPageUpdating.innerHTML = "<div id=\"loading\" style=\"position: absolute; top: 46%; left: 40%; width: 200px; z-index: 100000;\" class=\"PopupBackground\"><center><br /> <img src=\"images/loading.gif\" alt=\"page is updating\" /><br /><br/>Please Wait While System Updating Your Page...</center></div>";
        }
    </script>

By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)