AMIT3023 Web Application Programming Practical Exercise 3

Practical Exercise 3

Q1. Server Control and Page Events

• Create a new ASP.NET page named [Exercise1.aspx] with the following layout:

DropDownList: ddlFruit

Literal: litPrice

DropDownList: ddlQuantity
Button: Button:
btnSubmit btnReset

Literal: litResult

• Program the Page_Load event handler so that 3 fruits (Apple, Orange and Banana) are to be
added toddlFruit at runtime:

A string array
of fruit names

Add each fruit dynamically to

the DropDownList at runtime

• Hit [Ctrl + F5] to run the ASP.NET without debugging (faster). Do you get a list of fruits? Click
on the [Submit] button several times. What is happened to the list of fruits now?

Same list of fruits are appended to

the DropDownList every time the
[Submit] button is clicked

NOTE: The Page_Load event handler runs every time the page is being loaded.

Academic Year 2020/2021 Page 1 of 8

AMIT3023 Web Application Programming Practical Exercise 3

• Now, surround the original codes with the following if statement block. What is the result?

Run the codes only if it is not a postback

(i.e. only during the initial page load).

• Within the same if statement block, add the following codes to dynamically populate
ddlQuantity with number from 1 to 10 during runtime:

Call the ToString() method to

convert the integer into string

• Create a function named getPrice() which accepts a fruit name (string) as input parameter,
and returns the unit price (decimal) based on the following table:

Fruit Price
Apple 1.50
Orange 1.00
Banana 0.50

C# switch statement can

operate on string values

The m suffix is necessary for writing

a decimal-typed literal constant

The default case is required as C# wants us

to ensure all code paths return a value

• In Design View, select ddlFruit. Tick the [Enable AutoPostBack] option from its smart tag (or
set its AutoPostBack property to True from the Property Window).

NOTE: Setting AutoPostBack property to True will cause a DropDownList to trigger a page
postback action (i.e. immediate page submission) as its selected value is being changed.

Academic Year 2020/2021 Page 2 of 8

AMIT3023 Web Application Programming Practical Exercise 3

Set the AutoPostBack

property of ddlFruit to True

• In Design View, double-click on ddlFruit. The event handler ddlFruit_SelectedIndexChanged

should be created. Program the event handler so that the price of the selected fruit will be
displayed on litPrice.

The ToString() method can optionally

accept a formatting string. Here we
prefix the value with the text “RM”
and format it to 2 decimal places.

• Hit [Ctrl + F5] to test the page. Try to change the selected fruit. Do you find any problem?

Price is not shown during Price is shown if the

the initial page load (sure, selected fruit is being
as the relevant event has changed
not been trigger)

• To overcome the problem, manually call the event handler as during the initial page load.
Add the following codes to the Page_Load event handler:

Initial codes are hidden for brevity

Event handler can be

called as a function

Academic Year 2020/2021 Page 3 of 8

AMIT3023 Web Application Programming Practical Exercise 3

• Program the btnSubmit_Click event handler. When btnSubmit is clicked, the total price will
be calculated and displayed on litResult (as shown in the following screenshot):

Output, as the [Submit]

button is clicked

Convert string to integer

The placeholder used in the string.Format()

method can optionally receive a formatting
string as shown here

• Program the btnReset_Click event handler. When btnReset is clicked, clear all the input and
output fields. A shortcut to achieve so is to reload the same page as shown below:

Basically, this asks ASP.NET to reload

the page itself, causes the page to be
restored back to its initial stage

NOTE: The shortcut may not be suitable for all circumstances. In certain cases, resetting the
input and output fields individually may be the only option.

• Lastly, add the following of JavaScript code to the OnClientClick property of btnReset. This
will cause a confirmation box to be shown (i.e. client-side event) before the [Reset] triggers
the postback action.

This JavaScript code displays

a confirmation box

Academic Year 2020/2021 Page 4 of 8

AMIT3023 Web Application Programming Practical Exercise 3

The resulting confirmation box

as shown in Google Chrome

Q2. Attaching Multiple Server Controls to a Single Event Handler

• Create a new ASP.NET page named [Exercise2.aspx] with the following layout:

Label: lblResult

Buttons: namely
btn1, btn2, …, btn0

Button: btnC Button: btnR

• Add a new CSS file to the project with the following CSS rules. Then, link the CSS file to the
page (i.e. drag-and-drop the CSS file to the page in Design View):

CSS rule for the

Label lblResult

CSS rule for all

the buttons

Academic Year 2020/2021 Page 5 of 8

AMIT3023 Web Application Programming Practical Exercise 3

• In Design View, select lblResult. Set its CssClass property to [result].

• In Design View, select ALL the buttons. Achieve so by pressing down the [Ctrl] key while
selecting each of the buttons using mouse click. Set their CssClass property to [button].

Select multiple buttons by

pressing down the [Ctrl] key

The Property Window will list the

common properties for all the selected
buttons. Look for the CssClass property
and enter [button].

• Hit [Ctrl + F5] to run the ASP.NET page without debugging. The resulting page is as follows:

The Label lblResult with red-color

border and fixed width and height

The buttons with

unified width

• When any of the numbered buttons is clicked, append the respective digit to lblResult (with
a maximum of 10 digits). Since all of the numbered buttons (btn1, btn2, …,btn0) are having
the same programming logic, it is easier to attach all of them to a single event handler.

• Start by setting the CommandArgument propertyof each of the numbered buttons to its
respective digit. For example:

Control Property
btn1 • CommandArgument = 1
btn2 • CommandArgument = 2
… • CommandArgument = …
btn0 • CommandArgument = 0

Academic Year 2020/2021 Page 6 of 8

AMIT3023 Web Application Programming Practical Exercise 3

• In Design View, select all of the numbered buttons (btn1, btn2, …,btn0). Then click on the
Event tab (i.e. the lighting icon) in the Property Window. Type [buttons_Command] for the
Command event and press [Enter].

In the Property Window, click on

the lighting icon to show events

Select all of the

numbered buttons
Type [buttons_Command] for the
Command event and press [Enter]

The respective event handler should

then be created in the C# file

NOTE: The main reason for choosing the Command event (rather than Click event) is the
Command event allows us to easily obtain the CommandArgument as attached to each of
the numbered buttons.

• Complete the buttons_Command event handler with the following codes:

Only a maximum of 10
digits can be displayed

Obtain the digit to be

appended from the
CommandArgument
property

• In Design View, double-click on btnC(cancel) to create the btnC_Click event handler. When
btnC is clicked, remove the last digit from lblResult.

Academic Year 2020/2021 Page 7 of 8

AMIT3023 Web Application Programming Practical Exercise 3

Do so only if there is still

any digit to be removed

Use Substring() method

to extract all the digits
before the last digit

• In Design View, double-click on btnR (reset) to create the btnR_Click event handler. When
btnR is clicked, reset the page to its initial state.

Academic Year 2020/2021 Page 8 of 8