Working with Forms and Controls - HTML5 Programming for ASP.NET Developers - page 146

The form shown in Figure 5-21 doesn't update all the columns of the Employees table for the sake of
simplicity. The Employee Data Entry form has the following validations and features:
• Columns FirstName , LastName , BirthDate , Title (Current Designation), HireDate ,
Address , City , Country , and PostalCode are mandatory fields, and they must be
entered during data addition or modification.
• The legal age for employment is assumed to be 18, and hence there must be a
difference of at least 18 years between BirthDate and HireDate .
• All the data-entry ields show a placeholder when empty.
• Current Designation can be entered manually or can be chosen from a list.
• PostalCode and HomePhone must match the pattern of US ZIP code and US telephone
number, respectively.
Configuring the FormView Control
The form shown in Figure 5-21 is actually a FormView server control. Listing 5-18 shows the important
properties of the FormView that need to be configured.
Listing 5-18. Properties of the FormView Control
<asp:FormView ID="FormView1" runat="server"
AllowPaging="True"
DefaultMode="Edit"
DataKeyNames="EmployeeID"
SelectMethod="GetEmployees"
InsertMethod="InsertEmployee"
UpdateMethod="UpdateEmployee"
DeleteMethod="DeleteEmployee"
ItemType="SampleAppWebForms.Model.Employee"
>
...
</asp:FormView>
By default, when the web form is shown in the browser, the FormView is in Edit mode so you can
modify an employee record. You do so by setting the DefaultMode property to Edit.
Instead of relying on EntityDataSource control (or any other data source control), the FormView relies
on custom methods to perform Create, Read, Update, and Delete (CRUD) operations. You can accomplish
this by setting the four properties SelectMethod , InsertMethod , UpdateMethod , and DeleteMethod to
appropriate methods. The GetEmployees() , InsertEmployee() , UpdateEmployee() , and DeleteEmployee()
methods are written in the code-behind file of the web form and are discussed later.
The FormView templates are strongly typed to various properties of the Employee model. That is why
the ItemType property is set to the fully qualified name of an Entity Framework data model class: Employee .
The Employee model is discussed later along with the CRUD methods mentioned earlier.
Using HTML5 Input Types and Related Attributes
The FormView control uses EditItemTemplate and InsertItemTemplate to render the data-entry form's user
interface in Edit and Insert mode, respectively. These templates are almost identical in terms of HTML and