AACS3023 Web Application Programming Practical Exercise 1
Practical Exercise 1
Q1. Web Forms and Web Controls
• Create a new ASP.NET page with the following layout:
TextBox: txtName
TextBox: txtStudentID
TextBox: txtICNumber
RadioButtonList:
rblGender
DropDownList:
ddlFaculty
TextBox: txtProgram
TextBox: txtDonation
Button: Button:
btnSubmit btnReset
Literal: litResult
• Details of each web controls are as follows:
Control Description
txtName • MaxLength = 30
txtStudentID • MaxLength = 10
txtICNumber • MaxLength = 14
rblGender • Contains the following list items:
Text Value
Male M
Female F
• RepeatDirection = Horizontal
• RepeatLayout = Flow
ddlFaculty • Contains the following list items:
Text Value
-- Select One -- 0
Faculty of Applied Sciences FOAS
Faculty Of Computing and Information Technology FOCS
Faculty of Accountancy, Finance and Business FAFB
Faculty of Engineering and Technology FOET
Academic Year 2019/2020 Page 1 of 4
AACS3023 Web Application Programming Practical Exercise 1
Faculty of Built Environment FOBE
Faculty of Social Science, Arts and Humanities FSSH
Faculty of Communication and Creative Industries FCCI
txtProgram • MaxLength = 4
txtDonation • MaxLength = 3
• Program the btnSubmit_Click event handler. When btnSubmit is clicked, display the inputs
gathered at litResult as shown in the following example:
Display the inputs
gathered at litResult
NOTE: You may get runtime error if rblGender is left unselected. Remember to select a
gender during testing. Input validation is to be programmed later in this exercise.
• Program the btnReset_Click event handler. When btnReset is clicked, clear all the input
fields, as well as litResult.
Academic Year 2019/2020 Page 2 of 4
AACS3023 Web Application Programming Practical Exercise 1
Q2. Input Validations
• Add a new folder named [images] into the project. Copy-and-paste (or drag-and-drop) the
image file [error.png] into the folder.
• Add a new folder named [css] into the project. Add a new CSS file into the folder. Write the
following CSS rules:
Global font style
Text color for error message
Display an icon for error
message (as background
image)
• Import the CSS file into the ASP.NET page you have created in Q1.
NOTE: Drag-and-drop the CSS file to the targeted ASP.NET page in Design View to import it.
• By using appropriate validation controls and error messages, add the following input
validations to the web form you have created in Q1:
Control Validation Rules
txtName • Must not empty.
txtStudentID • Must not empty.
• Must follow the format [99XXX99999], where [9] represents digit and [X]
represents uppercase letter.
txtICNumber • Must not empty.
• Must follow the format [999999-99-9999], where [9] represents digit.
rblGender • Must be selected.
ddlFaculty • Must be selected.
txtProgram • Must not empty.
• Must follow the format [XXX9], where [X] represents uppercase letter
and [9] represents digit.
txtDonation • Must not empty.
• Must be an integer between 10 to 100 inclusively.
For example, use a RequiredFieldValidator for txtName. Its settings are as follows:
Property Value
CssClass error
Academic Year 2019/2020 Page 3 of 4
AACS3023 Web Application Programming Practical Exercise 1
Display Dynamic
ErrorMessage Please enter name
ControlToValidate txtName
• Surround the existing codes in btnSubmit_Click event handler with the following if
statement:
Completed codes are
hidden here for brevity.
• Ensure btnReset will not trigger input validation.
NOTE: Achieve so by setting its CausesValidation property to false.
• An example of the web form with input errors:
Error message in red-
color text with icon
Academic Year 2019/2020 Page 4 of 4
