Build a Message Box the AJAX Way: Part I

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 Windowsapplications. Indeed, the Windows Forms MessageBox class provides a rich andstandardized way of displaying message boxes. Web applications, on the otherhand, are restricted with JavaScript alert or confirm functions. These built-inways of displaying message boxes are very limited, and developers often need todevelop a custom solution for the same. Wouldn t it be nice if we had somethingsimilar to the Windows MessageBox class? This article will show you how todevelop an AJAX client control thatprovides a rich and quick way of displaying message boxes in your AJAX-enabled Websites.

Functional Requirements

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

Software Requirements

To follow the code of this article you need ASP.NET3.5. We ll use Visual Studio 2008 as the development tool, though Visual WebDeveloper Express also can be used. And although this article is written andtested for ASP.NET 3.5, it will work on ASP.NET2.0 with AJAX extensions installed.

MessageBox Control

Our message box will take the form of an AJAXclient 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 willlook. Figure 1 shows a sample message box with a caption, an icon, and twobuttons (Yes and No).

Figure 1: An AJAX-based message box.

As you can see, this message box closely resembles theWindows Forms MessageBox. However, it is more flexible in terms of look andfeel.

Properties and Methods of the MessageBox Control

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

Figure 2: Propertiesof the MessageBox control.

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

Beginning the Development

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

Figure 3: Creating a new Web siteusing Visual Studio.

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

Figure 4: AJAXserver controls.

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