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.
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 =)
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 =)