Display Loading message without using Update Progress Control in ASP.Net AJAX

As we all know, Update Progress control in ASP.Net AJAX can be used to let the users know that the server side process is still progressing with a loading message or through a graphic. The same effect is possible to make without using Update Progress control.

First Create a DIV, absolutely positioned, and name it (ex: MessageDiv). Put your loading message in it. Now by default this DIV will be hidden. Create a JavaScript function that hide the DIV.

function HideLoading() {

document.getElementById('MessageDiv').style.display = "none";

}

Add the Following Code to the HTML BODY's onload event in the ASPX file:

onload="HideLoading();"

Now you need a script that shows the MessageDiv on the page. Put the following Client side Java Script anywhere in the Page.

function ShowLoading() {

document.getElementById('MessageDiv').style.display = "block";

    }

Now you have to attach this Function to form submit event. It can be done on overriding OnLoad Page event. If you have a Page Base I advise to put it there:

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

ScriptManager.RegisterOnSubmitStatement(Page, Page.GetType(), "ShowLoading", "ShowLoading();");

}

So whenever the Page is refreshed the Message DIV will be shown. When the Page returns with new data, the BODY tag’s OnLoad event will hide the Message DIV. Pretty simple!

It does not work when using redirection from the client side that is why I made a general method for client side redirection, which also displaying Message DIV and I call always when I need it.

function Redirect(url, newTab) {

document.getElementById('updateProgresiv').style.display = "block";



if (newTab == true) {

   window.open(url); /* without parameters - in new tab */

}

else

   window.location.href = url; /* in same window */

return false;

}

I hope you find this useful. Good luck!