In my previous post - Asp.Net PopUp Message Box UserControl
it was implemented by using the ModalPopupExtender control from the AjaxControlToolkit as well as some additional CSS and images. Now I have tried to implement it using jQuery and CSS,am hoping you will like it too.
Returning a practical and easily recognizable message to a user is critical to a positive user experience on a website. In this article we'll create a simple ASP.net user control to display a message back to the user. The user control we will make can easily be drag and dropped onto any section of an aspx page or master page. After that, it just takes one line of code to display a message.
Sprite for the Icons
The Html
Our html source code for the message box control is simply a wrapping container with an inner message type logo and the message to display.
It just takes 1 line of code now to add your message.
Our html source code for the message box control is simply a wrapping container with an inner message type logo and the message to display.
<asp:Panel ID="pnlMessage" Runat="server" Visible="False"><div id="divMessagesLogo" runat="server" class="messages-logo"></div><div class="messages-text"><asp:Literal id="litMessage" runat="server"></asp:Literal></div></asp:Panel><asp:Literal ID="litSpace" Runat="server"></asp:Literal>
The Code
public enum MessageType : int{Error = 0,Warning = 1,Success = 2}protected void Page_Load(object sender, EventArgs e){}public void SetMessage(string sMessage){SetMessage(sMessage, MessageType.Error);}public void SetMessage(string sMessage, MessageType messageType){pnlMessage.CssClass = "messages messages-error";if (messageType == MessageType.Warning){pnlMessage.CssClass = "messages messages-warning";}else if (messageType == MessageType.Success){pnlMessage.CssClass = "messages messages-success";}pnlMessage.Visible = (sMessage.Length > 0);litMessage.Text = sMessage;litMessage.Visible = true;litSpace.Text = "<br />";}public void ClearMessage(){litMessage.Text = "";litSpace.Text = "";pnlMessage.Visible = false;}
You can style the MessageBox control however you want, but here is the styling I'll use for this example.
The CSS
.messages {width:75%; padding:5px; margin-left:3px}.messages-logo {height:32px; width:32px; float:left; background:url(message_logos.png)}.messages-text {margin-left:40px; padding:6px 0}.messages-error {background-color:#fbe3e4; color:#d12f19; border:solid 1px #fbc2c4}.messages-error .messages-logo {background-position:-64px 0}.messages-warning {background-color:#faffcf; color:#5e5f00; border:solid 1px #edef00}.messages-warning .messages-logo {background-position:-32px 0}.messages-success {background-color:#e0efd1; color:#003300; border:solid 1px #a5cc7a}.messages-success .messages-logo {background-position:0 0}
How-to Use It
Now that we have the control build. Simply add the control to the page like in the example below.
<%@ Register src="Messages.ascx" tagname="Messages" tagprefix="uc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Messagebox Example</title><link href="messages.css" rel="Stylesheet" type="text/css" /></head><body><form id="form1" runat="server"><uc1:Messages ID="MessageBox" runat="server" /></form></body></html>
It just takes 1 line of code now to add your message.
MessageBox.SetMessage("ERROR: An example of an error message!");
That's it, hope you enjoy this control. :)
