Click here to Skip to main content
15,867,488 members
Articles / Web Development / HTML

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

Rate me:
Please Sign up or sign in to vote.
4.88/5 (32 votes)
27 Apr 2013CPOL4 min read 60.1K   1.5K   38   44
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.

Image 1

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.

Image 2

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.

C#
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.

Image 3

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.

HTML
<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:

CSS
.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.

JavaScript
<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.

C#
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

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

Client Side

ASP.NET
<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.

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

Then, add an exception Class in your CSS file.

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

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

C#
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)


Written By
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

Comments and Discussions

 
QuestionNotify Center Position Pin
Vicente Dávila Muñoz14-Oct-15 5:03
Vicente Dávila Muñoz14-Oct-15 5:03 
AnswerRe: Notify Center Position Pin
Sk. Tajbir7-Dec-15 6:06
Sk. Tajbir7-Dec-15 6:06 
BugError Pin
842144133322-Feb-15 22:48
professional842144133322-Feb-15 22:48 
GeneralRe: Error Pin
Sk. Tajbir23-Feb-15 5:59
Sk. Tajbir23-Feb-15 5:59 
QuestionUpdate Panel Pin
Amit Kumar Soni2-Jul-14 20:46
Amit Kumar Soni2-Jul-14 20:46 
How Can I Use this method button inside update panel ?
I am not able to get the message when I am doing that
QuestionHow use with updatepanel, server side? Pin
fuckingmars30-Oct-13 21:07
fuckingmars30-Oct-13 21:07 
GeneralMy vote of 5 Pin
nagulameera31-Aug-13 2:54
nagulameera31-Aug-13 2:54 
GeneralRe: My vote of 5 Pin
Sk. Tajbir31-Aug-13 3:04
Sk. Tajbir31-Aug-13 3:04 
QuestionNot able to use this on master page Pin
md arif25-Aug-13 1:14
md arif25-Aug-13 1:14 
AnswerRe: Not able to use this on master page Pin
Sk. Tajbir25-Aug-13 2:33
Sk. Tajbir25-Aug-13 2:33 
GeneralMy vote of 5 Pin
onewarden12-Jun-13 2:13
onewarden12-Jun-13 2:13 
GeneralRe: My vote of 5 Pin
Sk. Tajbir12-Jun-13 2:29
Sk. Tajbir12-Jun-13 2:29 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA10-May-13 18:25
professionalȘtefan-Mihai MOGA10-May-13 18:25 
GeneralRe: My vote of 5 Pin
Sk. Tajbir11-May-13 7:12
Sk. Tajbir11-May-13 7:12 
GeneralExcelente trabajo! Pin
vicentehg2-May-13 9:56
vicentehg2-May-13 9:56 
GeneralRe: Excelente trabajo! Pin
Sk. Tajbir2-May-13 10:40
Sk. Tajbir2-May-13 10:40 
GeneralMy vote of 5 Pin
manoj.jsm29-Apr-13 23:11
manoj.jsm29-Apr-13 23:11 
GeneralRe: My vote of 5 Pin
Sk. Tajbir30-Apr-13 1:17
Sk. Tajbir30-Apr-13 1:17 
GeneralMy vote of 5 Pin
Md. YaSiR aRaFaT27-Apr-13 23:00
Md. YaSiR aRaFaT27-Apr-13 23:00 
GeneralRe: My vote of 5 Pin
Sk. Tajbir28-Apr-13 1:12
Sk. Tajbir28-Apr-13 1:12 
GeneralThank you. Right to the point Pin
KamalChauhan25-Apr-13 3:33
KamalChauhan25-Apr-13 3:33 
GeneralRe: Thank you. Right to the point Pin
Sk. Tajbir25-Apr-13 8:25
Sk. Tajbir25-Apr-13 8:25 
GeneralMy vote of 5 Pin
S. M. Ahasan Habib15-Apr-13 7:45
professionalS. M. Ahasan Habib15-Apr-13 7:45 
GeneralRe: My vote of 5 Pin
Sk. Tajbir15-Apr-13 7:53
Sk. Tajbir15-Apr-13 7:53 
GeneralSweet and simple Pin
rajkaty8-Apr-13 20:05
rajkaty8-Apr-13 20:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.