Adding Client-Side Message Boxes in your ASP.NET Web PagesBy Tim Stall
One of the useful features in a Windows desktop application that many programmers and end-users take for granted is message boxes. Two of the most common types of message boxes are alerts and confirms. A confirm message box prompts the user if they want to continue, and provides two choices: "OK" and "Cancel". Clicking "OK" confirms the action, while "Cancel" cancels it.
An alert message box, on the other hand, simply presents a message to the user. There is no choice, here, just an "OK" button that the user must click to dispose of the message box.
Using client-side message boxes on a Web site offers a number of benefits. Message boxes, if used intelligently, can help ensure that the reader sees important information - by placing important messages or warnings in message boxes you can rest assured that your visitors are more apt to see and read the message than if you placed the same message in some label on the page. For example an alert box can provide a practical way to inform the user that some of the data they entered was invalid. A confirm box could provide a safety check to ensure that the user was certain that they wanted to delete something. (For an article on discussing how to add client-side confirmation to Delete buttons in a DataGrid be sure to read An Extensive Examination of the DataGrid Web Control: Part 8.) Message boxes can be a clean way to present information to your users, as opposed to weaving in labels throughout the page. Perhaps most importantly, end users are familiar with message boxes, having used them repeatedly before in desktop applications.
In addition to the pros of message boxes, there are also two major cons: first, message boxes require an extra click from the end user – as opposed to just browsing a label message without clicking anything. Second, message boxes reside on the client and are displayed using client-side script, but an end user can always disable client side scripting. Users who have disabled client-side scripting in their browser will not see the message boxes. This latter disadvantage, however, should not be too great a concern since virtually all Web surfers have client-side scripting enabled.
The Challenges in Using Message Boxes with ASP.NET
Displaying a Confirm Message Box
Let's begin by examining how to add a confirm message box that is displayed when the user clicks a button. Before ASP.NET, one way to do this would be make a regular HTML
confirm(), thereby displaying a client-side confirm message box upon the button being clicked.
With ASP.NET, however, we don't directly create the HTML markup for a button. That is, we don't type in
the HTML for an
<input> HTML element. Rather, we use a Button Web control, which is rendered
HTML portion of an ASP.NET Web page, we instead programmatically set a property of the Button Web control
To accomplish this, start by adding a Button Web control to an ASP.NET Web page and give it an
BtnDelete. If we stopped here, the Button Web control would generate the following HTML:
onclick event handler. What we really want
In other words, we want to add another attribute to the rendered
<input> element and assign it a value.
(Specifically, we want to add the
onclick attribute with the value
return confirm('Are you sure you want to delete?');.)
Fortunately, all ASP.NET Web controls provide an
Attributes property that provides a collection of
attributes for the rendered HTML element along with the attributes' values. The
Add(key, value) method that can be used to add a new attribute and value to an existing
BtnDelete Button Web control,
we could add the following code:
Because we only need to add this attribute once (and not on every page load), we place the code in the
Not Page.IsPostBack block.
If you visit the page through a Web browser and click the button, you should see something like the screenshot below.
If you plan on needing to add a confirm message box for numerous ASP.NET Web pages, it might make sense to create a
Utilities class with a static method that accepts a Button Web control and a string message and sets
Attributes property accordingly.
We could then call this helper method from within the
Page_Load event of the Web Form, passing both a
reference to the button as well as the message:
By placing the functionality in the
Utilities class, we are able to easily reuse the code in other ASP.NET
Web pages. This is similar to the technique of using include files in classic ASP. For more information on using
classes as a repository for reusable code fragments, check out: Accessing Common Code,
Constants, and Functions in an ASP.NET Project.
Now that we have examined how to display a confirm message box, let's turn our attention to displaying alert message boxes. We'll tackle this in Part 2 of this article.