Message Box in ASP.NET CSS,CustomValidator,Validation Summary and Example

Message is a must in a web application. Message can be used to show information,warning,error, and successfully message to tell users the status of their process.

This is a sample message that can be use in your web application.

Have a try.

First of all, you can download all this image icon and add to your web application project.

The CSS File

        .notification
        {
            position: relative;
            margin: 0 auto;
            padding: 2px 10px 2px 2px;
            border: 1px solid;
            background-position: 10px 11px !important;
            background-repeat: no-repeat !important;
            font-size: 12px;
            width: 99%;
        }
        
        .attention
        {
            background: #fffbcc url('../Images/Icon/exclamation.png') 10px 11px no-repeat;
            border-color: #e6db55;
            color: #666452;
        }
        
        .information
        {
            background: #dbe3ff url('../Images/Icon/information.png');
            border-color: #a2b4ee;
            color: #585b66;
        }
        
        .success
        {
            background: #d5ffce url('../Images/Icon/tick_circle.png');
            border-color: #9adf8f;
            color: #556652;
        }
        
        .error
        {
            background: #ffcece url('../Images/Icon/cross_circle.png');
            border-color: #df8f8f;
            color: #665252;
        }

The ASPX Page

    <div>
        <asp:ValidationSummary ID="ValidationSummary1" DisplayMode="BulletList" ShowSummary="true"
            ViewStateMode="Disabled" runat="server" />
        <asp:ValidationSummary ID="ValidationSummary2" DisplayMode="BulletList" ShowSummary="true"
            ViewStateMode="Disabled" runat="server" />
        <asp:ValidationSummary ID="ValidationSummary3" DisplayMode="BulletList" ShowSummary="true"
            ViewStateMode="Disabled" runat="server" />
        <asp:ValidationSummary ID="ValidationSummary4" DisplayMode="BulletList" ShowSummary="true"
            ViewStateMode="Disabled" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Show All Message" OnClick="Button1_Click" />
    </div>

The Code Behind

 
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public static CustomValidator MessageValidator(string message, string ValidationGrup = "")
        {
            CustomValidator cuss = new CustomValidator();
            cuss.ErrorMessage = message;
            cuss.IsValid = false;
            if (ValidationGrup.Trim() != "")
            {
                cuss.ValidationGroup = ValidationGrup;
            }
            return cuss;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            //error message
            string message = "Error Message";
            CustomValidator cuss = MessageValidator(message);
            this.Page.Validators.Add(cuss);
            ValidationSummary1.CssClass = "notification error";

            //Success message
            message = "Success Message";
            cuss = MessageValidator(message);
            this.Page.Validators.Add(cuss);
            ValidationSummary2.CssClass = "notification success";

            //Attention message
            message = "Attention Message";
            cuss = MessageValidator(message);
            this.Page.Validators.Add(cuss);
            ValidationSummary3.CssClass = "notification attention";

            //Information message
            message = "Information Message";
            cuss = MessageValidator(message);
            this.Page.Validators.Add(cuss);
            ValidationSummary4.CssClass = "notification information";

        }       

The Output example

By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)