Section 8.2. The Summary Control

8.2. The Summary Control

You can decide 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.

Create a copy of RequiredFieldValidator called RequiredFieldValidatorSummary . Add a ValidationSummary control at the bottom of the page, which requires that you add the following code after the </table> tag:

 <asp:ValidationSummary    ID="ValSum" runat="server"    DisplayMode="BulletList"    HeaderText="The following errors were found: "    ShowSummary="True" /> 

You've named the ValidationSummary control ValSum and set its DisplayMode property to BulletList . The HeaderText attribute holds the header that will be displayed only if there are errors to report. You can mix the ShowMessageBox and ShowSummary attributes to display the errors in the body of the HTML document ( ShowSummary="true" ), in a pop-up message box ( ShowMessageBox="true" ), or both.

To make this work, you'll need to add an ErrorMessage attribute to the other validation controls. For example, you might modify the first validation control as follows :

 <asp:RequiredFieldValidator runat=server    id="reqFieldBooks"    ControlToValidate="ddlBooks"    Display="Static"    SetFocusOnError=true    InitialValue="-- Please Pick A Book --"  ErrorMessage = "You did not choose a book from the drop-down"  Width="100%" > * </asp:RequiredFieldValidator> 

The text in the ErrorMessage attribute will be displayed in the summary if this control reports a validation error. You've also modified the validator to display an asterisk rather than the more complete error message. Now that you have a summary, you need only flag the error. You can make similar changes for each of the other RequiredFieldValidator controls.

Rather than choose which of the three types of summary reports (bulleted list, list, or summary paragraph) to provide, you'll let the user choose from a drop-down. You do this by inserting the following code before the row that holds the Submit button:

 <tr>     <td align="right">             <font face=Verdana size=2>Display Report</font>     </td>     <td>         <asp:DropDownList id="lstFormat"         AutoPostBack=true         OnSelectedIndexChanged="lstFormat_SelectedIndexChanged"         runat=server >             <asp:ListItem >List</asp:ListItem>             <asp:ListItem Selected="true">Bulleted List</asp:ListItem>             <asp:ListItem>Single Paragraph</asp:ListItem>         </asp:DropDownList>     </td> </tr> 

This drop-down posts back the page so you can update the display. You have assigned an event handler, lstFormat_SelectedIndexChanged , to handle the event when the user changes the current selection. The event handler code is simple:

 protected void lstFormat_SelectedIndexChanged(object sender, EventArgs e) {    ValSum.DisplayMode =       (ValidationSummaryDisplayMode)       lstFormat.SelectedIndex; } 

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 DisplayMode is controlled by the ValidationSummaryDisplayMode enumeration, in which BulletList = , List = 1 , and SingleParagraph = 2 . You take advantage of this and order your list so the index of the selected item will equal the choice you want.

Similarly, you'll add a drop-down to allow the user to control if the error report appears in the page or in a pop-up menu. To do this, insert the following row before the row that allows the user to choose the type of summary report:

 <tr>     <td align=right>     <!-- Drop down for the error display -->         <font face=Verdana size=2>Display Errors</font>     </td>     <td>         <asp:DropDownList id="lstDisplay"         AutoPostBack=true         OnSelectedIndexChanged="lstDisplay_SelectedIndexChanged"         runat=server >                 <asp:ListItem Selected ="true">Summary</asp:ListItem>                 <asp:ListItem>Msg. Box</asp:ListItem>         </asp:DropDownList>     </td>     <td>     &nbsp;     </td> </tr> 

Once again, this control posts back the page, and the changed selection event is handled in an event handler:

 protected void lstDisplay_SelectedIndexChanged(object sender, EventArgs e) {    ValSum.ShowSummary = lstDisplay.SelectedIndex == 0;    ValSum.ShowMessageBox = lstDisplay.SelectedIndex == 1; } 

To keep the example simple, we've allowed the order of the items in the drop-down to be tightly coupled with the event handling code. That is, we're assuming that Show Summary is the first item in the list. In a real application, these would be decoupled to make maintenance easier.

Figure 8-3 shows the page with the summary validator at the bottom using the bulleted list.

Figure 8-3. Summary validator: summary

Changing the first drop-down to Msg. Box and the second to List causes the message box shown in Figure 8-4 to appear on the user's screen.

Figure 8-4. Summary validator: message box