Please Wait Loading Message

Recently i had to show this message when the work is going on a Button Click on a aspnet page. I wasn't using Ajax so no chance of Update Progress control...

The best alternate solution i found was CSS ... Its pretty Simple  all we do is use a DIV and then use the Style property to "block" and "none".
coming to code... We just create a div with some message, here i used " Please Wait......."

<div id="loading">Please wait......</div>
This shows the "Please Wait..." message always which we don't want.. So what we do is set the style for this div to "none" as shown 
<div id="loading" style="DISPLAY: none">Please wait......</div>
Next thing is we need to show this only when some work is happening. say like on a Button Click... So what i need to do is make the div visible on button click. In the page code behind i use the button attributes to make the div visible using the OnClick event...
Button1 .Attributes .Add ("OnClick","document.getElementById('loading').style.display='block'");
Just in case if u r n't sure about showing the div all i did was change the style from "none" to "block" 
Here is the code in case you want to  copy and paste the ASPX and CS file..

ASPX

<%@ Page language="c#" Codebehind="WebForm12.aspx.cs" AutoEventWireup="false" Inherits="WebApplication5.WebForm13" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Please Wait Loading Example</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<style type="text/css">
#loading { MARGIN-TOP: -50px; LEFT: 50%; MARGIN-LEFT: -100px; WIDTH: 200px; POSITION: absolute; TOP: 50%; HEIGHT: 100px; BACKGROUND-COLOR: #c0c0c0; TEXT-ALIGN: center }
</style>
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" runat="server" Text="Button" </asp:Button>
<asp:Button id="Button2" runat="server" Text="Button"></asp:Button>
<div id="loading" style="DISPLAY: none">
<B>Please wait...page Loading</B>&nbsp;
</div>
</form>
</body>
</html>


CS File

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;
using System.Threading ;

namespace WebApplication5
{
public class WebForm13 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button1;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
Button1 .Attributes .Add ("OnClick","document.getElementById('loading').style.display='block'");
}

#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);
}

/// Required method for Designer support - do not modify/// the contents of this method with the code editor./// 
private void InitializeComponent()
{
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion

private void Button1_Click(object sender, System.EventArgs e)
{
// This is where iam simulating long running task just making the thread wait for 10 //seconds
Thread.Sleep (10000);
}
}
}

Pretty simple isn't it? One other way i found (in some website i am not sure where i will post the link where i found it once i remember that) is to use the "mouseup" of the button and then set the visibility of the div to "block" This way u don't have to add the attributes to the button click on the server side like how i did in the above code but rather you will do some thing like this
<asp:button onmouseup="document.getElementById('loading').style.display='block'" id="Button1" runat="server" text="Button"></asp:Button>
you can play with the "style" so as that you can set the width, height, forground, background etc.... and also using the position u can postion the div where ever you want i suggest doing it at the top that way it will be easily seen... and in case you want to show a image instead of message or both just put a img tag in the div and it will show up the image.. When you want the "please wait" message to show up in all the pages and in all the page events.. then put this code in the "master Page" and make visible in the page load and it should work

Cheers,
Bobby

Tips on ASP.NET

Been working with ASPNET for quite some time now... I thought its time to share some of my knowledge...

My primary reason for this Blog is to basically write about some of the problems i have and solutions ... I wont be explaining much so beginners might find this difficult.

you can always leave a problem in the comment section so that i can send solutions once i get time

Bobby