Gmail Style User Message Control

• Download GmailStyleUserMessages - 55.86 KB

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

aspnet-pagemanager.aspx