Customized Message Bar

Today I will show you the message bar which I normally used to display the standard place to display the messages like confirmation, errors, alerts etc. I also embed this customized message bar with ASP.net Validation Summary control and Validation controls will work accordingly.

Herr are simple steps which you have follow:

Add the below code in your aspx page this will display the customized message other than the Validation controls. For example you when you save the record in the database you can display on the page that record has been saved successfully.

<!-- Message bar-->
    <table style="border-collapse: collapse" width="100%" align="center" border="0">
        <tr>
            <td>
                <table id="msgs" style="border-collapse: collapse" bordercolor="#cccccc" cellpadding="1"
                    width="100%" align="left" border="1" runat="server">
                    <tbody>
                        <tr>
                            <td>
                                <table width="100%" bgcolor="#fffce1" border="0">
                                    <tr>
                                        <td align="center" width="20" bgcolor="#fffce1">
                                            <asp:Image ID="msgpic" runat="server"></asp:Image></td>
                                        <td class="message" bgcolor="#fffce1">
                                            <asp:Label ID="msgtext" runat="server"></asp:Label></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <!-- // Message bar-->

This control will display the in the same interface but it will only with the Validation controls, so add this line as well.

<asp:validationsummary id=validSum runat="server" CssClass="rtext" Width="100%" ForeColor=" " DisplayMode="SingleParagraph"></asp:validationsummary>

Add this line of code in you Page (Presentation Layer) code behind.

#region Help message code
    /// <summary>
    /// To display the message bar
    /// </summary>
    /// <param name="strError">Error test</param>
    /// <param name="dtype">pic type</param>
    /// <param name="myMsg">ok message </param>
    private void DisplayConfMsg(string strError, short dtype, string myMsg)
    {
        UserInterface.UI cls;
        string strMsg;
        switch (dtype)
        {
            case 1:
                if (string.IsNullOrEmpty(strError) == true)
                {
                    strMsg = myMsg;
                    cls = new UI(msgtext, msgs, msgpic);
                    cls.DisplayMsg(strMsg, false);
                }//if
                else
                {
                    strMsg = strError;
                    cls = new UI(msgtext, msgs, msgpic);
                    cls.DisplayMsg(strMsg, true);
                }//else
                break;
            case 2:
                strMsg = myMsg;
                cls = new UI(msgtext, msgs, msgpic);
                cls.DisplayMsg(strMsg, "1");
                break;
            case 3:
                strMsg = myMsg;
                cls = new UI(msgtext, msgs, msgpic);
                cls.DisplayMsg(strMsg, "3");
                break;
        }//switch
    }//DisplayConfMsg
    #endregion

This the User Interface Class where I kept all the function related to message bar. So just create one and paste this code.
      
  private System.Web.UI.HtmlControls.HtmlTable msgs;
        private System.Web.UI.WebControls.Label msgtext;
        private System.Web.UI.WebControls.Image msgpic;

        #region Message Bar

        public UI(System.Web.UI.WebControls.Label ml, System.Web.UI.HtmlControls.HtmlTable tb, System.Web.UI.WebControls.Image mpic)
        {
            msgs = tb;
            msgtext = ml;
            msgpic = mpic;

        }

        public void DisplayMsg(string textmsg, bool typemsg)
        {
            if (typemsg == true)
            {
                msgs.Visible = true;
                msgtext.CssClass = "errortext";
                msgtext.Text = textmsg;
                msgpic.ImageUrl = "images/errorpic.gif";

            }
            else
            {
                msgs.Visible = true;
                msgtext.CssClass = "oktext";
                msgtext.Text = textmsg;
                //msgtext.Style["color"] = "#666666";
                //msgtext.Style["CssClass"]="message";
                msgpic.ImageUrl = "images/okpic.gif";
                msgtext.Attributes.Add("class", "message");
            }
        }//DisplayMsg

        public void DisplayMsg(string textmsg, string typemsg)
        {
            if (typemsg == "1")
            {
                msgs.Visible = true;
                msgtext.CssClass = "errortext";
                msgtext.Text = textmsg;
                msgpic.ImageUrl = "images/msgpic.gif";
            }
        }//DisplayMsg

        /// <summary>
        /// for message bar
        /// </summary>
        /// <param name="textmsg"></param>
        /// <param name="typemsg"></param>
        public void DisplayStatus(string textmsg, short typemsg)
        {

            switch (typemsg)
            {
                case 1:
                    msgs.Visible = true;
                    msgtext.CssClass = "msgtext";
                    msgtext.Text = textmsg;
                    msgpic.ImageUrl = "images/testpic.gif";
                    break;
            }
        }

        /// <summary>
        /// for message bar
        /// </summary>
        public void ClearMsg()
        {
            msgs.Visible = false;
            msgtext.CssClass = "";
            msgtext.Text = "";
            msgpic.ImageUrl = "";
        }
        #endregion

After finish all the above steps finally you have to pass the messages (Presentation Layer)

//To display the confirmation messages
string err=””;
string msg=”Your record has been updated successfully.”;

DisplayConfMsg(err, 1, msg);

//To display the error messages
string err=”Error: Unattended error occord while updating the record.”;
string msg=””;

DisplayConfMsg(err,0, msg);

For Validation controls Add this control in the ASPX page.

<asp:RequiredFieldValidator ID="rfvFocalPoints" runat="server" ControlToValidate="ddlFocalPoints"
                                    CssClass="rtext" ErrorMessage='<table style="BORDER-COLLAPSE: collapse" width="100%" align="center" border="0"><tr><td><table id="msgs" style="BORDER-COLLAPSE: collapse" borderColor="#cccccc" cellPadding="1" width="100%" align="left" border="1" runat="server"><tbody><tr><td><table width="100%" bgColor="#fffce1" border="0"><tr><td align="center" width="20" bgColor="#fffce1"><IMG src="images/warn.gif" border="0"></td><td class="message" bgColor="#fffce1"><asp:label id="msgtext" CssClass="errortext" Runat="server">Please select Focal Point from the dropdown list.</asp:label></td></tr></table></td></tr></tbody></table></td></tr></table>'
                                    Font-Names="Wingdings 3" ForeColor=" " InitialValue="0">f</asp:RequiredFieldValidator>

The idea of choosing Validation Control messages and Customized message bar is because user will experience the same look n feel to view any system related messages.

Happy Coding!