Update: I fixed a couple issues and updated the zip file below.
- The close button's client side onclick event wasn't getting the correct client id when used inside a Master page. I moved the onclick addition to the Load event to correct it.
- The message would not display when used inside an UpdatePanel. The Page.ClientScript.RegisterStartupScript method only works for synchronous (non-AJAX) post backs. The control now uses the ScriptManager.RegisterStartupScript method for async post backs.
Last month Janko posted an excellent article about creating standard website message boxes. He concluded it with this:
I am aware that this code isn't perfect, although it did a great job for me on several projects. Did you ever need or do something similar? Do you have any other ideas how this could be implemented? Share it!
I took that as a challenge 
. I loved his idea but the implementation didn't fit my needs 100%. Since I maintain multiple web projects I try to use custom web controls over user controls. I find it easier to reference a web control library than keeping track of .ascx files. In addition, I found that if a message was displayed and the user clicks the close button and then does something else on the page that initiates a postback, the message would be visible again.
Creating the Custom WebControl
I used CompositeControl as my base class and started by duplicating the functionality of Janko's user control. The first difference in the code is the CreateChildControls method.
87 protected override void CreateChildControls()
88 {
89 base.CreateChildControls();
90
91 // the wrapper div
92 Style[HtmlTextWriterStyle.Display] = "none";
93 CssClass = "container";
94
95 // the message div
96 _pnlMessageBox = new Panel();
97 _pnlMessageBox.ID = "pnlMessageBox";
98 Controls.Add(_pnlMessageBox);
99
100 // the close button
101 _hlClose = new HyperLink();
102 _hlClose.ID = "hlClose";
103 _hlClose.ToolTip = "Close";
104 _hlClose.CssClass = "close";
105 // add the onclick event
106 string onclick = String.Format("document.getElementById('{0}').style.display = 'none';", ClientID);
107 _hlClose.Attributes.Add("onclick", onclick);
108 _pnlMessageBox.Controls.Add(_hlClose);
109
110 // the message
111 _pMessage = new HtmlGenericControl("p");
112 _pnlMessageBox.Controls.Add(_pMessage);
113
114 _litMessage = new Literal();
115 _litMessage.ID = "litMessage";
116 _pMessage.Controls.Add(_litMessage);
117 }
This is where I'm (you guessed it) creating and adding the child controls. One difference here is Style[HtmlTextWriterStyle.Display] = "none";. I'll get to that next. Another difference is I'm not using an image control inside the close hyper link. I modified the css to include a background image for the hyperlink instead. I did this because I didn't want to worry about setting the close image url in each project in addtion to including the css file and associated images.
Keeping the MessageBox Hidden on PostBack
Instead of using the server side Visible property to show/hide the message I'm using javascript and css. This can be better or worse. Better because it allows me to keep the message hidden on post back, and worse because the html bits are sent to the client on every request even if the message is hidden. In the CreateChildControls method above I'm setting the style display value to 'none'. This is what hides message. In the Show method, I'm using a startup script to change the display value to its default - 'block', which shows the message. This startup script is lost on post back so the message goes back to hiding.
204 // add a script to display the message on page load
205 string script = String.Format("document.getElementById('{0}').style.display = 'block';", ClientID);
206
207 Page.ClientScript.RegisterStartupScript(GetType(), ClientID, script, true);
I've been using this is production for a few weeks now and its done very well for me, but I also don't claim to write perfect code. If you have found a better way, please let me know!
MessageBoxSite.zip (23.91 kb)
Update: The source now includes a Visual Studio 2005 WebSite with an example page.
Filter by APML
Subscribe