Display Loading Message

Dev Articles Community Forums Sponsor:

April 16th, 2004, 08:36 PM

clark123

Registered User

Join Date: Apr 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

Display Loading Message

I am working on a web application using asp.NET/C#. There are alot of pages that can take quite a while to be displayed due to large amounts of data. I currently have a "page loading..." message that is displayed to the user using a combination of DHTML and Response.Flush() to push the data as needed to the client. However, this does not seam to work as good as I would like. There appears to be a considerable lag from the time the user clicks the link in the nav, and the browser finally displays the loading message. Here is a digested form of the code I am using now...

----------------------------------------------------------------------------
....private void Page_Load(object sender, System.EventArgs e)
{
Response.Buffer = true;

labelLaodMsg.Text = "<div id='loadingMsg'>loading</div>"

// flush the server cache to the browser will display the div
Response.Flush();

------ Some server intensive code here -----

//javascript to hide the load message
labelJS.Text = "<script>bla bla</script>

Response.Flush();
}
----------------------------------------------------------------------------

Is there a better place to put all of this rather than in the Page_Load? I would like the message to be displayed almost instantly after the user clicks the nav. Right now I have a feeling the server is building the page, and then sending the data to the client whenever it Flush is called. I would like the server to send the message, and THEN build the page. Also, if it helps, the pages that need the loading message are displayed within an IFrame.

Thanks for any help.

April 30th, 2004, 03:59 AM

rkabir

Registered User

Join Date: Apr 2004

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

Simple way to show Loading.. Message in .NET web Applications

The loading message might be needed to be shown in two scenarios

1. When page is being accessed for the first time
2. When something is being requested (Button Click) from the Page to retrieve time consuming data.

1. PAGE ACCESS FOR THE FIST TIME
This is pretty simple to achieve. If your application is Original.aspx file, user will link to Orignal.html file which will show the Wait Message and
redirect the user to the Original.aspx file.

Create a simple HTM page with the Message "Loading..." anyway you like. It could be inside a div.
Write the following script at the end to the HTML file which will change the documents href location to original Web Form.

document.location.href = "Original.aspx";

Since the Original.aspx will take sometime to load, the content of HTML file will be on screen until the data arrieves.

2. WHEN NEW INFO IS REQUESTED ON EXISTING WEB FORM
First Create a DIV and name it (ex: MessageDiv). Put your loading message in it. If you are using Visual Studion 2003, use the Flow Layout Panel
from HTML toolbox. Thus you can drag the DIV over any control since it is absolutely Positioned.

Now by default this DIV will be hidden. So add the Following Code to the HTML BODY's onload eventin the ASPX file. If you are in VS2003, go to HTML mode from Design mode to see the HTML codes for the page.

onload = "MessageDiv.style.visibility = 'hidden';"

Now you need a script that shows the MessageDIV on the page. Put the following Client side Java Script anywhere in the Page. My suggestion would be to put it at the end of page which will guarantee the creation of the MessageDiv (Still in HTML view Mode).

function doClick()
{
MessageDiv.style.visibility = "visible";
}

Now you have to attach this Function to a event of a Control. The most usual example would be to attach this function to a button’s onclick event. To attach to .NET WebForm's Control Button called Send_Button, add the following line in the Page_Load function which gets executed eveytime at the server side when the page is loaded.

Send_Button.Attributes.Add("onclick", "doClick()");

So when ever the Send_Button is pressed the Message DIV will be shown. Since this will be done from the client side, Internet Explorer will show the DIV instantly and the page will be submitted. When the Page returns with new data, the BODY tag’s OnLoad event will hide the Message DIV. Pretty simple!

You can download the attached file which implements what I have explained so far.

----
Rezaul Kabir

Attached Files

Loading.zip (3.2 KB, 1911 views)

Display Loading Message

Developer Shed Advertisers and Affiliates