Lab #10
Exploring Controls and the Concept of Field
Validation in ASP.Net
Theory
Add a New Web Form to the Project
A new web form can be added to the project. To do so open Solution Explorer right click on the root of the project
and click on Add New item… A number of different types of templates are displayed for the selection of the
developer. Select Web Form and give this new item an appropriate name.
Two check boxes at the bottom of the page allow the separation of the code and the selection of a master page. The
restructured code-behind schema of Visual Studio 2008 supports separation of code but makes it optional. The
language selected for the project is displayed in the language box.
Once a new page is open, select Default.aspx Set as Start page to enable the debugger to run this page whenever
the project is debugged. Figure 11.1 : Setting Up As Start Page
Adding a Table
To insert a table on a webpage, click Table Insert Table. An Insert Table window pops up enabling a user to select
from the available templates or creating a customized table with required number of cells and cell formatting.
Add a Dropdown List
Drag the Drop down list from the standard toolbox. Change its ID to DeptDropDown. Click on the arrow on upper
right hand corner of the control to see the various options available. Select the EditItems to add a number of options
from which the user can select. The ListItem Collection Editor opens in a pop up window. Click Add to add a new
entry in the drop down list and type in the name of the entry in the Text property. Click Add to enter another option
or OK to exit.
Adding Radio Buttons
To add radio buttons on a webpage, drag the number of radio buttons required (here consider two radio buttons are
being dragged) from the standard toolbox. Rename them as studentRadioButton and facultyRadioButton. Also
change their text property to Student and faculty respectively. In the GroupName property, write User for both of
the radio buttons which makes them to belong to same group.
Field Validation
Validation controls are available in the toolbox. Some of these are discussed below:
Required Field Validator
Required field validator is used for required fields. Fields that cannot be left empty is validated using the required
field validator. A good example will be a Text Box which is used for taking the username as the input. Since the
user must enter the username in the Text Box in order to access the website. The required field validator can be used
with the Text Box control to validate the input. If user does not enter any data in the Text Box than an error message
is displayed and further processing of the request will be stopped.
In order to set the required validator on the Text Box control just drag and drop the validator on the web form and
set its Control to Validate property to the Text Box id that is to be validated.
Regular Expression Validator
Regular Expression Validator is used to check the user input against some built in regular expressions. The control
provides the Regular Expression collection property that can be used to select the desired Regular Expression. Some
of the built in expressions are Email, postal code, telephone number and many more. If the user input does not
match the regular expression expected an error will occur and the request for the resources will not be authorized
unless the user corrects the input data.
Range Validator
The Range Validator control is used to check whether the input control contains value in the specified range. You
can check the range of values against different data types such as String, Date, Integer and so on.
The two most important properties of the range validator control is the Maximum value and the minimum value.
The range can be used to restrict the user data. Suppose if the user is entering a roll number so the range can be set
from 1 to 500.
Compare Validator
The compare validator control is used to compare the input server control's value. The compare validator can be
used to compare against a value or another control. If both the Control To Compare and Value To Compare
properties are set for a Compare Validator control, the Control To Compare property takes precedence.
It can be used to compare whether the user has selected a value from the dropdown list or not. For this purpose,
select the dropdown list from Control To Validate property and in Value To Compare write down the string e.g.
Select a Department (which must be the first entity in the dropdown list) and set the Operator property to Not
Equal.
Another good use of the compare validator is to check whether the passwords entered by the user in the two Text
Boxes while registering for a website are same or not. This validator also performs validation on the client side as
well as the server side. So, no post back will be required when doing the comparison and hence resources will be
saved and performance will increase.
Figure 11.2 : Validation Controls
Exercise
1. Design a web page LOGIN.aspx and apply field validation on it.(Hint:
1. Use Required Field Validator for all the fields.
2. Use Compare Validator for the Re-enter password.
) Attach printout.
2. Explain which of the validators are server side validators and which are client side?
