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>
<controls>
<add tagPrefix="Controls" namespace="Controls"/>
controls>
pages>
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>
<Controls:MessagePanel ID="msgPanel" runat="server">
Controls:MessagePanel>
How to code with Message panel
this is useful for any .net framework ? or only support for .net 3.5 framework ?
ReplyDeleteI had tested it with 2.0, 3.0, 3.5
ReplyDelete