This control is used to either add a new contact to the
database or edit an existing record. Figure 2 shows the control when a new
record is to be added to the database.
Figure 2: Contact Record Control when adding a new record
As you can see, the control displays a very simply UI that
contains 3 input fields to enter the details of a new contact. Once the user
enters the data, he or she can submit the record by pressing on the submit
button. If the user by mistake clicked on the New Contact, he or she can close
the control by clicking on the close button on the top right corner.
You can conclude that we should define two events, one to
handle the submit button and one to handle the close button.
In addition, a data source property is required. Why? We
will be using the same control to add a new record and to edit an existing
record. So, in the case of adding a new record, the control will be displayed
without any data bindings. In the case of editing an existing record, we will
first bind the data into the control using its data source property. Then when
rendering the control, the code will check whether there is data in the data
source; if there is an, the input textboxes will be bound to data. This
algorithm is shown below.
Listing 16
if (this._dataSource)
{
txtBox.setAttribute("value", this._dataSource.FirstName);
}
There is no need to re-explain the details of creating this
control since we followed the same procedure as we did in creating the grid
client control.