Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Metro UI Alert Message using ASP.NET User Control & jQuery

, 27 Apr 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
This post shows how to create Metro UI message box for different websites to show message. Message box is managed from ASP.NET user control and used jQuery to animate the box.

Introduction

In our websites, we show different alert messages for different purposes. Some very common alert messages are “Invalid Username or Password”, “Item inserted successfully”, “Thank you for contacting us. We will get back to you soon” or sometimes we show exception messages as well. These messages are usually shown in alert boxes or sometimes in different places on the website. In big projects, we have to show numerous number of alert messages. Sometimes, it is difficult to manage all messages and we use different type of messages for the same purpose. In this post, I am going to talk about how we can show different alert messages and manage all messages from one place.

Let's Start

First let us create a Class to store all the messages. Right click on your project and add a new Class name Message.

This Class will have an Enum for type of message and another nested Class to store all the text messages. A namespace is given so that we can access the Class from anywhere using this namespace.

namespace Helper
{
    public static class Message
    {
        public enum Type
        {
            success, error, info
        };

        public static class Text
        {
            public const string START_INFO = "Click on the buttons 
            to show different messages. This message will automatically hide after 10 seconds.";

            public const string SUCCESS_SERVER = "This is a Success message from Server Side.";
            public const string ERROR_SERVER = "This is an Error message from Server Side.";
            public const string INFO_SERVER = "This is a general Info message from Server Side.";

            public const string SUCCESS_CLIENT = "This is a Success message from  Client Side.";
            public const string ERROR_CLIENT = "This is an Error message from Client Side.";
            public const string INFO_CLIENT = "This is an Info message from Client Side. 
            	This is used for general purpose.";
        }
    }
} 

Now let us take a user control to show the messages. Again, right click on your project and add a new User Control. Let’s name it Message as well.

Now our target is to create a message box with different color which will animate from right side of the screen. The message box will show our given text and depending on message type, it will show in different color. After a certain time, it will automatically animate outside our screen.

Let’s take an HTML div to create the box and another nested div to show the message.

<div id="divMessageBody" class="message-box">
    <a class="close-btn" onclick="HideMessage();">x</a>
    <div id="divMessage" class="message"></div>
</div> 

Here is the CSS code:

.message-box {
    width: 270px;
    display: inline;
    height: auto;
    padding: 30px 20px;
    position: fixed;
    right: -320px;
    top: 40px;
    font-size: 15px;
    color: #fff;
}

.close-btn {
    position: absolute;
    right: 6px;
    top: 0;
    cursor: pointer;
}

    .close-btn:hover {
        opacity: 0.7;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
    }

.message {
    width: 100%;
}

.success {
    background-color: #72A101;
    border: 2px solid #4d6d01;
}

.error {
    background-color: #d04a01;
    border: 2px solid #983600;
}

.info {
    background-color: #0285c2;
    border: 2px solid #00577f;
}

Here we will give success, error or info Class to divMessageBody depending on which type of message we want to show. This Classes will show different color for different messages. To add this Class, we've created an Enum named Type in our Message.cs Class. We will send this Enum value as string to this div as CSS Class. Another thing is we give the message-box class’s position fixed so that it will not break our website’s UI structure. Also this message box supports all the modern browsers including IE7 and above.

Now let us create two JavaScript functions, ShowMessage and  HideMessage. ShowMessage will take two parameters which are message and type. This function will insert message into divMessage and add type to divMessageBody as CSS Class. Here is the code for both ShowMessage and HideMessage.

<script type="text/javascript">
    var msgBoxTimeout;
    var timeToShow = 10000;
    var msgBoxRight = -320;

    function ShowMessage(msg, type) {
        clearInterval(msgBoxTimeout);
        $("#divMessageBody").css("right", msgBoxRight);

        var classAttr = "message-box " + type;
        $("#divMessage").html(msg);
        $("#divMessageBody").attr("class", classAttr);

        $("#divMessageBody").stop().animate({
            right: "0px"
        }, 700, "easeInOutCirc");

        msgBoxTimeout = setTimeout(function () {
            HideMessage();
        }, timeToShow);
    }

    function HideMessage() {
        $("#divMessageBody").stop().animate({
            right: msgBoxRight
        }, 900, "easeInOutCirc");

        clearInterval(msgBoxTimeout);
    }
</script>

Here, we've used jQuery animate function to animate our message box. We've also used easing effect for beautiful and smooth animation . If you want to use easing effect, make sure you've added jquery.easing.js or jqery.custom.ui.js in your webpage. Also if you don’t want to use easing effect, then remove easeInOutCirc from jquery animate function.

Now let’s create a ShowMessage function for server side code. This function will call the JavaScript ShowMessage function with a message and type.

public void ShowMessage(string msg, string type)
{
    Page.ClientScript.RegisterStartupScript(GetType(), "Script", 
    "<script type=\"text/javascript\">ShowMessage(\"" + 
    msg + "\",\"" + type + "\");</script>");
} 

