A Customized MessageBox, ConfirmBox and FrameBox Controls For ASP.Net WebForms

Article

I've been seeing many developers in the forums asking:

How can I display a message box from the server (code behind)?
How can I customize the JavaScript confirm and alert popup?
How can I display a message box like in Windows applications?

The Idea

As some of you may already know, displaying a pop-up message box has always been a pain for most developers in web programming. Everyone has probably used the Page.ClientScript.RegisterStartupScript or the ScriptManager.RegisterClientScriptBlock method to call the JavaScript alert and confirm function for displaying a generic message box in the web page.

I was working with a project before that previously used many popup message to prompt the end user a message based on some actions. At first I simply used the JavaScript alert and confirm function to prompt users a message until I realized that using the simple JavaScript alert/confirm functions makes the page ugly in terms of "look-and-feel" because I can't customize it to conform with the webpage color scheme. Another thing is that I need to prompt end users based on various operations, like for example I need to display a successful message popup if a successful operation happened and using the JavaScript alert for showing a success message may confuse the end users because it uses the default warning image. To overcome those problems I can simply create a modal panel within the page and apply some CSS for setting up the look and feel of the message box but this is not a good approach for me. Why? Two main reasons: Maintainability and Reusability. Since I needed to have a popup message that can be reused across multiple applications and can be easily maintained so I decided to create a composite control for creating customized controls.

Main Features

These controls was designed in which developers can easily prompt a message in the page, whether they use it via server-side or client-side without having much code and to present a user friendly message to end users.
These were created as a common control that can be reused across applications. The maintenance for this control is much easier because any changes made from it would be reflected to all that uses it.
These controls provide options to developers to choose what type of message they want to show to the end user in which the standard JavaScript alert/confirm doesn't have. It also benefits the end users because these controls provide a user friendly interface and each message type are presented in a different color scheme and icon so end users can easily recognize the message. These will help developers to have a consistent message box across applications and provide a fancier message box to end users.
The latest version (version 4) of the control exposes some properties that you can use to change the look and feel.

Control Versions and Where to Download

These controls are absolutely free! The source code can be found and downloaded at CodePlex. Here's the link:

http://proudmonkeycontrols.codeplex.com/

The following are the available versions to download:

ProudMonkey Controls Version 3 (Latest): This is the latest version of the controls and is compatible with ASP.NET 4.0 and AjaxControlToolkit ACT v4.1.51116.0.
ProudMonkey Controls Version 2: This version is compatible with ASP.NET 4.0 and AjaxControlToolkit v4.1.40412.0.
ProudMonkey Controls Version 1: This version is compatible with ASP.NET 3.5 and AjaxControlToolkit v3.0.1106.0.

Please do take note of the ASP.NET and AjaxControlToolkit versions.

If you wish to use a different version of AjaxControlToolkit or if you want to use it in .NET 4.5 version then here's the hack:

Go to the source code and grab the ControlLibrary project. You can get it here:

http://proudmonkeycontrols.codeplex.com/SourceControl/latest
Add the ControlLibrary project to your ASP.NET 4.5 project
Add/Replace the AjaxControlToolkit with the version that you have currently
Build the project
Then use the DLL that was generated

Using the Controls

The MessageBox Control: This control provide developers the option to prompt various message types such as Information, Warning, Success and Error message types. This control can be called via server-side or at the client-side. Here are some screen shots of the MessageBox control.

How to use it

Download and extract the ProudMonkey.Common.Controls.dll.
Add the ProudMonkey.Common.Controls.dll and the AjaxControlToolkit.dll to your project solution.
Right-click on the project and select Add Reference.
Click on the Browse tab and locate the two DLLs specified in Step 2.
Click OK.
Register the controls by adding the following lines below at the top most part of your page (ASPX). You can also register it in your web.config file.
1. <%@ Register assembly="ProudMonkey.Common.Controls"
2. namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>
3. <%@ Register assembly="AjaxControlToolkit"
4. namespace="AjaxControlToolkit" tagprefix="asp" %>
Since the MessageBox control uses higher versions of ASP.NET AJAX (AjaxControlToolKit) then be sure to use the ToolkitScriptManager instead of ScriptManager. The ToolkitScriptManager can be found at the AjaxControlToolKit controls.
Then define the MessageBox control as in the following:
1. <cc1:MessageBox ID="MessageBox1" runat="server" />
Then you're good to go. =}

Using the MessageBox Control

Server-Side Approach (code behind)

MessageBox1.ShowError("Your Message");//Displaying an Error message
MessageBox1.ShowWarning("Your Message");//Displaying a Warning message
MessageBox1.ShowInfo("Your Message");//Displaying an Information message
MessageBox1.ShowSuccess("Your Message");//Displaying a Successful message

Using the code above allows you to display the message box with its default size [H(125px) and W(300px)]. Note that the size is in pixel format. If you want to set the MessageBox size by hand then you can use the overload method like:

MessageBox1.ShowError("Your Message",300,400);

Client-Side Approach (JavaScript)

ShowMsgBox('Error','Sample Error Message.');

Using the code above allows you to display the message box with its default size [H(125px) and W(300px)]. If you want to set the MessageBox size by hand then you can use the overload method like:

