HTML and CSS Reference
In-Depth Information
<asp:Button ... ID="btnDelete" Text="Delete"
CommandName="Delete" formnovalidate="formnovalidate" />
</EditItemTemplate>
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).
BirthDate.GetValueOrDefault();
DateTime dtHireDate = ((Employee)FormView1.DataItem).
HireDate.GetValueOrDefault();
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");
}
}