Now call this function from both server side and client side.

Server Side

protected void btnSuccess_Click(object sender, EventArgs e)
{
    ucMessage.ShowMessage(Message.Text.SUCCESS_SERVER, Message.Type.success.ToString());
}

Client Side

<input type="button" value="Success" class="btn btn-success" 
onclick="ShowMessage('<%= Helper.Message.Text.SUCCESS_CLIENT %>',
'<%= Helper.Message.Type.success %>');" /> 

How to Integrate Quickly?

You can directly use this user control in your project. Just download the file and add the user control Message.ascx in your project. Also add required CSS from layout.css and add Message.cs file from App_Code folder. If you want to add more messages, then add them in Message.cs file’s Text Class. Also if you want to add new type, add it in the Type Enum and create CSS class of that same name in your CSS file. For example, if you want to add a new type exception, then first add a new value on the Type Enum.

public enum Type
{
    success, error, info, exception
}; 

Then add an exception Class in your CSS file.

.exception {
    background-color: #a8a8a9;
    border: 2px solid #696969;
}  

Now, you can call the exception type from anywhere with your exception message.

ucMessage.ShowMessage(ex.Message, Message.Type.exception.ToString()); 

Conclusion

Now a days, it is very important to make a user friendly environment. Most users are attracted to the websites with beautiful user experience. So it is important to show different alert messages in such a way so that users don’t get confused or disturbed. I hope this post will help you to let the user know what you want to inform them.

Good luck! Smile | <img src=

License

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

Share

About the Author

Sk. Tajbir
Software Developer (Senior) Desme
Bangladesh Bangladesh
I've started working on C#.Net WinForm in 2011 and developed a desktop application named NoseOp for Microsoft Imagine Cup 2011 and my team scored one of the top 6 teams of Bangladesh. NoseOp is an application for physically disable person to operate computer easily and do everyday work. Later on I scored 1st in software exhibition of American International University - Bangladesh's(AIUB) Software Engineering day.
 
After that I've started working on Asp.Net and developed several websites which are running successfully in different countries. I'm very much interested and passionate about learning new technologies.
 
www.sktajbir.com
 
My Projects:
 
CodeProject Achievement:
  • 2nd in Best Web Dev article of December 2012
  • 7th in Best overall article of April 2013
  • 3rd in Best Web Dev article of April 2013
Follow on   Twitter   LinkedIn

Comments and Discussions

 
QuestionUpdate Panel PinmemberAmit Kumar Soni2-Jul-14 21:46 
QuestionHow use with updatepanel, server side? Pinmemberfuckingmars30-Oct-13 22:07 
GeneralMy vote of 5 Pinmembernagulameera31-Aug-13 3:54 
GeneralRe: My vote of 5 PinprofessionalSk. Tajbir31-Aug-13 4:04 
QuestionNot able to use this on master page Pinmembermd arif25-Aug-13 2:14 
AnswerRe: Not able to use this on master page PinprofessionalSk. Tajbir25-Aug-13 3:33 
GeneralMy vote of 5 Pinmemberonewarden12-Jun-13 3:13 
GeneralRe: My vote of 5 PinprofessionalSk. Tajbir12-Jun-13 3:29 
GeneralMy vote of 5 PinmemberMihai MOGA10-May-13 19:25 
GeneralRe: My vote of 5 PinprofessionalSk. Tajbir11-May-13 8:12 
GeneralExcelente trabajo! Pinmembervicentehg2-May-13 10:56 
GeneralRe: Excelente trabajo! PinprofessionalSk. Tajbir2-May-13 11:40 
GeneralMy vote of 5 Pinmembermanoj.jsm30-Apr-13 0:11 
GeneralRe: My vote of 5 PinprofessionalSk. Tajbir30-Apr-13 2:17 
GeneralMy vote of 5 PinmemberMd. YaSiR aRaFaT28-Apr-13 0:00 
GeneralRe: My vote of 5 PinprofessionalSk. Tajbir28-Apr-13 2:12 
GeneralThank you. Right to the point PinmemberKamalChauhan25-Apr-13 4:33 
GeneralRe: Thank you. Right to the point PinprofessionalSk. Tajbir25-Apr-13 9:25 
GeneralMy vote of 5 PinmemberS. M. Ahasan Habib15-Apr-13 8:45 
GeneralRe: My vote of 5 PinprofessionalSk. Tajbir15-Apr-13 8:53 
GeneralSweet and simple Pinmemberrajkaty8-Apr-13 21:05 
GeneralRe: Sweet and simple PinprofessionalSk. Tajbir8-Apr-13 22:02 
GeneralMy vote of 5 PinmemberMunir Hassan7-Apr-13 23:37 
GeneralRe: My vote of 5 PinprofessionalSk. Tajbir7-Apr-13 23:39 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun7-Apr-13 21:49 

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 | Terms of Use | Mobile
Web04 | 2.8.1411028.1 | Last Updated 27 Apr 2013
Article Copyright 2013 by Sk. Tajbir
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid