This document provides an introduction and overview of ASP.NET Visual Basic web forms for beginners. It covers topics like object-oriented programming concepts, the Page_Load and Button_Click subroutines, variables and data types, decision making using If/ElseIf/Else statements, and displaying output from web controls. Examples are provided for getting user input and displaying output messages based on conditions. The document also demonstrates code reuse through subroutines.

1. ASP.NET Visual Basic
Web Form Introduction 1

2. What we will cover
● After starting the project and generating the
code behind file, we learn a little on OOP
(Object Oriented Programming)
○ Class and what a Class may contain
○ Inheritance
○ Namespace
○ Access Levels
● The very first subroutine - Page_Load, which
execute every time the page is loaded.
● After that we move to Button_Click
subroutine, which execute when button is
clicked

3. What we will cover
● Variables: valid and invalid variable naming
● Data types: Integer, String, Boolean,
Decimal
● Decision making using IF … ElseIf … Else
… End If

4. Tool: Visual Studio 2012 or 2013
● Download a FREE Visual Studio Express
https://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
● Launch Visual Studio and click on “New
Project””.

5. DateAndTimeApp

6. New Web Form: PageLoad

7. New Web Form: PageLoad

8. Go to Code behind page
● Click anywhere outside the Div box to go to
the “Code Behind”file:

9. PageLoad.aspx.vb
Name of the auto-generated code behind file
always same as the Web Form (PageLoad.
aspx) and add “.vb” extension

10. Class and End Class
Every Web Form is an Object.
To define an object use “Class” and “End
Class”

11. What does a Class contain?
Eg: Label Class

12. What is Constructor
When Label
icon on the
ToolBox is
double click =>
to create a
Label object
on the page

13. What are Properties

14. What are Events

15. What are Methods
Group of
processing
that we could
ask the object
to do

16. Inherits from parent class
What do you get? You get for free “all” the
parent’s constructor, properties, events and
methods. So you just need to add new stuff.

17. Namespace (x.y.z) to prevent conflict
Instead of just call it “Page”, Microsoft calls its
Page class as “System.Web.UI.Page”.
Someone else may provide another “Page”
class but call theirs “Someone.Else.Page”.
It is similar to a fullname of a person so as not
to be mistaken.

18. Public, Protected, Private
● Public => anyone can
use it
● Protected => Only those
in the same Class can
use it + children Class
can use it too
● Private => Only those in
the same Class can use
it
These are called Access levels..

19. Page_Load Subroutine Our
Program to
be added
here. Will
be executed
every time
the web
form Page
is Loaded!

20. Our first App
When the application is run
1. a input will ask the users to key in their
name.
2. another input will ask for their designation
(Mr, Mrs, Ms, Miss).
3. Output a message: “Your name is xxxx, your
designation is xx.”

21. Use libraries provided
by Microsoft
Before you reinvent the
wheel and start to type
code straight away, look
for a suitable method from
the libraries provided:

25. Variables
● A variable is a letter (eg x, y, z) or name
(score, highScore, health) that can store a
value.
● When you create computer programs, you
can use variables to store numbers, such as
the height of a building, or words, such as a
person's name.

26. There are three steps to using a
variable
1. Declare the variable: Tell the program the
name and kind of variable you want to use.
2. Assign the variable: Give the variable a
value to hold.
3. Use the variable: Retrieve the value held in
the variable and use it in your program.

27. Declare
● When you declare a variable, you have to
decide what to name it and what data type to
assign to it.
● You can name the variable anything that you
want, as long as the name starts with a letter
or an underscore. The 2nd and subsequent
characters may be letters or underscores or
numbers,

28. Declare
● When you use a name that describes what
the variable is holding, your code is easier to
read.
● For example, a variable that tracks the
number of pieces of candy in a jar could be
named totalCandy.

29. Declare
You declare a variable using the Dim and As
keywords, as shown here.
Dim aNumber As Integer
Variable Type

30. Assign
aNumber = 42

31. Declare and Assign
Dim aNumber As Integer = 42

32. Avoid Keywords
Avoid using keywords as variable Eg Dim, As,
Integer, String, etc
http://alturl.com/ix85i

33. Cannot include Space
Variable name cannot contain SPACES or
special characters such as !@#&-+....
Dim favourite fruit As String
Use one of the following conventions for
readability:
favouriteFruit or favourite_fruit
Cannot have space

34. Valid & Invalid variable names
Valid
i
x
_special_power
a1
alien1
Invalid
special power
special-power
1alien
reg#

35. Data Types
http://alturl.com/6vg9j
● Boolean for true and false
● Decimal
● Integer
● String
● Date
:
:

37. Modify our app
When the application is run
1. a input will ask the users to key in their age.
2. another input will ask for their height (in
metre).
3. Output a message: “yy is your age and zz in
metre is your height.”

38. Exercise: Try to do it on your own!
When the application is run
1. a input will ask the users to key in their
favourite fruit.
2. another input will ask for their weight (in kg).
3. yet another input to ask for their contact
numbers.
4. Output a message: “Your favourite fruit is
apple, your weight is 75kg and 9765235 is
your contact number.”

39. Variables and Strings
Summary

40. Names for variable
Variable name cannot contain SPACES or
special characters such as !@#&-+....
Dim favourite fruit As String
Use one of the following conventions for
readability:
favouriteFruit or favourite_fruit
Cannot have space

41. Valid & Invalid variable names
Valid
i
x
_special_power
a1
alien1
Invalid
special power
special-power
1alien
reg#

42. Declaration of Variables
Dim fruit As String
Dim weight As String
Dim contact As String
Dim output As String
Instead of defining 4 string variables in
separate lines, combine them into one by
separating the variables with comma
Dim fruit,weight,contact,output As String
VS2012 will auto add space after comma!

43. Strings
“This is a string” - anything from the start
quotation to the end quotation is one string.
Use & to combine two strings into one longer
string:
“An apple a day” & “keep doc away!”
=> “An apple a daykeep doc away!”
How to have a space?

44. “An apple a day” & “ keep doc away!”
=> “An apple a day keep doc away!”
“An apple a day ” & “keep doc away!”
=> “An apple a day keep doc away!”
Add a space before k
Add a space after y

45. “An ” & “apple a day ” & “keep doc away!”
will combine the three strings into one longer
string:
“An apple a day keep doc away!”

46. Variables and Strings
fruit = “apple”
weight = “75”
“I like ” & fruit & “ and my wt in kg is ” & weight

47. “I like ” & fruit & “ and my wt in kg is ” & weight
will combine 4 strings into one longer string
“I like apple and my wt in kg is 75”

48. output = “I like ” & fruit & “ and my wt in kg is ” & weight
“I like apple and my wt in kg is 75”
The combine string is assigned to output
Step 1
Step 2

49. ASP.NET Visual Basic
Web Form Introduction 2

50. Get Started
Launch VS2012
New Project: DateAndTimeApp2
Add new item > Web Form: LoadPage2
Double click anywhere outside the “Div”
box, to generate the *.vb code file.

51. First attempt
When the application is run
1. Output a message: “Time now is xx:xx:xx
AM”

52. Libraries provided by
Microsoft
Before you reinvent the
wheel and start to type
straight away, look for a
suitable one from the
libraries provided:

57. output = “Time now is ” & TimeOfDay
“Time now is 09:15:36 AM”
The combine string is assigned to output
Step 1
Step 2

58. Modify App
When the application is run
1. Ask user to key in a month from 1 to 12. Eg
1.
2. Output a message: “The month is January.”
The month displayed will depends on the
input of the user.

60. Parameters

63. Exercise: Try to do on your own!
When the application is run
1. Ask user to key in a month from 1 to 12. Eg
5.
2. Output a message: “You have key in 5 and
the month is May.” The number and month
displayed will depends on the input of the
user.

64. ASP.NET Visual Basic
Web Form Introduction 3

65. Get Started
Launch VS2012
New Project: GuessNumber
Add new item > Web Form: BtnClick

66. Switch the web form to
“Design View”. Then drag
the various control from the
Toolbox window. finally set
their properties using the
Properties Window.

