Visual basic asp.net programming introduction

109
ASP.NET Visual Basic Web Form Introduction 1

Transcript of Visual basic asp.net programming introduction

Page 1: Visual basic asp.net programming introduction

ASP.NET Visual BasicWeb Form Introduction 1

Page 2: Visual basic asp.net programming introduction

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

Page 3: Visual basic asp.net programming introduction

What we will cover

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

Decimal● Decision making using IF … ElseIf … Else

… End If

Page 4: Visual basic asp.net programming introduction

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

Page 5: Visual basic asp.net programming introduction

DateAndTimeApp

Page 6: Visual basic asp.net programming introduction

New Web Form: PageLoad

Page 7: Visual basic asp.net programming introduction

New Web Form: PageLoad

Page 8: Visual basic asp.net programming introduction

Go to Code behind page

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

Page 9: Visual basic asp.net programming introduction

PageLoad.aspx.vb

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

Page 10: Visual basic asp.net programming introduction

Class and End Class

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

Page 11: Visual basic asp.net programming introduction

What does a Class contain?

Eg: Label Class

Page 12: Visual basic asp.net programming introduction

What is Constructor

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

Page 13: Visual basic asp.net programming introduction

What are Properties

Page 14: Visual basic asp.net programming introduction

What are Events

Page 15: Visual basic asp.net programming introduction

What are Methods

Group of processing that we could ask the object to do

Page 16: Visual basic asp.net programming introduction

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.

Page 17: Visual basic asp.net programming introduction

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.

Page 18: Visual basic asp.net programming introduction

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 19: Visual basic asp.net programming introduction

Page_Load Subroutine Our Program to be added here. Will

be executed every time

the web form Page is Loaded!

Page 20: Visual basic asp.net programming introduction

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

Page 21: Visual basic asp.net programming introduction

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:

Page 22: Visual basic asp.net programming introduction
Page 23: Visual basic asp.net programming introduction
Page 24: Visual basic asp.net programming introduction
Page 25: Visual basic asp.net programming introduction

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.

Page 26: Visual basic asp.net programming introduction

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.

Page 27: Visual basic asp.net programming introduction

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,

Page 28: Visual basic asp.net programming introduction

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.

Page 29: Visual basic asp.net programming introduction

Declare

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

Dim aNumber As Integer

Variable Type

Page 30: Visual basic asp.net programming introduction

Assign

aNumber = 42

Page 31: Visual basic asp.net programming introduction

Declare and Assign

Dim aNumber As Integer = 42

Page 32: Visual basic asp.net programming introduction

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

Page 33: Visual basic asp.net programming introduction

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

Page 34: Visual basic asp.net programming introduction

Valid & Invalid variable names

Validix_special_powera1alien1

Invalidspecial powerspecial-power1alienreg#

Page 35: Visual basic asp.net programming introduction

Data Types

http://alturl.com/6vg9j

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

Page 36: Visual basic asp.net programming introduction
Page 37: Visual basic asp.net programming introduction

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

Page 38: Visual basic asp.net programming introduction

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

Page 39: Visual basic asp.net programming introduction

Variables and Strings

Summary

Page 40: Visual basic asp.net programming introduction

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

Page 41: Visual basic asp.net programming introduction

Valid & Invalid variable names

Validix_special_powera1alien1

Invalidspecial powerspecial-power1alienreg#

Page 42: Visual basic asp.net programming introduction

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!

Page 43: Visual basic asp.net programming introduction

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?

Page 44: Visual basic asp.net programming introduction

“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

Page 45: Visual basic asp.net programming introduction

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

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

Page 46: Visual basic asp.net programming introduction

Variables and Strings

fruit = “apple”

weight = “75”

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

Page 47: Visual basic asp.net programming introduction

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

Page 48: Visual basic asp.net programming introduction

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

Page 49: Visual basic asp.net programming introduction

ASP.NET Visual BasicWeb Form Introduction 2

Page 50: Visual basic asp.net programming introduction

Get Started

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

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

Page 51: Visual basic asp.net programming introduction

First attempt

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

AM”

Page 52: Visual basic asp.net programming introduction

Libraries provided by Microsoft

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

Page 53: Visual basic asp.net programming introduction
Page 54: Visual basic asp.net programming introduction
Page 55: Visual basic asp.net programming introduction
Page 56: Visual basic asp.net programming introduction
Page 57: Visual basic asp.net programming introduction

