Adding Validation Controls to the Editing Interface

In the examples we have seen in this chapter, we have omitted any kind of form field validation. With ASP.NET, form validation is quite easy thanks to the powerful validation Web controls; however, how can we add these validation controls to the editing interfaces of an editable DataGrid? Unfortunately, we cannot add validation controls to the default DataGrid editing interface we must instead supply a customized editing interface.

For example, in Listing 9.4 we used a DataGrid to display the information from the Comments database table. The DataGrid's Comment column had a customized editing interface that utilized a multiline TextBox. (Refer back to Figure 9.5 for a screenshot of the multiline TextBox in action.) We might want to require the user to enter a value for this multiline TextBox. That is, if the user clicks the Update button, we don't want to permit the update unless the user has supplied a value for the Comment field.

Adding form field validation to a customized editing interface is quite simple and involves two straightforward steps. First, we have to add the appropriate validation control (or controls) to the particular column's EditItemTemplate. For example, to require that the user supply a value for the Comment field, we'd want to add a RequiredFieldValidator validation control to the Comment column's editing interface, like so:

 <asp:DataGrid runat="server"  ... >    <Columns>      ...      <asp:TemplateColumn HeaderText="Comment">        <ItemTemplate>          <%# DataBinder.Eval(Container.DataItem, "Comment") %>        </ItemTemplate>        <EditItemTemplate>          <asp:TextBox runat="server"  TextMode="MultiLine"                   Columns="40" Rows="6" MaxLength="255"                   Text='<%# DataBinder.Eval(Container.DataItem, "Comment") %>' />          <asp:RequiredFieldValidator runat="server"                 ControlToValidate="txtComment" Display="Dynamic"                 ErrorMessage="<br /><i>You must provide a Comment.</i>" />        </EditItemTemplate>      </asp:TemplateColumn>      ...    </Columns>  </asp:DataGrid> 

Note that we added a RequiredFieldValidator and set its ControlToValidate property to the ID of the multiline TextBox also defined in the EditItemTemplate.

To complete this exercise, we need to add one more line of code. In the event handler that fires when the Update button is clicked, we need to add a line that will check to see whether the Page.IsValid property is False. If this property is False, it indicates that a validation control on the page contains an invalid value. If this is the case, rather than updating the database and resetting the DataGrid to its pre-editing state, the event handler must simply exit. This can be accomplished by adding the following line of code to the proper event handler:

 Sub dgComments_UpdateRow(sender As Object, e As DataGridCommandEventArgs)    If Not Page.IsValid Then Return False    ...  End Sub 

It is vital that this line of code be included for the validation to work for down-level browsers. Validation Web controls utilize client-side validation code for up-level browsers, but not for down-level browsers. Therefore, if a user is visiting with a down-level browser and you omit the Page.IsValid check from the Update button event handler, the user will be able to update the database using a blank value for the Comment field.

If this sounds a bit confusing, you can see what I mean by omitting the preceding line from the Update button event handler and then setting the @Page directive's ClientTarget attribute to DownLevel, as was discussed in Chapter 3. You'll notice that without the Page.IsValid check in the Update button's event handler, you can enter a blank value into the Comment TextBox and have the data updated in the database when clicking the Update button.

NOTE

Up-level browsers will enjoy the benefits of client-side validation. If a user with an up-level browser fails to enter a value for the Comment TextBox, an error message will dynamically appear when she clicks the Update button without requiring a postback.

Listing 9.9 contains code updated from Listing 9.4 that provides a RequiredFieldValidator for the Comment column's multiline TextBox. (The majority of the code in Listing 9.9 has been omitted because it is identical to that in Listing 9.4.) Figure 9.9 contains a screenshot of the code in Listing 9.9 when the user clicks the Update button after not having entered a value into the Comment TextBox.

Figure 9.9. An error message is displayed if the user clicks the Update button without supplying a value for the Comment TextBox.

Listing 9.9 A RequiredFieldValidator Ensures That the User Enters a Value for the Comment Column's TextBox

  1: <%@ import Namespace="System.Data" %>   2: <%@ import Namespace="System.Data.SqlClient" %>   3: <script runat="server" language="VB">   4:  ' ... The Page_Load, dgComments_EditRow, and dgComments_CancelRow event   5:  '  ... handlers have been omitted for brevity.  Also, the BindData()   6:  '  ... subroutine has been omitted.  Refer back to Listing 9.4  ...   7:   8:     Sub dgComments_UpdateRow(sender As Object, e As DataGridCommandEventArgs)   9:       'Make sure the Page is Valid!  10:       If Not Page.IsValid then Exit Sub  11:  12:       ' ... The remainder of the dgComments_UpdateRow event handler  13:       ' ... can be found in Listing 9.4 ...  14:     End Sub   15: </script>  16: <form runat="server">  17:   <asp:DataGrid runat="server"   18:       Font-Name="Verdana" Font-Size="9pt" CellPadding="5"  19:       AlternatingItemStyle-BackColor="#dddddd"  20:       AutoGenerateColumns="False" DataKeyField="CommentID"  21:       OnEditCommand="dgComments_EditRow"  22:       OnUpdateCommand="dgComments_UpdateRow"  23:       OnCancelCommand="dgComments_CancelRow">  24:  25:     <HeaderStyle BackColor="Navy" ForeColor="White" Font-Size="13pt"  26:               Font-Bold="True" HorizontalAlign="Center" />  27:  28:     <Columns>  29:       <asp:EditCommandColumn ButtonType="LinkButton" HeaderText="Edit"  30:             EditText="Edit" UpdateText="Update" CancelText="Cancel" />  31:       <asp:BoundColumn DataField="CommentID"  32:                 HeaderText="Comment ID" ReadOnly="True" />  33:       <asp:BoundColumn DataField="Name" HeaderText="Name" />  34:       <asp:TemplateColumn HeaderText="Comment">  35:         <ItemTemplate>  36:           <%# DataBinder.Eval(Container.DataItem, "Comment") %>  37:         </ItemTemplate>  38:         <EditItemTemplate>  39:           <asp:TextBox runat="server"  TextMode="MultiLine"  40:                    Columns="40" Rows="6" MaxLength="255"  41:                    Text='<%# DataBinder.Eval(Container.DataItem, "Comment") %>' />  42:  43:           <asp:RequiredFieldValidator runat="server"  44:                  ControlToValidate="txtComment" Display="Dynamic"  45:                  ErrorMessage="<br /><i>You must provide a Comment.</i>" />  46:         </EditItemTemplate>  47:       </asp:TemplateColumn>  48:       <asp:BoundColumn DataField="DateAdded" HeaderText="Date Added"  49:                 ReadOnly="True" />  50:     </Columns>  51:   </asp:DataGrid>  52: </form>