HTML and CSS Reference
In-Depth Information
<asp:Button ... ID="btnDelete" Text="Delete"
CommandName="Delete" formnovalidate="formnovalidate" />
Look carefully at the markup shown in Listing 5-19. In all, there are three <ieldset> elements that
represent the three sections of the form: Basic Details, Employment Details, and Contact Details. A
<ieldset> element is used to group related elements. To indicate the grouping visually, the <ieldset>
element also draws a box enclosing the grouped elements. Because this is an Edit mode template, you
want changes made to any field to propagate back to the database. Hence, all fields except EmployeeID are
bound with the data model using a BindItem object. EmployeeID is the primary key, so it's read-only and
hence uses an Item object.
If you look at the <asp:TextBox> elements, you find that many of them use HTML5 input types and
related attributes. The BirthDate and HireDate text boxes have their TextMode property set to Date .
Similarly, HomePhone has a TextMode value of Phone . The PostalCode text box's pattern attribute is set to a
regular expression that matches US ZIP codes. Note that you could use the pattern attribute for the
HomePhone text box too, but instead the application validates the phone number via jQuery code.
A <datalist> displays the existing values as soon as a text box gets focus. The <datalist> is linked to
the text box using the list attribute. The actual <datalist> items are filled at runtime using jQuery.
The required attribute is set for all text boxes that must be filled. In addition, they all have their
Placeholder attribute set to some help text. The three Button server controls— btnUpdate , btnNew , and
btnDelete —invoke the appropriate actions. Notice that the CommandName property of these button controls
is set to Update , New , and Delete , respectively. This way, the FormView control triggers the appropriate
method. Also note that btnNew and btnDelete have their formnovalidate attribute set because there is no
need to perform data validation when you click these buttons.
Taking Care of Date Formatting
The BirthDate and HireDate text boxes have TextMode set to Date . As you learned earlier, the default date
format for the HTML5 date input type is yyyy-MM-dd . However, the Employees table stores dates in MM/dd/
yyyy format. To take care of this mismatch in the date formats, you need to handle the DataBound event of
the FormView and convert dates from MM/dd/yyyy format to yyyy-MM-dd format. Listing 5-20 shows how to
do this conversion.
Listing 5-20. Converting Date Formats
protected void FormView1_DataBound(object sender, EventArgs e)
if(FormView1.CurrentMode == FormViewMode.Edit)
DateTime dtBirthDate= ((Employee)FormView1.DataItem).
DateTime dtHireDate = ((Employee)FormView1.DataItem).
TextBox txtBirthDate= (TextBox)FormView1.FindControl("txtBirthDate");
TextBox txtHireDate = (TextBox)FormView1.FindControl("txtHireDate");
txtBirthDate.Text = dtBirthDate.ToString("yyyy-MM-dd");
txtHireDate.Text = dtHireDate.ToString("yyyy-MM-dd");
Search WWH ::

Custom Search