Metro UI Alert Message using Asp.Net User Control & jQuery

Download Source Files (version 1.1)

View Live Demo 


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 numbers of alert messages. Sometimes it is difficult to manage all messages and we use different type of messages for same purpose. In this article I am going to talk about how we can show different alert messages and manage all messages from one place.

Click here to View Demo

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.

Adding Message.cs file

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.

Adding Message.ascx file

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 certain time it will automatically animate outside our screen.

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

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

Here is 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 browser including ie7 and above.

Now let us create two JavaScript function, ShowMessage and  HideMessage. ShowMessage will take two parameter 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 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 you 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 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 article will help you to let user know what you want to inform them. Good luck :)

CodeProject