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" %>
<%
%>
<!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;">
<% 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 />
<%
Notify("30", "Loading Departure Calendar Completed ...");
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;
public class LoadingNotifier: System.Web.UI.Page
{
public void initNotify( string StrSplash)
{
if ((!IsCallback) && (!IsPostBack))
{
Response.Write(string.Format(@"<script type='text/javascript' src='scripts/loadingNotifier.js'></script>
<script language="'javascript'" type='text/javascript'>
initLoader('{0}');
</script>",StrSplash));
Response.Flush();
}
}
public void Notify(string strPercent, string strMessage)
{
if ((!IsCallback) && (!IsPostBack))
{
"cs"> 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!
