:::: MENU ::::

Monday, September 15, 2008

For a better user experience you would your users to see please wait message while browser render the page completely. Here is the one solution to the same problem. Let's create a master page called Site.master and a web content form as demo.aspx.

   1:  Loading Demo

 

Demo.aspx is the web content form which fetches data from a database.

   1:  <!-- Code to fetch data from a database -->

To show loading message add following code to the code behind of master file Site.master.cs

   1:   
   2:  protected override void OnLoad(EventArgs e) 
   3:  { 
   4:  if (!IsPostBack) 
   5:  { 
   6:  Response.Buffer = false;
   7:  Response.Write("
   8:  <div style="top: 2px; left: 2px; width: 83px; height: 19px; text-align: right; background-color: orange">
   9:  Please wait...
  10:  </div>
  11:  "); 
  12:  Response.Flush(); 
  13:  } 
  14:  base.OnLoad(e); 
  15:  } 
  16:  protected override void Render(HtmlTextWriter writer) 
  17:  { 
  18:  if (!IsPostBack) 
  19:  { 
  20:  Response.Clear(); 
  21:  Response.ClearContent();
  22:  } 
  23:  base.Render(writer); 
  24:  } 

in the Site.master.aspx file add following javascript at the end of the file.

   1:   
   2:  try{
   3:  var divLoadingMessage = document.getElementById("divLoadingMsg");
   4:  if (divLoadingMessage != null && typeof(divLoadingMessage) != 'undefined') 
   5:  { 
   6:  divLoadingMessage.style.display="none"; 
   7:  divLoadingMessage.parentNode.removeChild(divLoadingMessage); 
   8:  } 
   9:  }
  10:  catch(e){} 

That's it now all your pages using Site.master will be showing Please wait.. message when the page starts loading. Of course instead of putting a message you can put a nice web2.0 loading image in between divLoadingMsg tags.

So how does this works? The onLoad event of master page will be called before any of the content web form's Onload event. as soon as master page loads div tag becomes visible. After the page has loaded completely the script written at the end of the master page hides the div tag. so simple isnt't it.Hope this helps!

More