8.2 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 popup message box.

Let's rewrite Example 8-1 to add a ValidationSummary control at the bottom of the page. This simply requires that you add the code shown in boldface after the </table> tag as shown in the code snippet from Example 8-1:

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

Here 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") or 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:

<td align=middle rowspan=1>
   <asp: RequiredFieldValidator 
   id="reqFieldBooks" 
   ControlToValidate="ddlBooks" 
   Display="static"  
   InitialValue="-- Please Pick A Book --" 
   ErrorMessage ="You did not choose a book from the drop-down."
   Width="100%" runat="server" 
   NAME="reqFieldBooks">*</asp: RequiredFieldValidator>
</td>

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 itself to display an asterisk, rather than the more complete error message; now that you have a summary, you need only flag the error. Similar changes can be made 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 boldfaced code before the definition of 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>Bulleted List</asp:ListItem>
          <asp:ListItem>Single Paragraph</asp:ListItem>
      </asp:DropDownList>
   </td>
</tr>
<tr>
<td>
</td>
<td>
<ASP:Button id=btnSubmit

This drop-down posts back the page so that 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 very simple. Here it is in C#:

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

Here is the same code in VB.NET:

Protected Sub lstFormat_SelectedIndexChanged( _
   ByVal sender As System.Object, _
   ByVal e As System.EventArgs) 


   ValSum.DisplayMode = _
      CType(lstFormat.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 drop-down to allow the user to control whether the error report appears in the page or in a popup menu. To do this, insert the following code before the code that allows the user to choose the type of summary report:

<tr>
   <td align=right>
   <!-- Radio buttons 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>Summary</asp:ListItem>
            <asp:ListItem>Msg. Box</asp:ListItem>
      </asp:DropDownList>
   </td>
   <td>
   </td>
</tr>

Once again, this control posts back the page, and the changed selection event is handled in an event handler. The C# version is:

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

In VB.NET, this is:

Protected Sub lstDisplay_SelectedIndexChanged( _
     ByVal sender As System.Object, _
     ByVal e As System.EventArgs) 


   ValSum.ShowMessageBox = lstDisplay.SelectedIndex = 1
   ValSum.ShowSummary = lstDisplay.SelectedIndex = 0

End Sub

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. In a real application, these would be decoupled to make maintenance easier.

Figure 8-6 illustrates how the form looks to the user. Changing the first drop-down to Msg. Box and the second to List causes the message box shown in Figure 8-7 to appear on the user's screen.

Figure 8-6. The summary

Figure 8-7. Message box