67. Page Title
Method 1:
1. Switch to source view.
2. Edit <title></title>.
Method 2:
In Properties window:
1. Select “DOCUMENT” from dropdown.
2. Add/modify “Title” property.

69. This App need to
generate a random
number for user to
guess when the web
page is loaded. The
same number should
remain till the game
is over.

73. Get content from Web Control
guess = txtAnswer.Text
txtAnswer.Text property

74. Set content to Web Control
lblResults.text = “Guess correctly.”
lblResults.Text property
Display
updated

75. Decision making and Branching
Guess is correct?
Yes
No
“Guess Correctly.”
“The hidden number is 8”

76. If … Then … Else … End If
If (Guess is correct?) Then
output “Guess Correctly.”
Else
output “The hidden number is 8”
End If
Flowchart Pseudocode

77. Condition
If (Guess is correct?) Then
output “Guess Correctly.”
Else
output “The hidden number is 8”
End If

78. Condition
Guess is correct?
is guess same as hiddenNumber?
guess = hiddenNumber
Pseudocode
Pseudocode
VB code

79. VB Code
If … Then … Else … End If
If guess = hiddenNumber Then
lblResults.Text = “Guess Correctly.”
Else
lblResults.Text =“The hidden number is 8”
End If

81. Exercise
Modify the App
1. to generate hidden number from 11 to 15
instead of 1 to 10.
2. to clear the txtAnswer.Text after each guess.
(Hint: “” => blank)

83. ASP.NET Visual Basic
Web Form Introduction 4

84. Get Started
Launch VS2012
New Project: ControlStatus
Add new item > Web Form: BtnClick

85. 6 Labels
Textbox
Quick and dirty for proof-of-concept:
Use the default names provided - TextBox1, Label1 to
Label6, CheckBox1, RadioButton1 to RadioButton2 and
Button1

86. The status of each control to be
updated on the label next to it

87. The status of each control
to be updated on the label
next to it

88. Quick and dirty
for proof-of-
concept:
Use the properties
from the controls
directly without
using variables.

89. ASP.NET Visual Basic
Web Form Introduction 5

90. Get Started
Launch VS2012
New Project: ConvertMonth2
Add new item > Web Form: MonthName

93. Set content:
cbPopup.Checked = True OR
cbPopup.Checked = False

95. Exercise:
use txtMonthInteger.Text
use lblResults.Text
HINT:

98. If … Then … End If
is cbPopup
Checked?
Yes
Popup: “Month is January”
Only need “YES” branch.
No need to use “Else” in
VB code.

99. HINT:
If cbPopup.Checked = True Then
….
EndIf

101. Checking for valid input
Input is 1?
Yes
No
Process normally
Input is 2?
Yes
No
Process normally
Flowchart
Input is 3?
Yes

102. If ... Then … Else If … Then ….
Pseudocode
If monthNumber = 1 Then
Process normally
ElseIf monthNumber = 2 Then
Process normally
ElseIf monthNumber = 3 Then
Process normally
:
End If

104. Subroutines for code reuse
Variables declaration moved
to outside the subroutine, so
that they can be access from
all the subroutines including
btnConvert_Click() and
myFunc().
Common codes are moved
into a new subroutine -
myFunc().

105. If … ElseIf … Else … EndIf
Summary

106. If … ElseIf … Else … EndIf
Type 1
If Condition Then
Processing
End If
Type 2
If Condition Then
Processing
Else
Processing
End If

107. If … ElseIf … Else … EndIf
Type 3
If Condition1 Then
Processing
ElseIf Condition2 Then
Processing
End If
Type 3++
If Condition1 Then
Processing
ElseIf Condition2 Then
Processing
ElseIf Condition3 Then
Processing
End If

108. If … ElseIf … Else … EndIf
Type 4
If Condition1 Then
Processing
ElseIf Condition2 Then
Processing
Else
Processing
End If
Type 4++
If Condition1 Then
Processing
ElseIf Condition2 Then
Processing
ElseIf Condition3 Then
Processing
Else
Processing
End If

109. This is just an introduction.
Happy programming!