Introduction
In this post, you will learn about the customized MessageBox
, ConfirmBox
and FrameBox
controls for ASP.NET WebForms and how to use them in your application.
Background
I've been seeing many developers in various technical 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. In the context of ASP.NET WebForms, 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 messages 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 have decided to create a composite control for creating customized controls.
Main Features
Here are the main features of these controls:
- 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 is 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 can also be downloaded at CodePlex. Here's the link:
The following are the available versions to download:
Please do take note of the ASP.NET and AjaxControlToolkit versions.
Rolling Your Own Version
If you wish to use a different version of AjaxControlToolkit or if you want to use it in .NET 4.5 or .NET 4.6 version, then here's the hack:
- Go to the source code and grab the ControlLibrary project. You can get it here:
- Add the
ControlLibrary
project to your ASP.NET 4.5 project - Add/Replace the
AjaxControlToolkit
with the version that you have used currently - Build the project
- Then use the DLL that was generated
Using the Controls
MessageBox
The MessageBox Control: This control provides the 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.
Integration of the Controls
- 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. It's all up to you.
<%@ Register assembly="ProudMonkey.Common.Controls"
namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>
<%@ Register assembly="AjaxControlToolkit"
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:
<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");
MessageBox1.ShowWarning("Your Message");
MessageBox1.ShowInfo("Your Message");
MessageBox1.ShowSuccess("Your 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)
Here's a code snippet of how you use the MessageBox
control in JavaScript:
ShowMsgBox('Error','Sample Error Message.');
The code above will display the default MessageBox
of type "error
" with your message. If you want to set the MessageBox
size by hand, then you can use the overload method like:
ShowMsgBox('Error','Sample Success Message.',300,400);
Note: 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
ConfirmBox
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" />
<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 (C#)
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!";
}
}
FrameBox
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.
Customizing the MessageBox Modal
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 displayed 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: 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
Customizing the ConfirmBox Modal
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
Customizing the FrameBox Model
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
<cc1:FrameBox ID="FrameBox1" runat="server"
HeaderImageUrl="Images/header.png"
HeaderTextColor="White"
HeaderTextFont="Arial Black"
CloseButtonImageUrl="Images/btnClose.jpg" />
Actual Output
Here's More!
That's it! I hope you'll find this control useful. Please let me know if you find any bugs. Also comments, suggestions and criticisms are welcome! :)
Summary
In this post , we've learned how to use the customized MessageBox
, CofirmBox
and FrameBox
controls in your ASP.NET WebForm's application. We also learned how to customize the look and feel of the modal.
History
- 10th October, 2016: Added downloadables
- 7th June, 2016: Initial version