9.3. The Summary Validator

You have great control over how validation errors are reported. For example, rather than putting error messages alongside the control, you can summarize all the validation failures with a ValidationSummary control. This control can place a summary of the errors in a bulleted list, a simple list, or a paragraph that appears on the web page or in a pop-up message box.

Add a ValidationSummary control at the bottom of the page (after the table). There are a few properties to set in the design view. Set the id to valSum (that becomes the ID of the validation summary control). Next set the DisplayMode by clicking on the Display Mode property. Notice that the various valid display modes are displayed in a drop-down list, as shown in Figure 9-8.

Interestingly, if you choose to set these attributes by hand, in Source Mode, IntelliSense helps you with the valid Display Modes as well, as shown in Figure 9-9. You can leave the default, BulletList, for now.

In addition to choosing among a BulletList, List, or SingleParagraph format for displaying the list of errors, you must decide on whether to show a summary at the bottom of the page and/or a pop-up message box. You configure this using the ShowMessageBox and ShowSummary properties, as shown in Figure 9-10.

Set ShowMessageBox to true and ShowSummary to False for now.

The HeaderText property holds the header that will be displayed if there are errors to report. Set it to The following errors were found:.

From ASPX Back to Drag and Drop

At times, you will start out with .aspx code (either reading it in a book or using existing aspx pages) and you'll want to recreate the page in your form. You can certainly just retype the aspx, but it is a great skill to be able to "see" aspx and "do" drag and drop. Here's how. Suppose you were given Example 9-1 as a starting point, with no image of what the page is to look like.

Rather than hand-coding the page, you'll read the code but use drag and drop to choose the controls. You'll read the attributes of the controls, but set the attributes in the Properties window.

Open a new web site and name it ValidatorsFromAspx keep Example 9-1 handy. Open that web site's Default.aspx page.

Notice in Example 9-1 that the title is set (Validation Page) as is the form ID (frmBugs). Click on Design view and scroll down in the document's properties to Title. Set the title. You'll have to switch back to Source mode to set the form's ID by hand.

Next, looking at the source, notice that there is a table, whose ID is Table1. Here you have a few choices. You can type the table in by hand (IntelliSense will help), or you can drag a table onto your form from the HTML controls tab and then fix it up. Finally, you can decide to use an ASP:Table control instead, which will use slightly more server resources, but is easer to set up.

Once your table is in place (with at least one row and one column) your next step is to add the DropDownList, which you can do by dragging a DropDownList from the Standard tab of the Toolbox, into the appropriate table cell (<TD>) in Source view, or into the cell in Design view if the cell is expanded enough and you have good aim.

After you drag the drop-down list into place, make sure you are in Design view and click on your new drop-down list. Its properties come up in the Properties window. The first property to set is its ID: ddlBooks. The second property to set is the collection of ASPListItem members. The easiest way to do so is to click on the Items property (click on the button with the ellipsis) and open the ListItem Collection Editor, as you have done before (of course, you are free to type these directly into the Source window, but that is more work).

In the ListItems Collection Editor, click Add to add a new member, and set its text to Please Pick A Book . Click Add to add a second item. Referring to the example, you see that the text for the second example should be Programming Visual Basic 2005, so type that into the Text field.

Also notice that when you dragged the RequiredFieldValidator into place, the ErrorMessage field was automatically set. You can remove that from the HTML, or just set the ErrorMessage property to blank in the Properties window.

You add the RadioButtonList and its validator in much the same way.

Keep adding one item for each item shown in the source code. When you are done, click OK and then switch to Source view; you'll find that your source closely matches the source shown in the example.

Drag a RequiredFieldValidator into the next column. Switch back to Design view to set the properties using the Property window, or stay in HTML and set them by hand. In either case, the properties you need are shown in the source:

     <asp:RequiredFieldValidator          ControlToValidate="ddlBooks"     Display="Static"     InitialValue="-- Please Pick A Book --"     Width="100%" runat=server>         You did not pick a book     </asp:RequiredFieldValidator> 

