Message Panel

This in post show you how effectively you can show you messages and error regarding the user events using the Message Panel control. following are the step by step description of how to create and use Message panel.

Create Message panel

In your application add folder App_Code.
To do that right clicking on Web project select Add Asp.net folder >> App_Code

Add one class file name MessagePanel.cs and copy pest following code into it.

using System;

using System.Web.UI;
using System.Web.UI.WebControls;

namespace Controls
{

   // TODO: add clear link (display: none;) plus requried js

   [ToolboxData("<{0}:MessagePanel runat=\"server">")]
    public class MessagePanel : Panel, INamingContainer
    {

        private const string VSKEY_MESSAGE = "Message";

        private const string VSKEY_ERROR = "Error";

        bool _showMessagePanel;
        bool _showErrorPanel;

        string _messageCssClass;
        string _errorCssClass;
        string _messageIconUrl;
        string _errorIconUrl;

        public MessagePanel()

        {
            ViewState[VSKEY_MESSAGE] = String.Empty;
            ViewState[VSKEY_ERROR] = String.Empty;
        }

       

        #region Accessors

        public string Message
        {
            get { return (string)ViewState[VSKEY_MESSAGE]; }
            set { ViewState[VSKEY_MESSAGE] = value; }
        }

        public string Error
        {
            get { return (string)ViewState[VSKEY_ERROR]; }
            set { ViewState[VSKEY_ERROR] = value; }
        }

        public bool ShowMessagePanel
        {
            get { return _showMessagePanel; }
            set { _showMessagePanel = value; }
        }

        public bool ShowErrorPanel
        {
            get { return _showErrorPanel; }
            set { _showErrorPanel = value; }
        }

        public string MessageCssClass
        {
            get
            {
                if (this._messageCssClass == null)
                {
                    this._messageCssClass = "MessagePanel";
                }
                return _messageCssClass;
            }
            set { _messageCssClass = value; }
        }

        public string ErrorCssClass
        {
            get
            {
                if (this._errorCssClass == null)
                {
                    this._errorCssClass = "ErrorPanel";
                }
                return _errorCssClass;
            }
            set { _errorCssClass = value; }
        }

        public string MessageIconUrl
        {
            get
            {
                if (_messageIconUrl == null)
                {
                    _messageIconUrl = "~/Resources/images/messagebox_info.gif";
                }
                return _messageIconUrl;
            }
            set { _messageIconUrl = value; }
        }

        public string ErrorIconUrl
        {
            get
            {
                if (_errorIconUrl == null)
                {
                    _errorIconUrl = "~/Resources/images/messagebox_critical.gif";
                }
                return _errorIconUrl;
            }
            set { _errorIconUrl = value; }
        }

        #endregion

        protected override void Render(HtmlTextWriter writer)

        {
            if (null != Page)
                Page.VerifyRenderingInServerForm(this);

            if (this.ShowErrorPanel)
            {
                Panel errorPanel = BuildPanel(this.Error, this.ErrorCssClass, ErrorIconUrl);
                this.Controls.Add(errorPanel);
            }

            if (this.ShowMessagePanel)
            {
                Panel messagePanel = BuildPanel(this.Message, this.MessageCssClass, MessageIconUrl);
                this.Controls.Add(messagePanel);
            }

            base.Render(writer);
        }

         protected virtual Panel BuildPanel(string messageText, string cssClass, string imageUrl)

        {
            Panel result = new Panel();

            if (null != imageUrl && cssClass.Length > 0) result.CssClass = cssClass;

            if (null != imageUrl && imageUrl.Length > 0)
            {
                System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();
                image.ImageUrl = imageUrl;
                result.Controls.Add(image);
            }

            Panel message = new Panel();
            message.Controls.Add(new LiteralControl(messageText));
            result.Controls.Add(message);

            return result;
        }

        public void ShowMessage(string message)

        {
            ShowMessage(message, true);
        }

        public void ShowMessage(string message, bool clearExistingMessages)
        {
            if (clearExistingMessages)
                this.Message = message;
            else
                this.Message += " " + message;

            this.ShowMessagePanel = true;
            this.Visible = true;
        }

        public void ShowError(string message)

        {
            ShowError(message, true);
        }

        public void ShowError(string message, bool clearExistingMessages)
        {
            if (clearExistingMessages)
                this.Error = message;
            else
                this.Error += " " + message;

            this.ShowErrorPanel = true;
            this.Visible = true;
        }

        public void Clear()

        {
            this.Visible = false;
        }

    }

}

Add following CSS code in your .css file and put proper images at path shown into the code

/* Start: Message/Error Display CSS*/
div.MessagePanel {
/*background:#EEEEEE none repeat scroll 0%;*/
border:1px dashed #0BAF4D;
color:#0BAF4D;
font-weight:bold;
/*padding:5px;*/
font-size:13px;
margin-bottom:10px;
}


div.ErrorPanel {
/*background:#FFFFCC none repeat scroll 0%;*/
border:1px dashed red;
color:red;
font-weight:bold;
font-size:13px;
margin-bottom:10px;
}

div.ErrorPanel img, div.MessagePanel img {
float:left;
}

div.ErrorPanel div, div.MessagePanel div {
margin-left:32px;
padding-top:8px;
padding-bottom:8px;
text-align:left;
}
/* End: Message/Error Display CSS*/

How to put Message panel into .ASPX or .ASCX file

Add following into the web.config

<system.web>

  <pages>
     <controls>

         <add tagPrefix="Controls" namespace="Controls"/>
     controls>
  pages>

system.web>

Add following in your .ASPX or .ASCX file where you want to show message panel.

<Controls:MessagePanel ID="msgPanel" runat="server">
Controls:MessagePanel>

How to code with Message panel

In codebehind file use following methods to show and display messages and errors

To clear message

msgPanel.Clear();

To show message

msgPanel.ShowMessage("Meesage");

To show error

msgPanel.ShowError("Error");


Out put of message panel is like bellow

Message

Error