Adding Client-Side Message Boxes in your ASP.NET Web Pages
Introduction 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 The problem with message boxes is that they are created on the client, and therefore cannot be directly created from server-side code. Since ASP.NET Web pages' code-behind classes are running on the Web server, it is impossible for this server-side code to be able to directly invoke some client-side functionality. Rather, the server-side code needs to emit the proper client-side JavaScript code along with the rendered HTML so that when this is sent back to the client, the client can display the message box. (If you are not familiar with the difference between client-side and server-side behavior, consider reading ASP Basics: What's Happening Back There? before continuing...)
In this article we'll see how to create a utility class that can be used in our ASP.NET Web pages' code-behind classes. This utility class will contain methods for displaying client-side message boxes. These methods will emit the proper HTML and client-side JavaScript necessary to display the message box.
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 <input> button and add a JavaScript onclick event to the button which calls the JavaScript method 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 into the appropriate HTML. With the Web control model rather than manually interweaving JavaScript into the HTML portion of an ASP.NET Web page, we instead programmatically set a property of the Button Web control class.
To accomplish this, start by adding a Button Web control to an ASP.NET Web page and give it an ID of BtnDelete. If we stopped here, the Button Web control would generate the following HTML:
<input type="submit" name="BtnDelete" value="Delete" id="BtnDelete" />
This HTML, however, is missing the client-side JavaScript onclick event handler. What we really want to generated is something that includes the JavaScript, like:
<input type="submit" name="BtnDelete" value="Delete" id="BtnDelete" onclick="return confirm('Are you sure you want to delete?');" />
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 Attributes property has an Add(key, value) method that can be used to add a new attribute and value to an existing Web control. Therefore, to add the appropriate JavaScript to the BtnDelete Button Web control, we could add the following code:
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If (Not Page.IsPostBack) Then
Me.BtnDelete.Attributes.Add("onclick", _
"return confirm('Are you sure you want to delete?');")
End If
End Sub
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 the Button's Attributes property accordingly.
Public Class Utilities
Public Shared Sub CreateConfirmBox(ByRef btn As WebControls.Button, _
ByVal strMessage As String)
btn.Attributes.Add("onclick", "return confirm('" & strMessage &amp;amp;amp; "');")
End Sub
End Class
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:
Utilities.CreateConfirmBox(Me.BtnDeleteUtil, _ "Are you sure you want to delete (this uses the Utilities Class)?")
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.
Displaying Alert Message Boxes Besides having prompting the user to confirm that they want to perform an action, we might also want to notify the user of some server-side behavior. For example, if there was some server-side error and the data entered wasn't correctly saved, we might want to use an alert message box to inform the user. Or perhaps when attempting to add the data provided into the database, we deduced that the provided data was duplicate data. The question becomes, coming back from the server to the client, how would we alert the user with a message box?
Traditionally we would do this with JavaScript in the html of the page by creating an onload event that generated a message box. However like the previous case, ASP.NET provides us additional methods to handle all this from the code-behind without having to hard code HTML ourselves.
· What we want to do is register a client script block with the ASP.NET Web page. More specifically, we want this to run when the page starts up on the client. Again it's our lucky day, as the ASP.NET Page class provides a RegisterStartupScript() method for that very purpose.
Typically what will happen is the user will submit his data, we'll do some processing, and then realize that we need to alert the user of some unexpected behavior. Therefore, we'll probably need to add this RegisterStartupScript() method call in the Button Web control's server-side Click event handler. The code for this might look something like:
Private Sub BtnSave_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles BtnSave.Click
'Generates the message:
Dim strMessage As String
If (Me.CheckBox1.Checked()) Then
strMessage = "The data was saved."
Else
strMessage = "The data was NOT saved."
End If
'finishes server processing, returns to client.
Dim strScript As String = "<script language=JavaScript>"
strScript += "alert(""" & strMessage &amp;amp;amp;amp; """);"
strScript += "</script>"
If (Not Page.IsStartupScriptRegistered("clientScript")) Then
Page.RegisterStartupScript("clientScript", strScript)
End If
End Sub
This code first generates the message by checking field values (in this case if a CheckBox1 CheckBox Web control was checked or not) and building the message appropriately. However note that the message could be generated from any server-side process, such as the return value of a business object, or based upon the results of a stored procedure or database query.
Once we have the message, we can build the client-side JavaScript script block. The RegisterStartupScript() method takes two string inputs: a key, identifying the script block being registered, and the actual script itself. Notice that the second input parameter, the client-side script, includes both the <script> tag, and the JavaScript code to run (alert('...');). Before calling RegisterStartupScript() it is prudent to first check to make sure that the script block hasn't already been registered. (In our simple example above, it clearly couldn't have already been registered, but if you are registering a script block based on, say, values in a DataGrid, there might be multiple records that would cause the script block to be rendered. A check to IsStartupScriptRegistered() quickly determines if a startup script has already been registered or not.)
In the screen below, the user has selected the checkbox and then clicked the save button. The server then generates the necessary JavaScript block, registers it, and displays it upon returning the page to the client.
Like the previous sample, we can also abstract this functionality to a Utilities class. For this method, we need to pass in a Page class instance (since the RegisterStartupScript() and IsStartupScriptRegistered() methods are methods of the Page class), along with the string to display in the alert message box and the key name by which to register the script.
Public Class Utilities
Public Shared Sub CreateMessageAlert(ByRef aspxPage As System.Web.UI.Page, _
ByVal strMessage As String, ByVal strKey As String)
Dim strScript As String = "<script language=JavaScript>alert('" _
& strMessage & "')</script>"
If (Not aspxPage.IsStartupScriptRegistered(strKey)) Then
aspxPage.RegisterStartupScript(strKey, strScript)
End If
End Sub
End Class
The original page could then call the CreateMessageAlert() method like so:
Private Sub BtnSaveUtil_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles BtnSaveUtil.Click
'Generates the message:
Dim strMessage As String
If (Me.CheckBox1.Checked()) Then
strMessage = "The data was saved."
Else
strMessage = "The data was NOT saved."
End If
'Call separate class, passing page reference, to register Client Script:
Utilities.CreateMessageAlert(Me, strMessage, "strKey1")
End Sub
Notice that when calling the CreateMessageAlert() method we pass in Me for the Page class instance. This is because the code-behind class is inherited from the Page class, so we can just pass in the code-behind class reference. The second parameter is the message to display in the alert message box and the third input parameter provides the key name for the script block.
Conclusion In this article we looked at how to add client-side message boxes to your ASP.NET application. Adding confirm message boxes is as simple as adding an onclick attribute to the Button Web control's Attributes collection. Displaying an alert message box on page load involves calling the Page.RegisterStartupScript() method, passing in the complete JavaScript block that should be performed on page load.
Happy Programming!
Attachments Download a Demonstration of these Examples
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 The problem with message boxes is that they are created on the client, and therefore cannot be directly created from server-side code. Since ASP.NET Web pages' code-behind classes are running on the Web server, it is impossible for this server-side code to be able to directly invoke some client-side functionality. Rather, the server-side code needs to emit the proper client-side JavaScript code along with the rendered HTML so that when this is sent back to the client, the client can display the message box. (If you are not familiar with the difference between client-side and server-side behavior, consider reading ASP Basics: What's Happening Back There? before continuing...)
In this article we'll see how to create a utility class that can be used in our ASP.NET Web pages' code-behind classes. This utility class will contain methods for displaying client-side message boxes. These methods will emit the proper HTML and client-side JavaScript necessary to display the message box.
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 <input> button and add a JavaScript onclick event to the button which calls the JavaScript method 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 into the appropriate HTML. With the Web control model rather than manually interweaving JavaScript into the HTML portion of an ASP.NET Web page, we instead programmatically set a property of the Button Web control class.
To accomplish this, start by adding a Button Web control to an ASP.NET Web page and give it an ID of BtnDelete. If we stopped here, the Button Web control would generate the following HTML:
<input type="submit" name="BtnDelete" value="Delete" id="BtnDelete" />
This HTML, however, is missing the client-side JavaScript onclick event handler. What we really want to generated is something that includes the JavaScript, like:
<input type="submit" name="BtnDelete" value="Delete" id="BtnDelete" onclick="return confirm('Are you sure you want to delete?');" />
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 Attributes property has an Add(key, value) method that can be used to add a new attribute and value to an existing Web control. Therefore, to add the appropriate JavaScript to the BtnDelete Button Web control, we could add the following code:
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If (Not Page.IsPostBack) Then
Me.BtnDelete.Attributes.Add("onclick", _
"return confirm('Are you sure you want to delete?');")
End If
End Sub
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 the Button's Attributes property accordingly.
Public Class Utilities
Public Shared Sub CreateConfirmBox(ByRef btn As WebControls.Button, _
ByVal strMessage As String)
btn.Attributes.Add("onclick", "return confirm('" & strMessage &amp;amp;amp; "');")
End Sub
End Class
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:
Utilities.CreateConfirmBox(Me.BtnDeleteUtil, _ "Are you sure you want to delete (this uses the Utilities Class)?")
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.
Displaying Alert Message Boxes Besides having prompting the user to confirm that they want to perform an action, we might also want to notify the user of some server-side behavior. For example, if there was some server-side error and the data entered wasn't correctly saved, we might want to use an alert message box to inform the user. Or perhaps when attempting to add the data provided into the database, we deduced that the provided data was duplicate data. The question becomes, coming back from the server to the client, how would we alert the user with a message box?
Traditionally we would do this with JavaScript in the html of the page by creating an onload event that generated a message box. However like the previous case, ASP.NET provides us additional methods to handle all this from the code-behind without having to hard code HTML ourselves.
· What we want to do is register a client script block with the ASP.NET Web page. More specifically, we want this to run when the page starts up on the client. Again it's our lucky day, as the ASP.NET Page class provides a RegisterStartupScript() method for that very purpose.
Typically what will happen is the user will submit his data, we'll do some processing, and then realize that we need to alert the user of some unexpected behavior. Therefore, we'll probably need to add this RegisterStartupScript() method call in the Button Web control's server-side Click event handler. The code for this might look something like:
Private Sub BtnSave_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles BtnSave.Click
'Generates the message:
Dim strMessage As String
If (Me.CheckBox1.Checked()) Then
strMessage = "The data was saved."
Else
strMessage = "The data was NOT saved."
End If
'finishes server processing, returns to client.
Dim strScript As String = "<script language=JavaScript>"
strScript += "alert(""" & strMessage &amp;amp;amp;amp; """);"
strScript += "</script>"
If (Not Page.IsStartupScriptRegistered("clientScript")) Then
Page.RegisterStartupScript("clientScript", strScript)
End If
End Sub
This code first generates the message by checking field values (in this case if a CheckBox1 CheckBox Web control was checked or not) and building the message appropriately. However note that the message could be generated from any server-side process, such as the return value of a business object, or based upon the results of a stored procedure or database query.
Once we have the message, we can build the client-side JavaScript script block. The RegisterStartupScript() method takes two string inputs: a key, identifying the script block being registered, and the actual script itself. Notice that the second input parameter, the client-side script, includes both the <script> tag, and the JavaScript code to run (alert('...');). Before calling RegisterStartupScript() it is prudent to first check to make sure that the script block hasn't already been registered. (In our simple example above, it clearly couldn't have already been registered, but if you are registering a script block based on, say, values in a DataGrid, there might be multiple records that would cause the script block to be rendered. A check to IsStartupScriptRegistered() quickly determines if a startup script has already been registered or not.)
In the screen below, the user has selected the checkbox and then clicked the save button. The server then generates the necessary JavaScript block, registers it, and displays it upon returning the page to the client.
Like the previous sample, we can also abstract this functionality to a Utilities class. For this method, we need to pass in a Page class instance (since the RegisterStartupScript() and IsStartupScriptRegistered() methods are methods of the Page class), along with the string to display in the alert message box and the key name by which to register the script.
Public Class Utilities
Public Shared Sub CreateMessageAlert(ByRef aspxPage As System.Web.UI.Page, _
ByVal strMessage As String, ByVal strKey As String)
Dim strScript As String = "<script language=JavaScript>alert('" _
& strMessage & "')</script>"
If (Not aspxPage.IsStartupScriptRegistered(strKey)) Then
aspxPage.RegisterStartupScript(strKey, strScript)
End If
End Sub
End Class
The original page could then call the CreateMessageAlert() method like so:
Private Sub BtnSaveUtil_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles BtnSaveUtil.Click
'Generates the message:
Dim strMessage As String
If (Me.CheckBox1.Checked()) Then
strMessage = "The data was saved."
Else
strMessage = "The data was NOT saved."
End If
'Call separate class, passing page reference, to register Client Script:
Utilities.CreateMessageAlert(Me, strMessage, "strKey1")
End Sub
Notice that when calling the CreateMessageAlert() method we pass in Me for the Page class instance. This is because the code-behind class is inherited from the Page class, so we can just pass in the code-behind class reference. The second parameter is the message to display in the alert message box and the third input parameter provides the key name for the script block.
Conclusion In this article we looked at how to add client-side message boxes to your ASP.NET application. Adding confirm message boxes is as simple as adding an onclick attribute to the Button Web control's Attributes collection. Displaying an alert message box on page load involves calling the Page.RegisterStartupScript() method, passing in the complete JavaScript block that should be performed on page load.
Happy Programming!
Attachments Download a Demonstration of these Examples
