Build a Message Box the AJAX Way: Part I

Getting Started

CodeTalk

LANGUAGES: C#

ASP.NET VERSIONS: 2.0 | 3.5

 

Build a Message Box the AJAX Way: Part I

Getting Started

 

By Bipin Joshi

 

Prompting users with a message box is common in Windows applications. Indeed, the Windows Forms MessageBox class provides a rich and standardized way of displaying message boxes. Web applications, on the other hand, are restricted with JavaScript alert or confirm functions. These built-in ways of displaying message boxes are very limited, and developers often need to develop a custom solution for the same. Wouldn t it be nice if we had something similar to the Windows MessageBox class? This article will show you how to develop an AJAX client control that provides a rich and quick way of displaying message boxes in your AJAX-enabled Web sites.

 

Functional Requirements

Even though our message box will closely resemble the Windows counterpart, there will be some differences because of the way AJAX works. It is worthwhile to note the functional requirements we want our message box to fulfill:

  • We should be able to display a message box with text or an HTML message.
  • The message box should provide all the standard button combinations as Windows-based message boxes.
  • We should be able to display, along with the message, standard message box icons; i.e., question, information, exclamation, and error.
  • The images of the standard message box icons should be customizable.
  • We should be able to customize the look and feel of the message box via CSS classes.
  • Upon selecting a particular button, the message box should notify us about the selection so further action can be taken.
  • The location and dimensions of the message box should be configurable.

 

Software Requirements

To follow the code of this article you need ASP.NET 3.5. We ll use Visual Studio 2008 as the development tool, though Visual Web Developer Express also can be used. And although this article is written and tested for ASP.NET 3.5, it will work on ASP.NET 2.0 with AJAX extensions installed.

 

MessageBox Control

Our message box will take the form of an AJAX client control that can be instantiated and consumed through the client script. Before we delve into the details of the control, let s first see how it will look. Figure 1 shows a sample message box with a caption, an icon, and two buttons (Yes and No).

 


Figure 1: An AJAX-based message box.

 

As you can see, this message box closely resembles the Windows Forms MessageBox. However, it is more flexible in terms of look and feel.

 

Properties and Methods of the MessageBox Control

The MessageBox client control we ll develop is highly configurable. The table in Figure 2 shows the key properties of the MessageBox control.

 

Property

Description

CaptionCss

The CSS class name that provides the look and feel to the caption of the message box.

BoxCss

The CSS class name that controls the look and feel of the message box.

BackgroundCss

The CSS class name that controls the look and feel of the background content.

ButtonCss

The CSS class name that controls the look and feel of the message box buttons.

QuestionImageUrl

URL of the icon that displays the question mark on the message box.

InformationImageUrl

URL of the image that displays the information icon on the message box.

ExclamationImageUrl

URL of the icon that displays the exclamation mark on the message box.

ErrorImageUrl

URL of the image that displays the error icon on the message box.

Left

The left coordinate of the message box.

Top

The top coordinate of the message box.

Height

The height of the message box.

Width

The width of the message box.

DialogResult

After the user selects a message box button, this property indicates the selection made by the user.

CloseCallback

After the user selects a message box button, a callback function as indicated by this property is invoked.

Figure 2: Properties of the MessageBox control.

 

The MessageBox class has only one public method (Show). The Show method takes various parameters and displays the message box depending on the parameters passed.

 

Beginning the Development

Now that you have some understanding of the MessageBox control, let s start building it! Begin by creating a new Web site using Visual Studio (Figure 3).

 


Figure 3: Creating a new Web site using Visual Studio.

 

Be sure to choose a coding language (C# in our example) in the New Web Site dialog box; name the Web site MessageBoxDemo. Open the default Web form and add a ScriptManager control (see Figure 4). Every Web form that makes use of AJAX features must have one and only one instance of ScriptManager on it.

 


Figure 4: AJAX server controls.

 

Then switch to the Source view of the Web form and add a