ASP.NET Visual BasicWeb Form Introduction 1

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

What we will cover

● Variables: valid and invalid variable naming● Data types: Integer, String, Boolean,

Decimal● Decision making using IF … ElseIf … Else

… End If

Tool: Visual Studio 2012 or 2013

● Download a FREE Visual Studio Expresshttps://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

● Launch Visual Studio and click on “New Project””.

DateAndTimeApp

New Web Form: PageLoad

New Web Form: PageLoad

Go to Code behind page

● Click anywhere outside the Div box to go to the “Code Behind”file:

PageLoad.aspx.vb

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

Class and End Class

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

What does a Class contain?

Eg: Label Class

What is Constructor

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

What are Properties

What are Events

What are Methods

Group of processing that we could ask the object to do

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.

Namespace (x.y.z) to prevent conflictInstead 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.

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..

Page_Load Subroutine Our Program to be added here. Will

be executed every time

the web form Page is Loaded!

Our first App

When the application is run1. 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.”

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:

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.

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.

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,

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.

Declare

You declare a variable using the Dim and As keywords, as shown here.

Dim aNumber As Integer

Variable Type

Assign

aNumber = 42

Declare and Assign

Dim aNumber As Integer = 42

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

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

Valid & Invalid variable names

Validix_special_powera1alien1

Invalidspecial powerspecial-power1alienreg#

Data Types

http://alturl.com/6vg9j

● Boolean for true and false● Decimal● Integer● String● Date::

Modify our app

When the application is run1. 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.”

Exercise: Try to do it on your own!

When the application is run1. 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.”

Variables and Strings

Summary

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

Valid & Invalid variable names

Validix_special_powera1alien1

Invalidspecial powerspecial-power1alienreg#

Declaration of VariablesDim fruit As StringDim weight As StringDim contact As StringDim 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!

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?

“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

“An ” & “apple a day ” & “keep doc away!”

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

Variables and Strings

fruit = “apple”

weight = “75”

“I like ” & fruit & “ and my wt in kg is ” & weight

“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”

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

ASP.NET Visual BasicWeb Form Introduction 2

Get Started

Launch VS2012New Project: DateAndTimeApp2Add new item > Web Form: LoadPage2

Double click anywhere outside the “Div” box, to generate the *.vb code file.

First attempt

When the application is run1. Output a message: “Time now is xx:xx:xx

AM”

Libraries provided by Microsoft

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

output = “Time now is ” & TimeOfDay

“Time now is 09:15:36 AM”

The combine string is assigned to output

Step 1

Step 2

Modify App

When the application is run1. 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.

Parameters

Exercise: Try to do on your own!

When the application is run1. 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.

ASP.NET Visual BasicWeb Form Introduction 3

Get Started

Launch VS2012New Project: GuessNumberAdd new item > Web Form: BtnClick

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

Page TitleMethod 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.

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.

Get content from Web Control

guess = txtAnswer.Text

txtAnswer.Text property

Set content to Web Control

lblResults.text = “Guess correctly.”

lblResults.Text property

Display updated

Decision making and Branching

Guess is correct?

Yes

No

“Guess Correctly.”“The hidden number is 8”

If … Then … Else … End IfIf (Guess is correct?) Then output “Guess Correctly.”

Else output “The hidden number is 8”

End If

Flowchart Pseudocode

Condition

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

Condition

Guess is correct?

is guess same as hiddenNumber?

guess = hiddenNumber

Pseudocode

Pseudocode

VB code

VB CodeIf … Then … Else … End If

If guess = hiddenNumber Then lblResults.Text = “Guess Correctly.”

Else lblResults.Text =“The hidden number is 8”

End If

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)

ASP.NET Visual BasicWeb Form Introduction 4

Get Started

Launch VS2012New Project: ControlStatusAdd new item > Web Form: BtnClick

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

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

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

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

ASP.NET Visual BasicWeb Form Introduction 5

Get Started

Launch VS2012New Project: ConvertMonth2Add new item > Web Form: MonthName

Set content:cbPopup.Checked = True ORcbPopup.Checked = False

Exercise:

use txtMonthInteger.Text

use lblResults.Text

HINT:

If … Then … End If

is cbPopup Checked?

Yes

Popup: “Month is January”

Only need “YES” branch.

No need to use “Else” in VB code.

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

Checking for valid input

Input is 1?

Yes

No

Process normallyInput is 2?

Yes

No

Process normally

Flowchart

Input is 3?

Yes

If ... Then … Else If … Then ….

Pseudocode

If monthNumber = 1 Then Process normallyElseIf monthNumber = 2 Then Process normallyElseIf monthNumber = 3 Then Process normally: End If

Subroutines for code reuseVariables 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().

If … ElseIf … Else … EndIf

Summary

If … ElseIf … Else … EndIf

Type 1If Condition Then Processing End If

Type 2If Condition Then ProcessingElse Processing End If

If … ElseIf … Else … EndIf

Type 3If Condition1 Then ProcessingElseIf Condition2 Then Processing End If

Type 3++If Condition1 Then ProcessingElseIf Condition2 Then ProcessingElseIf Condition3 Then Processing End If

If … ElseIf … Else … EndIfType 4If Condition1 Then ProcessingElseIf Condition2 Then Processing Else Processing End If

Type 4++If Condition1 Then ProcessingElseIf Condition2 Then ProcessingElseIf Condition3 Then ProcessingElse Processing End If

This is just an introduction. Happy programming!