Richard Tham - ASP.

NET Training Part 3

Web Form Basics

1. When you create a new ASP.NET web page, a Web Form is automatically added.
To demonstrate that this is the case, let's create a new ASP.NET page, one that
we'll build on throughout the remainder of this hour. Name this new ASP.NET
web page BMICalculator.aspx. As always, be sure to have Visual Basic
selected as the Language choice and check the Place Code in Separate File check
box.

2. Before you add the first TextBox Web control, though, first type in the title to
precede the TextBox Web control: Your height (in inches):. To enter this
text into the designer, simply place the cursor in the designer and start typing. If
needed, you can create a space by pressing the Enter key.

3. After you've typed in the label, next drag and drop a TextBox Web control from
the Toolbox onto the designer, placing it immediately after the text you just added
as shown below:

4.

Richard Tham - ASP.NET Training Part 3

5. Now let's add the second TextBox Web control. Start by moving your mouse
cursor after the TextBox Web control we just added and left-click. This will show
the cursor in the designer. You can then type in the title for the TextBox Web
control that we are about to enter. Specifically, enter the text Weight (in pounds):.
As before, after entering this text, drag and drop a TextBox Web control from the
Toolbox onto the designer, placing it immediately after the newly entered text.

6.
7. We need to add a submit button to our ASP.NET web page as well. To
accomplish this, drag and drop the Button Web control from the Toolbox to the
designer, placing it beneath the two TextBox Web controls.

Richard Tham - ASP.NET Training Part 3

8.
9. Take a moment to change the ID property to btnSubmit and the Text property to
Calculate BMI.
10. Next, click the first TextBox Web control, the one appearing after the text "Your
height (in inches):". Change the ID property to height. Finally, click on the
second TextBox Web control and change its ID property to weight.
11. Add a Label Web control with an ID LabelWebID and have the BMI calculation
displayed in this Label.

Richard Tham - ASP.NET Training Part 3

Add in the Source Code below for the button click event for BMICalculator.aspx
'Find out the person's height and weight
Dim h as Integer = height.Text
Dim w as Integer = weight.Text
'Calculate the person's BMI
Dim BMI as Double
BMI = (w / (h * h)) * 703
'Output the BMI value
LabelWebID.Text = "Your BMI is " & BMI
12. Now that we have added the needed Web controls, let's visit
BMICalculator.aspx through a browser. Go to the Debug menu and choose Start
Without Debugging. This will launch a web browser and direct it to
BMICalculator.aspx.

Using Text Boxes to Collect Input

1. start by creating a new ASP.NET page named TextBoxPractice.aspx. In this
page we will add two TextBox Web controls to collect two bits of information
from the user: name and age.
2. Start by entering the following title for the first TextBox Web control into the
designer: Your name:. After entering this text, drag and drop a TextBox Web
control from the Toolbox onto the page. Next, enter the text Your age: and, after
this text, add another TextBox Web control. Finally, as with all Web forms, we
will need a Button Web control. Add this below the two TextBox Web controls.

Richard Tham - ASP.NET Training Part 3

3.
4. Start with the first TextBox Web control. Because this Web control is used to
collect the user's name, let's set its ID property to name. To accomplish this,
follow these steps:
1.

Click the TextBox Web control, which will load its properties into the
Properties window.

2.

Change its ID property to name.

5. Repeat the same process for the second TextBox Web control, but set its ID
property to age.
6. Finally, click the Button Web control to set its properties. Start by setting the ID
property to btnSubmit and its Text property to "Click Me".
7. Let's take a moment to test this ASP.NET page so that we can observe the HTML
markup generated by the TextBox Web controls. Visit the ASP.NET page via
your web browser by going to the Debug menu and choosing Start Without
Debugging.

Richard Tham - ASP.NET Training Part 3

8.
9. Set the Label Web control's ID property to results and clear out the Text
property.

