BAIT2113 Web Application Development Chapter 2

Practical 2 (i) – Server Control and Site Design

How to add server controls to your web page. Follow step 1 until step 5 to get the
output as shown in Figure 1.
Textbox
ID : txtName

Drop Down List

ID : ddlProg

Check Box List

ID : cblInterest

Button
ID : btnSubmit

Label
ID : lblSelect

Figure 1

Step 1 : Design page.

1. Create New Project as Practical2. Add a new web form and name it as
servercontrol.aspx.

2. In Design view, drag the highlighted server controls in the red boxes and place it
accordingly as shown in the screen shot below.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

TextBox

DropDownList

CheckBoxList

Button
Label

Step 2 : Give ID names to each server controls.

Every server control ID in an asp.net web page must contain a unique identifier. If you do not
assign an ID to a control when you add it in your web page, asp.net will create a default ID
for you.

1. Highlight the server control in the design view and look for ID column in the Properties
window.

1. Place the cursor at the server

control and click one time to
highlight it

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

2. Change the ID name to txtName

2. If you switch your development pane to source view, you can see that the Textbox ID
name under the asp.net tag also changed automatically.

3. Repeat step 1 for all the server controls.

● DropDownList --> ddlProg

● CheckBoxList --> cblInterest
● Button --> btnSubmit
● Label --> lblSelect
Step 3 : Add DropDownList items

1. Click on the DropDownList server control and

click on the small arrow.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

 BAIT2113 Web Application Development Chapter 2

2. Click on the Edit Items.

4. After you have entered Text and Value

item, the list will be added automatically
under the Members list.

3. Click on the Add button to add 5. Repeat No.3 step to add for another programs.
the list of items. Your DropDownList should have RIS, RSD, RIT, RSF
and REI. Click OK button after you have done adding
all the list.

Step 4 : Add CheckBoxList items

Follow all the steps to add items as in the DropDownList (Step 3). You will get the same
interface and make sure you add Programming, Database and Networking in the
CheckBoxList items.

Step 5 : Button Click event.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

2. Double click on the Button server

control.

1. Change the Button Text to Submit.

You will be directed to ServerControl.aspx.cs code behind page. Copy below code and place
it inside the Button1_Click event.

string msg = "";

foreach (ListItem lstItem in cblInterest.Items)

{
if (lstItem.Selected == true)
{
msg += lstItem.Text + "<br />";
}
}

lblSelect.Text = "Hi " + txtName.Text + " from "

+ ddlProg.SelectedItem.Value + " programme. </br>"
+ "You have selected : </br>"
+ msg + " as your area of interest";

Save files, run program and check the result.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

Practical 2 (ii) – Master Page and Site Navigation

Step 1. Design Master Page

1. In the same project, go to Solution Explorer window, right click and Click on Add --> New
Item... Choose Master Page and name it as Practical2.Master.

2. Design your Master page to have 4 separated columns as shown below. Use <table>
HTML tag or <div> to design the page.

1. In the Toolbox Navigation Category, drag the SiteMapPath

control and place it in the master page

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

2. Menu control and place it in the master page

3. In the Toolbox Standard Category, drag the

ContentPlaceHolder control and place it on the master page.

Step 2. Create Web.SiteMap XML navigation file

1. Go to Solution Explorer window, right click and Click on Add --> New Item... Choose
SiteMap and click Add button.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

2. Type below codes in the Web.sitemap file.

You need to create another 4 new .aspx pages which are Homepage.aspx,
DatabaseList.aspx, NetworkingList.aspx and ProgrammingList.aspx in order for the
menu to be able to direct you to the pages.
This menu only have one parent node which is Homepage.aspx.

Step 3. Setup the navigation in Master Page

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

1. Go to the Master Page and click on the Menu control. In

the Choose Data Source option, choose <New data
source..>

2. Choose Site Map and click OK.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

3. There is an Auto Format option for

you to choose to beautify your Menu.

4. You may choose which scheme that

you like and then click Apply and OK.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

Step 4. Include Master page in Content file.

Open the ServerControl.aspx file and make sure you are in the Source view.

1. In the PageDirective line, add in the

MasterPageFile attribute and set it to
Practical2.Master.

2. Type

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

at the beginning of the page and close the asp content tag at the bottom of the page.

</asp:Content>

Please take note to delete the following tags in the content file:

<!DOCTYPE html>
<form> </form>
<head runat=”server”></head>
<html></html>
<body></body>

*You need to do all these steps if you already have an existing *.aspx page and want to
incorporate it in your master page.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

If you switch to the Design view, you will see that the Master page layout has been
embedded in the Content file.

Create a simple Homepage.aspx and include the MasterPageFile. Save and run the
program from this page.

You can navigate the page using the Menu and at the same time, SiteMapPath is showing
on which page you are browsing now.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

Practical 2 – Lab Exercise

1. Design a web page for students to apply for a college car sticker and save it as
CarSticker.aspx. Make sure that you use the appropriate asp.net server controls to
obtain the following information.

● Student’s Name
● Student’s ID
● Joined Date
● Gender
● Programmed
● Year of Study
● Vehicle’s Registration Number
● Vehicle’s Type

Display all the selections on a label once the Submit Button is clicked.

Note: You may add other information in the page and use different types of server
controls to gain extra marks.

2. Create another 2 content files named Homepage.aspx and CourseInfo.aspx with a

simple display as shown below.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

3. Create a Master Page layout as shown below.

SiteMapPath

TreeView ContentPlaceHolder

4. Write XML code in Web.SiteMap file to have menu as below. Link all the 3 content files
with the TreeView node.

Homepage
Car Sticker Application
Course Info

The Homepage node in TreeView control will direct the link to the Homepage.aspx content
page, the Car Sticker Application node will direct the link to the CarSticker.aspx content
page and Course Info node will direct the link to the CourseInfo.aspx.

To Learn Programming, You Must Try To Fall in Love with Programming ☺

BAIT2113 Web Application Development Chapter 2

To Learn Programming, You Must Try To Fall in Love with Programming ☺