ShowMsgBox('Error','Sample Success Message.',125,300);

Note that if you don't want to cause a postback to the server after clicking OK then be sure to include "return false;" after calling the ShowMsgBox() method at the client (JavaScript).

The client-side usage of the MessageBox control is quite different because we'll need to tell the method which message type we want to show to the user by specifying the first parameter as demonstrated above. So if you are going to display various message types via JavaScript then you can use either of these values below as the first parameter:

error
success
info
warning

The ConfirmBox Control: this customized control was created to provide a fancier look and feel confirmation message and added the “Don't ask me again” option to end users. As we know, our standard thus far has been to include this confirmation step at every place within the application where we allow the user to do a delete or critical operations. For some users this confirmation step has become a little annoying. So I have decided to look into what it would take to include the typical “don't ask me question again” checkbox to my ConfirmationBox control.

The following is a sample screen shot of the ConfirmBox control:

Notes:

The "Don't ask me again" option will only be remembered across sessions, so if the page will be loaded again or refreshed then the confirmation box will display as normal.
The "Don't ask me again" option is unique for each control who calls it, so if you opt to display the confirm box for the Delete button then "Don't ask me again" will only be applied for that button control.
The default focus is set to NO
This control can only be called via client side

Sample Usage of the ConfirmBox Control

ASPX Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<cc1:ConfirmBox ID="ConfirmBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"
OnClientClick="ShowConfirmBox(this,'Are you Sure'); return false;" />
</div>
</form>
</body>

Code Behind

using System;
using System.Web;
public partial class YetAnotherTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
}
protected void Button1_Click(object sender, EventArgs e) {
Label1.Text = "PostBack Occured!";
}
}

The FrameBox Control: This customized control was created to allow developers to display a modal type of window for displaying external or internal sites within it. This control also provides an attribute in that developers can dynamically change the header text of the frame. Have a look at the sample screen shown below:

Sample Usage of FrameBox Control

<%@ Register assembly="ProudMonkey.Common.Controls" namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
<cc1:FrameBox ID="FrameBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowFrameBox('Vinz Blog','http://geekswithblogs.net/dotNETvinz/Default.aspx');returnse;" />
</form>
</body>
</html>

Customizing the Modal Box

Customization of the modal look and feel is only applicable to the new version of the ProudMonkey controls (versions 2 and 3 with ASP.NET 4.0). The new versions provide some properties that you can set to customize the modal controls including the header, buttons, body background color, header fonts and so on.

The MessageBox provides the following properties:

HeaderImageUrl: This property sets the ImageUrl to be used as the background in the MessageBox header. Note that the image should be 2 x 28 in size because this image will be repeated horizontally.
HeaderBackgroundColor: This property sets the background color of the MessageBox header. You can use this property if you don't want to use the default header background of the MessageBox or if you don't want to set the HeaderImageUrl property.
HeaderTextColor: This property sets the text fore-color of the MessageBox header.
HeaderTextFont: This property sets the text font of the MessageBox header.
BodyBackgroundColor: This property sets the background color of the MessageBox body where the actual text is displayed.
BodyTextColor: This property sets the text fore-color of the actual content dispalyed in the body.
BodyTextFont: This property sets the text font of the actual content to be displayed in the body
OKButtonImageUrl: This property sets the ImageUrl to be used as the background image for the OK button.
CloseButtonImageUrl: This property sets the ImageUrl to be used as the background image for the Close button.

Note that if you don't set any of those properties then the default styles will be automatically applied.

Sample Usage

<cc1:MessageBox ID="MessageBox1" runat="server"
HeaderImageUrl="Images/header.png"
HeaderTextColor="White"
HeaderTextFont="Arial Black"
BodyBackgroundColor="#E1E5F0"
BodyTextFont="Tahoma"
BodyTextColor="#263F75"
OKButtonImageUrl="Images/btnOK.jpg"
CloseButtonImageUrl="Images/btnClose.jpg" />

Actual Output

The ConfirmBox also provides the same properties just as what the MessageBox does. The only additional properties are:

YesButtonImageUrl: This property sets the ImageUrl to be used as the background image for the Yes button.
NoButtonImageUrl: This property sets the ImageUrl to be used as the background image for the No button.

Again if you don't set any of those properties in the ConfirmBox control, the default styles will be automatically applied.

Sample Usage

<cc1:ConfirmBox ID="ConfirmBox1" runat="server"
YesButtonImageUrl="Images/btnYes.jpg"
NoButtonImageUrl="Images/btnNo.jpg"
CloseButtonImageUrl="Images/btnClose.jpg"
HeaderImageUrl="Images/header.png"
HeaderTextColor="White"
HeaderTextFont="Arial Black" />

Actual Output

The FrameBox has the following properties:

HeaderImageUrl: This property sets the ImageUrl to be used as the background in the FrameBox header. Note that the image should be 2 x 28 in size because this image will be repeated horizontally.
HeaderBackgroundColor: This property sets the background color of the FrameBox header.
HeaderTextColor: This property sets the text foreground color of the MessageBox header.
HeaderTextFont: This property sets the text font of the MessageBox header.
CloseButtonImageUrl: This property sets the ImageUrl to be used as the background image for the Close button.

Sample Usage