CodeProject: ASP.NET/ AJAX Page Loader Progress Bar/ Splash Screen. Free source code and programming help

Report Article

Discuss

Send to a friend

10 votes for this Article.

Popularity: 2.91 Rating: 2.91 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download source files - 4.95 Kb

Introduction:

Today, complex server controls and extensive Javascript libraries (e.g. AJAX ) are very common . They can considerably increase the size and accordingly the loading time of your page. Unfortunately it is very hard to catch how slow your page is while you are in a development environment. You will be surprised to see how long some users have to wait until your page is completely downloaded. Wouldn’t it be nice if you could communicate to the users to stay patient until the page and scripts are downloaded? Even in some cases you would rather hide your page until it is fully downloaded to avoid premature events when your scripts are still loading. This article shows how you can display the loading process of your page with a progress bar. Additionally you can use this as a splash window to show messages, news or ads that you want the user to see first.

The technique discussed here is not limited to ASP. NET. If you use any other server-side scripting languages, keep on reading!

UPDATE: Live Sample

Using the code

To make life easier, I encapsulated all the code into the LoadingNotifier class. To use the LoadingNotifier , your page inherits LoadingNotifier class. First you initialize the loading progress bar by calling initLoader() in a server script tag i.e. <%initLoader(strMsg);%>. This method writes a Javascript to the response object and calls the Flush() method to send the buffered output to the client. This Javascript function adds the progress bar to the DOM and shows the page is being loaded. From here, on each achieved milestone, you call the Notify(strProgressPercent , strLoadingStatusMsg) method of LoadingNotifier and pass in the progress percentage and the status message. Each call to the Notify method writes a Javascripts function to the Response that updates the progress bar. When the progress bar reaches 100% it automatically gets removed from the DOM. The progress bar is totally customizable and takes its stylesheet from the page Theme. You can set a background color for the Progress bar container to hide the page until it is 100% loaded.

<%@ Page Language="C#" Inherits="LoadingNotifier" Theme="Default" %>
<%
    //shahin@themorningoutline.com provided this UNDER GNU GPL 

    // For more inforamtion visit http://www.themorningoutline.com/

   
    // Page Inhertits the LoadNotifier Class 

 %>

<!DOCTYPE html >
<html>
<head runat="server">
    <title>www.themorningoutline.com ASP.NET Sample</title>
</head>
<body style="background-color: #999999; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;">
  
  
    <% //Initilize thr Progress Bar and show a message

        initNotify("Welcome to theMorningOutline. Free tickets from today!");
        System.Threading.Thread.Sleep(3000);
    %>
    <form id="form1" runat="server">
  
        <span style="font-size: 12pt"><strong><span style="color: #ffffff">Select Your Departure
            Date: </span></strong> </span>
          
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
        <br />
        <% 
            // We have achieved a milestone. Let the user know!

            Notify("30", "Loading Departure Calendar Completed ...");
            // Simulate Internet dalay

           System.Threading.Thread.Sleep(2000);
           
             %>
        <span style="font-size: 12pt"><span style="color: #ffffff"><strong>Select Your Return
            Date: </strong><span style="color: #000000"> </span></span></span>
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
        <br />
      
           <% 
           Notify("60", "Loading Arrival Calendar Completed ...");
           System.Threading.Thread.Sleep(2000);
           
             %>
               <span style="font-size: 14pt"><span style="color: #ffffff">Your Recent Flights:</span><strong><span
            style="color: #ffffff"> </span></strong></span>  <br />
        
        <span style="font-size: 12pt"><span style="color: #ffffff"></span>
        </span>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
            DataSourceID="XmlDataSource" ForeColor="#333333" GridLines="None" Style="border-left-color: gray;
            border-bottom-color: gray; border-top-style: outset; border-top-color: gray;
            border-right-style: outset; border-left-style: outset; border-right-color: gray;
            border-bottom-style: outset">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />
                <asp:BoundField DataField="Origin" HeaderText="Origin" SortExpression="Origin" />
                <asp:BoundField DataField="Destination" HeaderText="Destination" SortExpression="Destination" />
                <asp:BoundField DataField="Duration" HeaderText="Duration" SortExpression="Duration" />
                <asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
            </Columns>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <EditRowStyle BackColor="#999999" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
        <asp:XmlDataSource ID="XmlDataSource" runat="server" DataFile="~/Source.xml" XPath="/travel/Itinerary">
        </asp:XmlDataSource>
        <%
            Notify("100", "Loading Your Previous Trips Completed...");
          System.Threading.Thread.Sleep(2000);
         %>
    </form>
     
    
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

