COMP 211: Introduction to Software Engineering

Lab Activity: Developing an ASP.NET Application

If you have not read the lab notes for Developing ASP.NET Applications and done the
exercises in the lab notes, you will not know how to complete this lab activity. The lab
notes should be read and the exercises done before you come to the lab.

In this lab activity you will learn how to

use ASP.NET web server controls, as
well as the validation server controls and
implement
a
user
control,
by
implementing the simple customer
registration form shown in Figure 1.

CONSTRUCTING THE USER CONTROL

Before
constructing
the
customer
registration form, you will first develop a
user control for selecting a country and a
state/province
within
the
selected
country. You will then make use of this
user control in constructing the customer
registration form. The user control will
use two drop down lists, one for the
Figure 1: Customer registration form.
country and one for the state/province.
1. If you have not already done so, create a folder named asplab in your personal directory.
2. Start Visual Studio and either create a new web site in your asplab folder or open the asplab web site.
3. In the Solution Explorer, right-click the asplab node and select Add New Item from the drop-down
menu.
4. In the Add New Item window, select the Web User Control template and name the user control
SelectCountryStateUC.ascx. Leave other fields set to their default value.
5. Insert a table with four columns inside the div element in the design surface by placing the cursor inside
the div element and then selecting TableInsert Table in the Visual Studio toolbar.
6. Type the text Country: in the first column and the text State/Prov.: in the third column of the table as
shown in Figure 2.
7. Add two DropDownList controls from the Standard palette of the Toolbox, one in the second column and
one in the fourth column of the table, as shown in Figure 2.
8. Set the ID property of the first DropDownList control to countryDropDownList and the ID of the second
DropDownList control to stateDropDownList.
9. Double-click the design surface to bring up the code-behind file of the user control and add the code
under the heading Page_Load event handler code in the ASPNETActivityUCCode.txt file to the
Page_Load event handler.
10. Double-click the countryDropDownList control and add the code under the heading
countryDropDownList_SelectedIndexChanged
event
handler
code
in
the
ASPNETActivityUCCode.txt file to the countryDropDownList_SelectedIndexChanged event handler. The
purpose of this code is explained in the comments associated with the code.

Figure 2: Layout of SelectCountryStateUC.ascx user control.

COMP 211: Introduction to Software Engineering

Page 1 of 3

Lab Activity: Developing an ASP.NET Application

CONSTRUCTING THE CUSTOMER REGISTRATION WEB FORM

To construct the customer registration web form shown in Figure 1, do the following:
1. Create a new web form named RegistrationForm.aspx or use the default web form created when you
1
created the asplab web site and rename it RegistrationForm.aspx .
2. Make the RegistrationForm.aspx web form the start page.
3. Add the text and controls shown in Figure 3 to the web form.
4. For the TextBox controls, their Text property should be empty and their ID property should be set to (from
top to bottom) txtName, txtAddress, txtLoginName, txtPassword and txtConfirmPassword.
5. The Text and ID properties of the Button control should be set to Register and btnRegister,
2
respectively .
6. Set the TextMode property of the txtPassword and txtConfirmPassword controls so that their input is
masked.
7. The user control should be placed inside a Panel control.
8. You can set other properties of the controls, like font, size and colour as you wish.
9. Add RequiredFieldValidator controls for the Name, Login name, Password and Confirm password fields of
the web form. Set their properties appropriately and as shown in Figure 3.
10. Add a CompareValidator control to ensure that the values of the Password and Confirm password fields
are the same. Set its properties appropriately and as shown in Figure 3.
For this activity you do not need to store the customer information anywhere. Therefore, save your work and
select Start Debugging from the Debug menu.
Important: Before you build the web site be sure to set the RegistrationForm.aspx web form page as the
start page in order to view it. To set the RegistrationForm.aspx web form page as the start page,
right-click its name in the Solution Explorer and select Set As Start Page from the drop-down
menu.
What happens when you change the country value in the Country drop down list? What do you think is the
problem?
Hint: To execute the code associated with a DropDownList control, the web page needs to be posted back to
the server. However, in this case you do not need to write any code to perform a postback. Instead, you
can set a property of the DropDownList control to do the postback. If you cannot figure out how to do
this, ask the TA for help.

Figure 3: Layout of Registration web form with validation controls.

1
2

You may need to first close the Default.aspx web form in order to be able to rename it.
Note that you must use the ID names exactly as given for the code to work correctly.

COMP 211: Introduction to Software Engineering

Page 2 of 3

Lab Activity: Developing an ASP.NET Application

ACTIVITY CHALLENGE
Add a custom validation control to the web form whose purpose is to ensure that the login name is a
palindrome, which is a string that is equal to its own reverse. While it is tempting to use a
RegularExpressionValidator control to validate this constraint, you will soon discover that it is impossible to
write a regular expression to make sure a string is equal to its reverse.
Hint: In Visual Basic, for example, there is a function named StrReverse().

COMP 211: Introduction to Software Engineering

Page 3 of 3