10.
11. Enter the following code to the button click event:
results.Text = "Hello, " & name.Text
results.Text &= ". You are " & age.Text & " years old."

Richard Tham - ASP.NET Training Part 3

Creating Multiline and Password Text Boxes

1. A multiline text box contains more than one row of text. This type of text box is
commonly used when the user needs to input a large amount of text. For example,
online messageboard sites are discussion websites where web visitors can post
questions or comments and reply to other comments.
2. Password text boxes are text boxes whose input is masked by asterisks (*).
Password text boxes are used to collect sensitive input from the user, such as her
password or personal identification number (PIN).
3. Let's create an ASP.NET page with a multiline text box. Start by creating a new
ASP.NET web page named MultiLineTextBox.aspx. Start by typing the
following text into the designer inside the Web form: Share your Thoughts:.
4. The first step in adding a multiline text box is to add the TextBox Web control to
the web page. So, drag and drop a TextBox Web control from the Toolbox onto
the page after the "Share your Thoughts:" text.
5. Next, we need to set the TextBox Web control's TextMode property. To
accomplish this, first click the TextBox Web control so that its properties are
loaded in the Properties window. Next, scroll down through the list of properties
until you reach the TextMode property.
6. Clicking on the TextMode property drops down a list of three options:
SingleLine, MultiLine, and Password. Select the MultiLine option. When you
choose the MultiLine option, the TextBox Web control in the designer will
automatically be displayed as a multiline text box.
7. At this point, we can adjust the number of columns and rows in the multiline text
box by setting the TextBox Web control's Columns and Rows properties. Go ahead
and set these two properties to values of 25 and 5, respectively. The columns and

Richard Tham - ASP.NET Training Part 3

rows displayed by the TextBox Web control in the designer will be updated
accordingly.

8.

Using Password Text Boxes

1. To create a password text box in an ASP.NET web page, we simply need to add a
TextBox Web control and set its TextMode property to Password. Create an
ASP.NET page named PasswordTextBox.aspx to try out creating a password
text box.
2. Start by typing the text Username: into the page. After this, add a TextBox Web
control. On the next line, type in the text Password: and, after this, add another
TextBox Web control. Set the second TextBox Web control's TextMode property
to Password.
3. After these two TextBox Web controls, add a Button Web control. Set the Button
Web control's Text property to Login.

Richard Tham - ASP.NET Training Part 3

4.

Collecting Input Using Drop-down Lists, Radio Buttons, and

Check Boxes
Adding a DropDownList Web Control to an ASP.NET Web Page
1. To demonstrate using a DropDownList Web control and adding list items to it,
let's create a new ASP.NET page named DropDownList.aspx. Within the Web
Form, type in the text What is your favorite ice cream flavor?. After this
text, drag and drop a DropDownList Web control from the Toolbox.
2. Next, add a Button Web control beneath the DropDownList Web control. After
you have typed in the text prior to the DropDownList Web control and have
added both the DropDownList and Button Web controls.

Richard Tham - ASP.NET Training Part 3

3.
4. Start by clicking on the DropDownList Web control so that its properties are
loaded in the Properties window. Next, scroll down to the Items property. You
should see that the property value currently reads (Collection). If you click this

property value, a button with a pair of ellipses will appear to the right of
(Collection)

5. Go ahead and click this button; when you do so, a ListItem Collection Editor
dialog box will appear. This dialog box, allows you to add and remove list items
from the DropDownList Web control.

Richard Tham - ASP.NET Training Part 3

6.
7. To add a new list item, click the Add button.
8. After you click the Add button, a new entry is added to the left text box in the
ListItem Collection Editor dialog box. On the right side, the properties of the
newly added list item are displayed. As shown below, list items have four
properties: Enabled, Selected, Text, and Value.

9.
10. After you have added the three list items, the ListItem Collection Editor should
look similar to the one shown here:

Richard Tham - ASP.NET Training Part 3

