A Customize MessageBox, ConfirmBox and FrameBox Control for ASP.NET

Comments (51) | Share

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 application?

As some of you may already know that 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 uses a lot of pop message to prompt the end user a message based on some actions. First I simply used the javascript alert and confirm function to propmt user 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 different operations like for example, I need to display a successful message pop up if a sucessful operation happened and using the javascript alert for prompting successful message may confused end users because it uses the default warning image. To overcome those problem I can simply create a modal panel within the webform 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 need to have a pop-up 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.

These controls are created on top of ASP.NET 3.5 and it uses some of the ASPNET AJAX Controls (AjaxControlToolKit 3.0.1106.0).

Main Features:

These controls was designed in which developers can easily prompt a message in the page whether they use it via server or client side without having much code and to present a user friendly message to end users.

These were created as a common control which can be reuse 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 in which 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.

Please note that I never included the source code for this project so to use this control in your application you must first download the ProudMonkey.Common.Controls.dll. You can also download the version of AjaxControlToolkit that is being used here.

Using the Controls:

The MessageBox Control - This control give developers the option to prompt different message types such as information, Warning, Success operations and Error message types. This control can be called via server side or client side. Here are some screen shots of the MessageBox control.

How to Use it?

1. Download and extract the ProudMonkey.Common.Controls.dll

2. Add the ProudMonkey.Common.Controls.dll and the AjaxControlToolkit.dll in your project solution

3. Right click on the project and select Add Reference

4. Click on the Browse tab and locate the two dlls mentioned in step 2

5. Click OK

6. Register the controls by adding the following lines below at the top most part of your page (ASPX).

<%@ Register assembly="ProudMonkey.Common.Controls"
             namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>
<%@ Register assembly="AjaxControlToolkit" 
             namespace="AjaxControlToolkit" tagprefix="asp" %>

7. Since the MessageBox control uses ASP.NET AJAX (AjaxControlToolKit 3.0.1106.0) then be sure to use the ToolkitScriptManager instead of ScriptManager. The ToolkitScriptManager can be found at the AjaxControlToolKit controls.

8. After that define the MessageBox control like below:

<cc1:MessageBox ID="MessageBox1" runat="server" />

Using The MessageBox Control

A . 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(125) and W(300)]. If you want to set the MessageBox size by hand then you can use the overload method like:

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

B. 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(125) and W(300)].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 postback to the server after clicking OK then be sure to include "return false;" after calling the ShowMsgBox() method in the client.

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 different 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 perform 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.

Below is a sample screen shot of the ConfirmBox control:

Notes:

• The "Don't ask me again" option will only be remembered across session, 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 control.
• The default focus is set to NO
• This control can only be called via client side

Sample Usage of the ConfirmBox Control:

ASPX Source:

<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 which developers can dynamically changed the header text of the frame. Take a look at the sample screen show 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');return false;" />
    </form>
</body>
</html>

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! =}