Set the ID property to reqFieldBooks, set the ControlToValidate property to ddlBooks (in the Properties window you can use the drop-down list to pick the control you want), leave the Display as Static (the default) and type in the Initial value.

If you do use the Properties window, the only tricky part is to realize that the innerHTML (that is, the text between the open tag and the close tag) is set in the Text property. (You did not pick a book.)

Figure 9-8. Set the Summary Display Mode

Figure 9-9. Set the Summary Display Mode in source

To make the summary validator work as expected, you'll need to add an ErrorMessage attribute to the other validation controls.

Click on the first validation control (reqFieldBooks) and in its properties, set its ErrorMessage to You did not pick a book. This value will now be displayed in the summary, and need not be displayed next to the incorrect value. Thus you can change the Text property from You did not pick a book to an asterisk: "*".

You'll want to do the equivalent for the other three validators.

Figure 9-10. Show Summary property

Rather than choose which of the three types of summary reports (bulleted list, list, or summary paragraph) to provide, for this example you'll let the user choose from a drop-down list. To do so, add a row to the table, right above the Submit Bug button. In the first column, add the title Display Report. Set its align property to right.

In the second column, drag in a DropDownList (id=ddlFormat) and set its AutoPostBack property to true. Finally, add three items to the drop down's items list: List, BulletList, and SingleParagraph.

Set the event handler for SelectedIndexChanged by clicking on the lightning bolt in the Properties window, then double-clicking on the space next to the SelectedIndexChanged event. When you double-click on the event handler, it is given a name, and you are placed in the code editor to implement the event handler. It just sets the DisplayMode of the summary validator.

     Protected Sub ddlFormat_SelectedIndexChanged( _        ByVal sender As System.Object, _        ByVal e As System.EventArgs)        ValSum.DisplayMode = _          CType(ddlFormat.SelectedIndex, _            ValidationSummaryDisplayMode)     End Sub 

The validation summary object (ValSum) has its DisplayMode set to the index of the selected item. This is a bit of a cheat. The ValidationSummary Display Mode is controlled by the ValidationSummaryDisplayMode enumeration, in which BulletList = 0, List = 1, and SingleParagraph = 2. You take advantage of this and order your list so that the index of the selected item will equal the choice you want.

Similarly, you'll add a second drop-down list to allow the user to control whether the error report appears in the page or in a pop-up menu. Add another row to the table, right above the row you just created. In the first column, type the prompt Display Errors. Set its align property to right.

Drag a drop-down list into the second column. Set its ID to ddlDisplay. Populate it with the two choices, Summary and Message Box. Remember to set its AutoPostback property to TRue, and implement its SelectedIndexChanged handler as follows:

     Protected Sub ddlDisplay_SelectedIndexChanged( _         ByVal sender As System.Object, _         ByVal e As System.EventArgs)        If ddlDisplay.SelectedIndex = 0 Then           ValSum.ShowSummary = True           ValSum.ShowMessageBox = False        Else           ValSum.ShowSummary = False           ValSum.ShowMessageBox = True        End If     End Sub 

Note that the decision to use a summary or a message box and the display mode, are set in event handlers. If the user clicks the button before changing either of these drop-down settings, default values will be used. There are many ways to solve this problem, including using member variables to hold the state, but a simple solution is to invoke these event handlers programmatically when the page is loaded.

     Protected Sub Page_Load( _     ByVal sender As Object, _     ByVal e As System.EventArgs) Handles Me.Load        ddlFormat_SelectedIndexChanged(sender, e)        ddlDisplay_SelectedIndexChanged(sender, e)     End Sub 

Build and run the application. If you click on Submit Bug without setting anything, the default values of BulletList and summary will be used, as shown in Figure 9-11.

If you change Summary to Message Box and BulletList to List, a message box is shown rather than the summary, as shown in Figure 9-12.