How to make "please wait, loading..." page?

hrabia

Centurion
Joined
May 21, 2003
Messages
107
Location
Hamburg, Germany
I've one "master page" that loads a user control. This user control contains a grid with a database datasource. When I load o lot of data, the user has to wait with a blank page for an answer. I'd like to make my page more user friendly and show a message "please wait, loading...". So, I'd like to load first some kind of "wait.ascx" user control and than (when the data is ready to show) my main user control with the grid.

Any ideas?
Adam
 
You could look into adjusting how you are doing things and using AJAX. A page with some javascript on it displays the wait message while a call is made to get the data in the background to another asp page. This page caches the data under a guid and returns the guid to the calling javascript. The javascript can then redircet to the page displaying the data passing the guid in the query string for the page to get the data from the cache.

Another possibility that might work is displaying "Please wait.." at the top of you page then calling Response.Flush to output that to the browser. The rest of the page could then load as normal. You could even put some javascript that is called when it has loaded to hide the please wait.

You could also look into adjusting how you are displaying data perhaps implemeting a custom paging setup to avoid downloading all the data every time.

:)
 
My master page overloads the render and replaces the javascript for post backs to change in the inner html of the form to a div tag that says 'please wait'. Since javascript is what's doing it the (written) content of the page doesn't change, only what the user sees. I have it set as a property in my master page so that it can be turned on and off, other properties allow me to set the time that has to elapse before it is shown (immediately, 1 second, 5 seconds, etc.) and what the context of the div tag should be. It works quite well and since it's in a master page I never have to touch it unless I'm over riding the settings on another page. But my master page is an actual class that I derive all my other pages from, not a control. My mater template is a control that can be set on the master page, that way if I want a different template I just change the template. The base class itself is so abstract I've used it across several applications without change - I've only change the template that is used which is application specific anyway.
 
Thanx mark007 and bri189a for those ideas.

bri189a, I'm not quite sure I've understand your idea. After replacing the inner html to div tag, how do I steer that the page once again renders its content (with data)? A piece of code would be greatfull.
 
When the user clicks a button the inner html gets changed...

Mean-while ASP.NET is reading the content of the page and processing the post back events.

ASP.NET then outputs a new page (even if it's physically the same page) which overwrites what happened in step 1.
 
bri189a said:
When the user clicks a button the inner html gets changed...

Mean-while ASP.NET is reading the content of the page and processing the post back events.

ASP.NET then outputs a new page (even if it's physically the same page) which overwrites what happened in step 1.

You can see this on a proof of concept site I'm currently working on:

http://www.salemumcwidewater.org/

Click events, you'll see the page disappears until 'events' are loaded. You may need to wait about an hour since I have the data cached and the 'wait' message won't display in that short of an interval - after an hour the cache will expire and it will have to hit the database which will take some time.
 
Just a quick question..you mentioned to use AJAX
What is it actually..where can i find some good reference on it?
I heard its some good windows feature
 
AJAX is a buzz word for JavaScript RPC (Remote Procedure Call). Look for the article "Life without Refresh" on msdn, which is a good article and points out a few things, that by some may be considered flaws, about AJAX. I have no opinion on AJAX yet, still to new to the subject. Basically JavaScript RPC allows you to update the contents of a page without reloading it. It is a good amount of work though for anything complex, and it hasn't been tested to be secure, so I've heard. Many of my collegues refuse to look at it because it was a known flaw in ASP 3.0 - not something I know much about so they may right, may be not.
 
bri189a, thanx a lot. I've found this in your rendered page. Cool. May I use your idea :)? Now I'll have to override the render method to emit new __doPostBack function, hmm :)

Code:
<script language="javascript" type="text/javascript">
<!--
	function __doPostBack(eventTarget, eventArgument) {
		var theform;
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			theform = document.Form1;
		}
		else {
			theform = document.forms["Form1"];
		}
		theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
		theform.__EVENTARGUMENT.value = eventArgument;
		theform.submit();[B]__DisplayWaitMessage();[/B]
	}
// -->
</script>
<script language="javascript" type="text/javascript">
	var __WaitTimerRef;
	function [B]__DisplayWaitMessage(){[/B]
		__WaitTimerRef = window.setInterval(__WaitDisableShow, 1000);}
	function __WaitDisableShow(time){		// turn off timer
		window.clearInterval(__WaitTimerRef);
		// get form
		var forms = document.getElementsByTagName("form");
		forms[0].innerHTML = "<div><h2>Please wait while the page loads...</h2></div>";}</script>

.......

Greets
Adam
 
I think you are making this a little harder than it has to be. . .

aspx code:
PHP:
<%@ Page language="c#" Codebehind="TestWaiting.aspx.cs" AutoEventWireup="false" Inherits="TestWait.TestWaiting" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>TestWaiting</title>
  <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
  <meta content="C#" name="CODE_LANGUAGE">
  <meta content="JavaScript" name="vs_defaultClientScript">
  <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
 </HEAD>
 <body onload="document.all.messageDiv.style.visibility='hidden';">
  <form id="Form1" onsubmit="document.all.paramsDiv.style.visibility='hidden';document.all.messageDiv.style.visibility='visible'; return true;"
   method="post" runat="server">
   <DIV style="WIDTH: 152px; HEIGHT: 168px" ms_positioning="FlowLayout">
	<DIV ms_positioning="FlowLayout"><asp:panel id="paramsDiv" runat="server">
	  <asp:Label id="Label2" runat="server" Width="88px">Enter a value:</asp:Label>
	  <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
	  <asp:Button id="Button1" runat="server" Text="submit"></asp:Button>
	 </asp:panel><asp:panel id="resultsDiv" runat="server" Visible="False">
	  <asp:Label id="Label3" runat="server">Label</asp:Label>
	 </asp:panel></DIV>
	<span style="LEFT: 0px; POSITION: absolute; TOP: 0px"><DIV id="messageDiv" ms_positioning="FlowLayout">
	 <asp:Label id="Label1" runat="server">Please wait while your request is processed...</asp:Label></DIV>
	</span> 
   </DIV>
  </form>
 </body>
</HTML>

code behind:
C#:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace TestWait
{
 /// <summary>
 /// Summary description for TestWaiting.
 /// </summary>
 public class TestWaiting : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.Panel paramsDiv;
  protected System.Web.UI.WebControls.Label Label1;
  protected System.Web.UI.WebControls.Label Label2;
  protected System.Web.UI.WebControls.TextBox TextBox1;
  protected System.Web.UI.WebControls.Button Button1;
  protected System.Web.UI.WebControls.Panel resultsDiv;
  protected System.Web.UI.WebControls.Label Label3;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   if (this.IsPostBack)
   {
    System.Threading.Thread.Sleep(1000);
    paramsDiv.Visible = false;
    resultsDiv.Visible = true;
    Label3.Text = "You entered: " + TextBox1.Text;
   }
  }
  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: This call is required by the ASP.NET Web Form Designer.
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// Required method for Designer support - do not modify
  /// the contents of this method with the code editor.
  /// </summary>
  private void InitializeComponent()
  {    
   this.Load += new System.EventHandler(this.Page_Load);
  }
  #endregion
 }
}
 

Attachments

I override the Render method in my base page because LinkButtons don't cause a form onsubmit event to fire. I use the innerHTML property as preference...if I wrote javascript that was cross platform (document.all is IE only) setting the visibility would work too. Keep in mind you're seeing the output of a base class too, I don't actually put that in the pages anywhere by hand...html or code behind.
 
Back
Top