output = “Time now is ” & TimeOfDay

“Time now is 09:15:36 AM”

The combine string is assigned to output

Step 1

Step 2

Page 58: Visual basic asp.net programming introduction

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.

Page 59: Visual basic asp.net programming introduction
Page 60: Visual basic asp.net programming introduction

Parameters

Page 61: Visual basic asp.net programming introduction
Page 62: Visual basic asp.net programming introduction
Page 63: Visual basic asp.net programming introduction

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.

Page 64: Visual basic asp.net programming introduction

ASP.NET Visual BasicWeb Form Introduction 3

Page 65: Visual basic asp.net programming introduction

Get Started

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

Page 66: Visual basic asp.net programming introduction

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 67: Visual basic asp.net programming introduction

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.

Page 68: Visual basic asp.net programming introduction
Page 69: Visual basic asp.net programming introduction

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.

Page 70: Visual basic asp.net programming introduction
Page 71: Visual basic asp.net programming introduction
Page 72: Visual basic asp.net programming introduction
Page 73: Visual basic asp.net programming introduction

Get content from Web Control

guess = txtAnswer.Text

txtAnswer.Text property

Page 74: Visual basic asp.net programming introduction

Set content to Web Control

lblResults.text = “Guess correctly.”

lblResults.Text property

Display updated

Page 75: Visual basic asp.net programming introduction

Decision making and Branching

Guess is correct?

Yes

No

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

Page 76: Visual basic asp.net programming introduction

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

Else output “The hidden number is 8”

End If

Flowchart Pseudocode

Page 77: Visual basic asp.net programming introduction

Condition

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

Page 78: Visual basic asp.net programming introduction

Condition

Guess is correct?

is guess same as hiddenNumber?

guess = hiddenNumber

Pseudocode

Pseudocode

VB code

Page 79: Visual basic asp.net programming introduction

VB CodeIf … Then … Else … End If

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

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

End If

Page 80: Visual basic asp.net programming introduction
Page 81: Visual basic asp.net programming introduction

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)

Page 82: Visual basic asp.net programming introduction
Page 83: Visual basic asp.net programming introduction

ASP.NET Visual BasicWeb Form Introduction 4

Page 84: Visual basic asp.net programming introduction

Get Started

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

Page 85: Visual basic asp.net programming introduction

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

Page 86: Visual basic asp.net programming introduction

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

Page 87: Visual basic asp.net programming introduction

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

Page 88: Visual basic asp.net programming introduction

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

Page 89: Visual basic asp.net programming introduction

ASP.NET Visual BasicWeb Form Introduction 5

Page 90: Visual basic asp.net programming introduction

Get Started

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

Page 91: Visual basic asp.net programming introduction
Page 92: Visual basic asp.net programming introduction
Page 93: Visual basic asp.net programming introduction

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

Page 94: Visual basic asp.net programming introduction
Page 95: Visual basic asp.net programming introduction

Exercise:

use txtMonthInteger.Text

use lblResults.Text

HINT:

Page 96: Visual basic asp.net programming introduction
Page 97: Visual basic asp.net programming introduction
Page 98: Visual basic asp.net programming introduction

If … Then … End If

is cbPopup Checked?

Yes

Popup: “Month is January”

Only need “YES” branch.

No need to use “Else” in VB code.

Page 99: Visual basic asp.net programming introduction

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

Page 100: Visual basic asp.net programming introduction
Page 101: Visual basic asp.net programming introduction

Checking for valid input

Input is 1?

Yes

No

Process normallyInput is 2?

Yes

No

Process normally

Flowchart

Input is 3?

Yes

Page 102: Visual basic asp.net programming introduction

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

Pseudocode

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

Page 103: Visual basic asp.net programming introduction
Page 104: Visual basic asp.net programming introduction

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

Page 105: Visual basic asp.net programming introduction

If … ElseIf … Else … EndIf

Summary

Page 106: Visual basic asp.net programming introduction

If … ElseIf … Else … EndIf

Type 1If Condition Then Processing End If

Type 2If Condition Then ProcessingElse Processing End If

Page 107: Visual basic asp.net programming introduction

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

Page 108: Visual basic asp.net programming introduction

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

Page 109: Visual basic asp.net programming introduction

This is just an introduction. Happy programming!