11.
12. Finally, click OK on the ListItem Collection Editor dialog box. Note that the
DropDownList Web control in the designer has changed such that it shows the
word Vanilla as its selected list item.

13.

14. To facilitate this, start by adding a Label Web control to the DropDownList.aspx
web page and then specify the Label Web control's ID property as results. Also,
clear out the Text property.
15. Set the Button Web control's ID property to btnSubmit and its Text property to
Click Me. Then set the DropDownList Web control's ID property to flavors.

Richard Tham - ASP.NET Training Part 3

16. Add an event handler for the Button's Click event:
results.Text = "You like " & flavors.SelectedItem.Text

Selecting One Option from a List of Suitable Choices with RadioButton

Web Controls

Richard Tham - ASP.NET Training Part 3

1. Let's create a new ASP.NET web page named RadioButton.aspx and examine
how to use the RadioButton Web control. The RadioButton.aspx page will be
similar in functionality to the DropDownList.aspx page; that is, the users will be
asked to provide their favorite ice cream flavor.
2. After you create the new ASP.NET web page, go ahead and type into the designer
the text What is your favorite ice cream flavor?. Beneath this text, drag
and drop a RadioButton Web control onto the designer. A radio button and the
RadioButton Web control's ID property (in brackets) will be displayed in the
designer.
3. Now change the ID property of the RadioButton Web control just added from the
default RadioButton1 to vanilla. Next, add two more RadioButton Web
controls, each one beneath the other, and set their ID properties to chocolate and
strawberry, respectively. Finally, add a Button Web control after all three
RadioButton Web controls. Set the Button Web control's ID property to
btnSubmit and its Text property to Click Me.

4.
5. Now simply set the RadioButton Web control's Text property to the appropriate
text. For the RadioButton.aspx web page, set the first RadioButton Web
control's Text property to Vanilla, the second's to Chocolate, and the third's to
Strawberry.

6. Therefore, to make the three RadioButton Web controls related (so that the user
can select only one flavor of the three), set the GroupName property for the three
RadioButton Web controls to the value flavors.

Richard Tham - ASP.NET Training Part 3

7.
8. Next, add a Label Web control after the Button Web control. After adding the
Label Web control, clear out its Text property and set its ID property to results.

9. Add in the following code for the button click event handler:
If vanilla.Checked then
results.Text = "You like Vanilla"
ElseIf chocolate.Checked Then
results.Text = "You like Chocolate"
ElseIf strawberry.Checked Then
results.Text = "You like Strawberry"
End If

Richard Tham - ASP.NET Training Part 3

Using the CheckBox Web Control

1. Start by creating a new page named CheckBox.aspx. This web page will be
similar to the previous two examples in that we will be prompting the users for
their favorite ice cream flavors. With the check boxes, however, the users will be
able to choose more than one flavor, if they so desire.
2. After you have created the new ASP.NET page, type in the text What are your
favorite ice cream flavors?. After this text, drag and drop three CheckBox
Web controls from the Toolbox onto the designer, one after another. After the
three CheckBox Web controls, place a Button Web control. Let's go ahead and
also add a Label Web control after the button.
3. First, clear the Label Web control's Text property and set its ID to results. Next,
click the Button Web control and set its Text property to Click Me and its ID
property to btnSubmit. For the three CheckBox Web controls, specify their Text
and ID properties just like we did for the three RadioButton Web controls in our
previous example. That is, set the first CheckBox Web control's Text property to
Vanilla and its ID to vanilla; set the second CheckBox Web control's Text
property to Chocolate; and so on.

4.

Richard Tham - ASP.NET Training Part 3

5. Enter the following code for the button click event:

'Clear out the value of the results Text property

results.Text = ""
If vanilla.Checked then
results.Text &= "You like Vanilla."
End If
If chocolate.Checked then
results.Text &= "You like Chocolate."
End If
If strawberry.Checked then
results.Text &= "You like Strawberry."
End If