Click here to Skip to main content
Click here to Skip to main content

Tagged as

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.

Introduction

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.

http://code.google.com/p/extensible-web-toolkit/wiki/xwtsetup

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.

http://code.google.com/p/extensible-web-toolkit/

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. 

Conclusion

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.   

http://code.google.com/p/extensible-web-toolkit/
http://code.google.com/p/extensible-web-toolkit/downloads/list
http://www.extensible-web.com 

Update

Please read the following article to learn more about PageManager control 

aspnet-pagemanager.aspx 

License

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

Share

About the Author

Ludmal de silva
Architect
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 www.ludmal.net and e-mail him at ludmal@gmail.com. Twitter @ludmal
Follow on   Twitter

Comments and Discussions

 
GeneralThanks Pinmembermparvez11-Sep-13 2:35 
GeneralReason for my vote of 5 Its Simple and wonderful. PinmemberMeetha3-Nov-10 0:14 
GeneralSure will take that idea on-board. Next release will include... PinmemberLudmal de silva27-Oct-10 18:54 
Sure will take that idea on-board. Next release will include that feature.
GeneralMake it accessible from codebehind. Then it would really be ... Pinmemberj03x226-Oct-10 21:04 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 26 Oct 2010
Article Copyright 2010 by Ludmal de silva
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid