Answers for Chapter 10
Quiz
Label controls give you the ability to dynamically change the text later.
LinkButton, HyperLink controls
Either use the Image control, the ImageButton control (if the image is intended to be clicked on) or simply use "Insert, Image" from the menu.
Exercises
Because of the conditions on the form, we should use the Validator controls. We will add them to each of the controls, most will be RequiredFieldValidators, but we will also need a CompareValidator to ensure the two passwords match. In addition, we will see how to create a password field.
Create a new project (or add a new form to an existing project). Add a new Table (Table, Insert, TableÖ) to the form, creating a new Table with 3 columns and 6 rows. See Figure 10.9 for details.
){kind=link}
Figure 10.9 Insert Table dialog.
Insert Table dialog.
){kind=link}
Figure 10.10 The Web Form in progress.
The Web Form in progress.
To complete the second column, add a Button and another Label control. Finally, to the third column, add (from top to bottom): three RequiredFieldValidators and a CompareValidator. Set the properties of all controls as shown in Table 10.6.
Table 10.6 Properties for the Registration Form
|
Control |
Property |
Value |
|
First Label |
NameID(ID) |
lblName |
|
|
Text |
Name: |
|
|
Font -Bold |
True |
|
Second Label |
NameID(ID) |
lblAlias |
|
|
Text |
Alias: |
|
|
Font- Bold |
True |
|
|
MaxLength |
10 |
|
Third Label |
NameID(ID) |
lblPassword |
|
|
Text |
Password: |
|
|
Font- Bold |
True |
|
First TextBox |
NameID(ID) |
txtName |
|
Second TextBox |
NameID(ID) |
txtAlias |
|
|
MaxLength |
10 |
|
Third TextBox |
NameID(ID) |
txtPassword1 |
|
|
TextMode |
Password |
|
Fourth TextBox |
NameID(ID) |
txtPassword2 |
|
|
TextMode |
Password |
|
Button |
NameID(ID) |
cmdRegister |
|
|
Text |
Register |
|
Label |
NameID(ID) |
lblSummary |
|
|
BackColor |
#E0E0E0 |
|
|
BorderColor |
Silver |
|
|
BorderStyle |
Groove |
|
|
BorderWidth |
1px |
|
|
Text |
<blank> |
|
First Validator |
NameID(ID) |
reqName |
|
|
ControlToValidate |
txtName |
|
|
ErrorMessage |
Name is a required field. |
|
Second Validator |
NameID(ID) |
reqAlias |
|
|
ControlToValidate |
txtAlias |
|
|
ErrorMessage |
Alias is a required field. |
|
Third Validator |
NameID(ID) |
reqPassword |
|
|
ControlToValidate |
txtPassword1 |
|
|
ErrorMessage |
You must enter a password. |
|
CompareValidator |
NameID(ID) |
cmpPassword |
|
|
ControlToValidate |
txtPassword2 |
|
|
ControlToCompare |
txtPassword1 |
|
|
ControlToValidate |
txtPassword2 |
|
|
ErrorMessage |
Two passwords must match. |
Finally, we are ready to add the code. As before, we don't have to add any code for the validation, as the control manage this. As such, we have little code to add to the page. The only code we need to add is when the user clicks on the register button. This will only run if all the errors are cleared. It simply displays a message in the summary label. Double-click on the Register button and add the code in Listing 10.5.
Listing 10.5 Code for the Register button
1 Public Sub cmdRegister_Click(ByVal sender As Object, ByVal e As System.EventArgs) 2 lblSummary.Text = "Welcome, " & txtAlias.Text 3 End Sub
Build and run the project. Once the browser is available, try entering in different values for the fields. Clear any entry you have made for the Name and Alias fields. You should see the error messages for these controls. Enter two different passwords to see the CompareValidator in action (See Figure 10.11). Finally, enter in values for the Name, Alias and matching Passwords to see the final summary. See Figure 10.12.
){kind=link}
){kind=link}
Figure 10.11 Registration form with errors.
Figure 10.12 Registration form completed.