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

• Download example v1.1 - 58.6 KB
• 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 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. These 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 Internet Explorer 7 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!

CodeProject