Click here to Skip to main content
13,343,856 members (75,392 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


8 bookmarked
Posted 26 Oct 2010

Gmail Style User Message Control

, 26 Oct 2010
Rate this:
Please Sign up or sign in to vote.
This is a Gmail style user message control I have written and its part of the XWT Toolkit.


MessageControl is an ASP.NET control which displays user messages like in Gmail application. There are certain characteristics in Gmail user message label;

  • User message label always show on top—regardless of the scrolling 
  • User message label will disappear after few seconds
  • Html can be used as part of the message text

MessageControl inherits the same characteristics and it avoids the hassle of custom JavaScript code. 

How to setup the MessageControl 

As with many other ASP.NET controls, simply drag and drop the MessageControl from the Toolbox panel onto your ASP.NET page. MessageControl needs PageManager control in order to work properly. To download PageManager and setup the Toolbox please read the following guide.

Once you have setup the XWT toolkit you can see several ASP.NET controls. If you are interested please read more about these controls at the following location.

How to use the MessageControl 

Once you have setup the Toolbox, you can use the MessageControl on your ASP.NET page. The following walkthrough will guide you through on how to use MessageControl on button click.

Step 1: Drag and drop PageManager control onto the ASP.NET page.

Step 2: Drag and drop MessageControl onto the ASP.NET page.

Step 3: Drag and drop button onto the ASP.NET page.

Step 4: Copy and paste the following code into the button’s OnClientClick event

OnClientClick="return msg.text('Hello World!');"  

Step 5: Run the application and click on the button to see the message on top of the page. You can scroll down the page to see that the message is fixed on top. Also the message will disappear after 10 seconds.

You can use the following JavaScript functions in MessageControl (as in Step 4) according to your requirement.

msg.html(htmlText) – Show Html in user message. Please refer the sample code. 

msg.text(text, disappearTime) – Show message and modify the disappear time, in seconds.

Note: All the exposed methods are JavaScript functions. However you can use these functions in your server side code as any other JavaScript function. 


MessageControl is a simple ASP.NET user message control. It encapsulates necessary JavaScript code and avoids duplicate code throughout your web application. It is easy to use and gives you a Gmail like user message experience.   

MessageControl is part of the XWT toolkit. Please read about the toolkit at the following locations. 


Please read the following article to learn more about PageManager control 



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ludmal de silva
Singapore Singapore
Ludmal is a Software Architect, technical author and trainer with over 10 years experience in the software development industry. He is a MCPD and MCTS on enterprise application development. He mainly researches on SOA & Web performance. You can read his blog at and e-mail him at Twitter @ludmal

You may also be interested in...


Comments and Discussions

GeneralReason for my vote of 5 Its Simple and wonderful. Pin
Meetha3-Nov-10 1:14
memberMeetha3-Nov-10 1:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 26 Oct 2010
Article Copyright 2010 by Ludmal de silva
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid