Show Loading Message in Asp.net AJAX

In this post, I will explain you how can we show Loading message in asp.net ajax without using Update Progress. Now some one may asked, why do I want to skip Update Progress ?

Well, there can be several reasons for this, fist of all you have to work on every single page, and on every update panel to get the update progress working.

There are basically three methods of meeting this requirement.

  1. Using Master Pages : A very smart way, but not all of us are using them .. right ?
  2. Extending Page Class  : A little harder but to me it is very elegant way.
  3. Extending Script Manager : Similar to the page class one, but implementation is comparatively simple.

The Basics:

Before I start with exploring the different approaches let me first create a ground by showing what things will be involve in creating a loading message.

I want the background to be grayed and displayed a simple loading text at the top, for that we need a style sheet, which will apply to the loading message div.  Create a stylesheet and call it style.css

.ModalProgressContainer
    {
        z-index: 10005;
        position: fixed;
        cursor: wait; 
        top:0%; 
        background-color: #ffffff; 
        filter: alpha(opacity=50);
        opacity: 0.5;
        -moz-opacity: .5; 
        height: 100%;
        width: 100%;
        text-align: center; 
        
        } 
    .ModalProgressContent
    {
        padding: 10px; 
        border: solid 0px #000040; 
        font-weight: bold; 
        background-color:#ffffff;
        margin-top:300px;
    }

Now lets read and understand the following script. 

var prm = Sys.WebForms.PageRequestManager.getInstance();
 
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
 
// ----------------------------- //
// the below script will be saved in JS File, create a JS file and call it ajaxload.js and save the following script
 
function InitializeRequest(sender, args) {
    if (document.getElementById('ProgressDiv') != null)
        $get('ProgressDiv').style.display = 'block';
    else
        createContorl();
}
 
function EndRequest(sender, args) {
    if (document.getElementById('ProgressDiv') != null)
        $get('ProgressDiv').style.display = 'none';
    else
        createContorl();
}
 
function createContorl() {
 
    var parentDiv = document.createElement("div");
    parentDiv.setAttribute("class", "ModalProgressContainer");
    parentDiv.setAttribute("Id", "ProgressDiv");
 
 
    var innerContent = document.createElement("div");
    innerContent.setAttribute("class", "ModalProgressContent");
 
    var img = document.createElement("img");
    img.setAttribute("src", "/Images/Images/Loading.gif");
 
    var textDiv = document.createElement("div");
    textDiv.innerHTML = 'Loading....';
 
 
 
    innerContent.appendChild(img);
    innerContent.appendChild(textDiv);
 
    parentDiv.appendChild(innerContent);
 
    
 
    document.body.appendChild(parentDiv);
}

Notice,in the first three lines. We are getting the instance of PageRequestManager and then defining InitilizeRequest and EndRequest functions to display or hide the loading div. Where as, in createControl function we are simply writing DHTML, to be more specific there is no HTML of the loading div in our markup. So, we are writing that from JavaScript.

Also, note the that I have break down this script into two part by using comments. First is the declaration and second is definition of the functions.

note: The definition will take place on a seperate JS file where as the declaration need to be made in the page, under body markup.  Now we are all set to explore different approaches.

 

Using Master Pages :

A very simple approach, all you need to do is open your master page and paste the following lines in the head section.

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ajaxload.js"></script>

And in body, after form tag create a script section and paste the following JavaScript.

var prm = Sys.WebForms.PageRequestManager.getInstance();
 
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

Notice it is the same declaration section which we have discussed above and that’s it you are done. All the content form of your web application should now display loading div on each partial postback.

 

Extending Page Class  :

For this, create a class file and call it ajaxPage and inherit it from System.Web.UI.Page and write the following code. 

public class ajaxPage : Page
 
   protected override void OnLoad(EventArgs e)
   {
       //Include CSS File
       Page.Header.Controls.Add(new LiteralControl("<link href='style.css' rel='stylesheet' type='text/css' />"));
 
 
       //Include JS file on the page
       ClientScript.RegisterClientScriptInclude("ajaxload", ResolveUrl("~/ajaxload.js"));
 
       //Writing declaration script 
       String script = "var prm = Sys.WebForms.PageRequestManager.getInstance();";
       script += "prm.add_initializeRequest(InitializeRequest);";
       script += "prm.add_endRequest(EndRequest);";
 
       ClientScript.RegisterStartupScript(typeof(string), "body", script, true);
 
       base.OnLoad(e);
   }
 

Well, we have simply extend the System.Web.UI.Page into our own class and override OnLoad function to include the JS file and write the declaration markup.

Now, on the page code behind where you want to implement Loading message change the inherit namespace from System.Web.UI.Page to ajaxPage (make sure you namespace).

 

Extending Script Manager :

Now instead of extending page class we will extend Script Manager control and for that create a new class file and call it ScrtipManagerExt and write the following code. 

public class ScriptManagerExt : ScriptManager
{
    protected override void OnLoad(EventArgs e)
    {
 
        //Include CSS File
        Page.Header.Controls.Add(new LiteralControl("<link href='style.css' rel='stylesheet' type='text/css' />"));
 
        RegisterClientScriptInclude(this, typeof(Page), "ajaload", ResolveClientUrl("~/ajaxload.js"));
 
        String script = "var prm = Sys.WebForms.PageRequestManager.getInstance();";
        script += "prm.add_initializeRequest(InitializeRequest);";
        script += "prm.add_endRequest(EndRequest);";
 
        RegisterStartupScript(this, typeof(Page), "ajaxtest", script, true);
        base.OnLoad(e);
    }
}

Almost the same thing we did in extend page approach, only the implementation will be change. Instead of using the old Script Manager we will use our new one. the include directive and markup will look like as below.

<%@ Register Assembly="AssmblyName" Namespace="NameSpace" TagPrefix="cc1" %>
 
<cc1:ScriptManagerExt ID="ScriptManagerExt1" runat="server">
</cc1:ScriptManagerExt>

That’s it we are done. I tried to make it simpler and show you every possible way I know of doing this task. Again, any approach selection will be on you and your project type. You can also download  the VS 2008 project file.

4 Comments

  • This article is excellent.
    Thank you very much for sharing.

  • Thank you.
    Works fine in firefox but the image is shown at the bottom ie and this statement in endRequest is always null so it creates a second image . if (document.getElementById('ProgressDiv') != null)

  • hi,
    looks gr8. I wanted to know if it works for initial page load event as well.
    i have a heavy TSQL query which takes 1 - 2 mins to get back the data. I want a loading div to be shown at the start of page load.

    I tried the Master-Content approach, but that didn't work. I guess this solution is only for a postback event.

    Any pointer in this direction would be appreciated.

    thanks.

  • How come you use getElementById instead of $get() routine?

Comments have been disabled for this content.