// shahin@themorningoutline.com provided this UNDER GNU GPL 

//For more inforamtion visit www.themorningoutline.com

public class LoadingNotifier: System.Web.UI.Page
{
 
    public  void initNotify( string StrSplash)
    {
        // Only do this on the first call to the page

        if ((!IsCallback) && (!IsPostBack))
        {
            //Register loadingNotifier.js for showing the Progress Bar

            Response.Write(string.Format(@"<script type='text/javascript' src='scripts/loadingNotifier.js'></script>
              <script language="'javascript'" type='text/javascript'>
              initLoader('{0}');
              </script>",StrSplash));
           // Send it to the client

            Response.Flush();
            
        }

    }
    public  void Notify(string strPercent, string strMessage)
    {
        // Only do this on the first call to the page

        if ((!IsCallback) && (!IsPostBack))
        {
            //Update the Progress bar


            Response.Write(string.Format("<script language="'javascript'" type='text/javascript'>setProgress({0},'{1}'); </script>"
, strPercent, strMessage));
            Response.Flush();
            
        }

    }
   
}

Remember that the Page_Load event has been processed before the page is being downloaded therefore if you have expensive operations at your Page_Load event, you cannot display the processing progress using this method. This method uses W3C Standard DOM methods which require the body tag to be present to display the progress bar. To display the loading status during Page_Load or other events which are processed prior to sending the page to the client, you can directly write your status message to the Response object and call the Flush method. When the page is completed at the client, you should clean up your status messages.

Conlusion

Finally remember that using the LoadingNotifier class actually slows down the loading process of your page and it should be avoided unless your page is really heavy. comments here!

Cheers!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Shahin__

Occupation:	Web Developer
Location:	United States

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
File Upload with ASP.NET
This article shows you how work with uploading of the files using ASP.NET and C#.
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET
MasterPages reinvented - a Component Based Template Engine for ASP.NET
User-friendly but powerful template engine which provides clean and painless separation of content and MasterPages (templates).

Article Top

You must Sign In to use this message board.

Msgs 1 to 23 of 23 (Total in Forum: 23) (Refresh)

FirstPrevNext

Subject

Author

Date

Loading Gridview Progress

kjward

5:21 16 Oct '07

thanks for the code sample. i'd like to use it on my webform which starts by grabbing a bunch of data from a database, and populates a gridview control. while it's out there doing its thing, i'd like to keep the user entertained so they don't get bored. this is all done in c# code behind, which the aspx already inherits, so i can't inherit the LoadingNotifier, too, can i?

so how do i implement your cool notify code to keep the user informed?

thanks in advance

kjward

Help "Response is not available in this context. " [modified]

rafiki31@gmail.com

8:14 15 Aug '07

Im getting this type of error i dont understand why. I placed everything in the aspx no in code behind. All do i am conecting to a data base and retrieving information. and i have placed the initNotify right after de body. and i get the following error,

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: Response is not available in this context.

I also tried to place de sub's call in the codebehind right before i conectect to the de BD (thats where i placed de initNotify()) and after i get the sqldatareader i placed another notify()
but it still throws the same error .. what am i doing wrong pls help :S

The page works like this .. i use a textbox in page1.aspx so that the user put in what he would like to look for .. i do a postbackurl to page2.aspx. In page2.aspx in my page_load i have that if its not a postback then conecto to the database and get the information which i store in a sqldatareader, and this fills my textboxes from page2.aspx....

hope i was clear enough Sniff

-- modified at 13:19 Wednesday 15th August, 2007

Re: Help "Response is not available in this context. "

mohit rawat

1:28 19 Feb '08

Use the class functions in code file then try to use
Sign In·View Thread·PermaLink

code behind

dsmportal

13:52 7 Apr '07

how do i use in code behind? example, when the user click on the button or when te page is loadinf first time (code behind)? thanks
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

Re: code behind

dsmportal

5:56 8 Apr '07

its me again... i just wanted to be more clear so that i may get the right and correct response:

I have found your article and love the idea/concept. The question I have is: does it work in the code behind pages or just inline code? I tried using code.

I have a lot of logic in my pages and don’t want to clutter the aspx pages.

if possible can you please throw some sample lines of how to acheive the same functionality in code-behind?

Thanks in advance

1.20/5 (2 votes)

Using Progress Bar with Master pages / within form or div tag

andre2711

6:45 22 Jan '07

Hi & congratulations, this is a really nice piece of code.

Unfortunately I ran into some problems using this with Master pages and IE (operation is aborted with prompt, page does not show properly). I wanted to integrate the progress bar in some content pages that use a master page which uses a <form> tag inside (and a global <div> for layout reasons). Seems that initNotify() breaks when called within a <form> or a simple <div> tag. Did you came across this problem and do you have any hint?

Thx and keep up good work!
André

5.00/5 (3 votes)

Re: Using Progress Bar with Master pages / within form or div tag

juras9

9:47 24 Apr '07

Yup, i need this on masterpage too . Cant figure it out, how to run it on master...
Sign In·View Thread·PermaLink

Re: Using Progress Bar with Master pages / within form or div tag

Daniel Ballinger

15:38 28 Aug '07

I've had some success using this within a master page.

I did the following:
1. Make LoadingNotifier inherit from System.Web.UI.MasterPage.
2. Take the "(!IsCallback)" out checks out of LoadingNotifier.
3. Have your master page inherit from LoadingNotifier in the code behind.
4. Add initNotify between the body and form tags in the declarative part of the master page.
5. Add Notify("100", "Done"); between the form and body closing tags of the master page.

That was enough for my basic requirements. I had to perform some extra checks in the JavaScript for null objects and I added the ability to directly call completed().

If you wanted to call Notify within the ContentPlaceHolder and assuming your master page is called Foo.master:

<%
    ((Foo)Page.Master).Notify("50", "Half way there!");
%>

php loader

jonavanmona

12:40 5 Nov '06

Hi, this is exactly what i need for my site! only i know whit about asp, i do know php. could somebody translate it for me? i think its not that much effort, but i just cant do it. that would be VERY nice thanks
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

Extended CSS used (off topic)

pharaon_login

14:07 7 Oct '06

Hi,

First of all thank you for the article, it is quite usefull for me Smile

. Also I've noticed that you used some non-standard CSS attributes like "-moz-opacity: 0.75" and "filter: ...". Can you suggest any internet resource with information on these tags? Especialy for Mozilla/Gecko related _moz_... tags, I was googling quite a lot, but did not find anything usefull. Even mozilla oficial developers site has quite a brief description.

Thanks,

Re: Extended CSS used (off topic) [modified]

Shahin__

7:56 8 Oct '06

Hi Pharaon What kind of description are you looking for? filter : alpha(opacity=50); //IE MozOpacity : 0.5; //Mozilla , Netscape KhtmlOpacity : 0.5; //Safari , Konqueror opacity : 0.5; //Opera and CSS3 Browsers Hope this helps! -- modified at 15:03 Sunday 8th October, 2006 Rebuild all succeeded!
Sign In·View Thread·PermaLink

Display the loading status during Page_Load

sithwad

1:04 3 Oct '06

"To display the loading status during Page_Load or other events which are processed prior to sending the page to the client, you can directly write your status message to the Response object and call the Flush method. When the page is completed at the client, you should clean up your status messages" Can anyone help or give an example on how to do this? I can't get it to work!
Sign In·View Thread·PermaLink

Re: Display the loading status during Page_Load

Shahin__

16:42 3 Oct '06

What is it exactly that you can get it to work? Rebuild all succeeded!
Sign In·View Thread·PermaLink

Re: Display the loading status during Page_Load

sithwad

23:29 3 Oct '06

Sorry, the above code works fine but I was trying to get the the progress bar to work on page load. You say its possible but I couldn't get it to work.

Basically I have a page that has to loop through folders and grab the file sizes. This loop occurs on the page load and while it is doing this it would be great to have a progress bar shown while the code is getting the file sizes.

Also I have a .net 2.0 wizard that gathers data, the last page of the wizard takes all the input and stores it in a database, contacts the bank and does some other stuff. This is done on the Wizards last page onactivate sub and it would be nice to have a progress bar shown while the code executes.

Just wondering if someone could help me with an example of running your progress bar before the page loads if this is at all possible.

Many thanks

2.00/5 (1 vote)

Re: Display the loading status during Page_Load

Shahin__

18:53 4 Oct '06

There are many ways you can do this. In most of the cases it is not really worth it to go all the way to the client just to update some percentages because by the time you get to the client the delay is resolved. What you can do is just showing a message or a picture indicating that you are processing the request. In your case a quick workaround to use LoadingNotifier class is to try refactoring your code out of the Page_Load event and call it in the context of your page after you initialized the progress bar. It may get tricky if you have non- declarative data binding, so make sure everything is synchronized.

Cheers!

Rebuild all succeeded!

great job

vik20

19:58 2 Oct '06

THis is a great job. Vikram http://www.vikramlakhotia.com
Sign In·View Thread·PermaLink

ASP.Net with VB.Net version

CatMark

22:30 1 Oct '06

Hi!, Do you have the converted vb.net code? Thanks
Sign In·View Thread·PermaLink	5.00/5 (1 vote)

Re: ASP.Net with VB.Net version

Shahin__

9:55 2 Oct '06

This is mostly Javascript and CSS. You don't need to convert them in VB.NET. If you are concerned about the LoadingNotifier class, it pretty much translates to VB.NET the way it is. As a matter of fact a very similar piece of code would do the same job in PHP, JSP etc. Rebuild all succeeded!
Sign In·View Thread·PermaLink

Re: ASP.Net with VB.Net version

dacoty

10:24 4 Oct '06

CatMark,
below is the converted class to VB. not that it matters much, but here it is( i called mine loader)

Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'@ shahin@themorningoutline.com provided this UNDER GNU GPL
'@ For more inforamtion visit www.themorningoutline.com
' VB Port by David Coty - for instructional use only.
' please refer to the original author, shahin@themorningoutline.com for more details
' this code was NOT ported with any converters. use at your own risk
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Public Class loader ' change this class to whatever name you want
Inherits System.Web.UI.Page

Public Sub InitNotify(ByVal strSplash As String)

' Only do this on the first call to the page
'ADDL NOTE: you can possibly do this with ClientScript.RegisterClientScriptBlock

If (Not IsCallback) And (Not IsPostBack) Then
Response.Write(String.Format("<script type='text/javascript' src='scripts/loadingNotifier.js'></script><script language='javascript' type='text/javascript'>initLoader('{0}');</script>", strSplash))
'update the client
Response.Flush()
End If

End Sub

Public Sub Notify(ByVal strPercent As String, ByVal strMessage As String)
If (Not IsCallback) And (Not IsPostBack) Then
'run the setProgress routine
Response.Write(String.Format("<script language='javascript'
type='text/javascript'>setProgress({0},'{1}'); </script>", strPercent, strMessage))
'update the client
Response.Flush()
End If
End Sub

End Class

---- you use the class the same way in a web project but just inherit loader on the page.
HTH - David

Re: ASP.Net with VB.Net version

Shahin__

18:38 4 Oct '06

Very good David. About your comment on using ClientScript object, the RegisterClientScriptBlock and RegisterStartupScript methods will not work with the Notify method because of the position where the scripts are written to the HTML document. Also writing to the Response object is faster than dealing with ClientScript object. ClientScript object is very handy but not here!

Cheers!

Rebuild all succeeded!

Re: ASP.Net with VB.Net version

dacoty

3:45 5 Oct '06

I noticed that when i first tried it - i got the initNotify method to work but the Notify Method was a bust because of the HTML position (i got a "can't modify controls in <%%>" error) I'm still new to asp.net. i'll figure all this out someday -David
Sign In·View Thread·PermaLink

Re: ASP.Net with VB.Net version

davidswift

7:29 16 Aug '07

Thanks David but how do I inherit the loader from my page source as I already have a statement like this - <%@ Page language="VB" Autoeventwireup="False" Codepage="MyPage.aspx.vb" Inherits="Performance.MyPage" %> (Performance is a namespace for the whole web project) Regards Dave
Sign In·View Thread·PermaLink