MELJUN CORTES Vb.net web controls.net

Visual Basic .NET Programming

Using HTML Using HTML Using HTML Using HTML Server ControlsServer ControlsServer ControlsServer Controls

� types of controls for creating a user

interface:

� HTML server controls

� Web Form controls

� System.Web.UI.HtmlControls

� defines the HTML controls

Web Controls * Property of STIPage 1 of 19

� defines the HTML controls

� runat directive is used to convert HTML

elements to HTML server controls

<input type=”text” id=”text1”

value=”some text”

runat=”server”>



Control

NameUsage

Example

Code

Button

Commonly used to

respond to Click

events

<input

type=button

runat=server>

Reset

Button

Resets the values

of all HTML

controls.

<input type=reset

runat=server>

It automatically <input


Submit

Button

It automatically

POSTs the form

data to the value

of the action

attribute in the

FORM tag

<input

type=submit

runat=server>

Text

Field

Mainly used for

single-line text

input.

<input type=text

runat=server>

Text AreaUsed for multi-

line text input.

<input type=file

runat=server>

Password

Field

Used for password

input.

<input

type=password

runat=server>



Control

NameUsage

Example

Code

CheckBox

Used for multiple

selections from a

number of

options.

<input

type=checkbox

runat=server>

Radio

Button

Used for single

selection from a

number of

<input type=radio

runat=server>


Button number of

options.

Table

Used for tabular

representation of

data.

<table

runat=server></t

able>

Image Displays an image

on an HTML form.

<img

src="FileName"

runat=server>

ListBox

Displays a list of

items to the user.

<select size=2

runat=server

></select>

Dropdown

Used to select

one value from a

list of options.

<select><option>

</option></selec

t>


Web Server Web Server Web Server Web Server ControlsControlsControlsControls

� run only on the server

� rendered differently to suit the

capabilities of different browsers

� provides upward and downward


� provides upward and downward

compatibility to all types of browsers

� strongly-typed

� declared using an XML tag

� XML tag references the ASP namespace and

specifies information about the Web

control

� supports enhanced versions of HTML


Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls

� Intrinsic Controls

� provide the basic functionality for user

interaction

� List Controls

� used for repetition when displaying any

type of list


type of list

� Validation Controls

� provide simple control validation

� Rich Controls

� simplify common Web page requirements



Control

Name

Descript-

ion

Commonly

Used Events

Example

Web Form

Code

Label

Displays a

text on the

HTML page

None <asp:Label

id=Label1

runat="server

">Label</asp

:Label>

A hyperlink None <asp:HyperLi


Hyper-

link

A hyperlink

control

that

responds

to a click

event.

None <asp:HyperLi

nk

id=HyperLink

1

runat="server

">HyperLink

</asp:Hyper

Link>

TextBox

Used for

single-line

text input.

TextChanged <asp:TextBox

id=TextBox1

runat="server

"></asp:Text

Box>



Control

NameDescription

Commonly

Used

Events

Example Web

Form Code

Button

Commonly

used to

respond to

Click

events.

Click,

Command

<asp:Button

id=Button1

runat="server"

Text="Button">

</asp:Button>

A button- Click, <asp:LinkButto


LinkButton

A button-

like

hyperlink.

Click,

Command

<asp:LinkButto

n

id=LinkButton1

runat="server"

>LinkButton</

asp:LinkButton

>

Image

Button

Displays a

graphical

image.

Click <asp:ImageBut

ton

id=ImageButto

n1

runat="server"

></asp:ImageB

utton>



Control

NameDescription

Commonly

Used

Events

Example Web

Form Code

DropDown

List

A dropdown

list that can

be data

bounded to

a data

source.

SelectedIn

dexChange

d

<asp:DropDow

nList

id=DropDownLi

st1

runat="server"

></asp:DropDo


source. ></asp:DropDo

wnList>

ListBox

A list box

control that

can be data

bounded to

a data

source.

SelectedIn

dexChange

d

<asp:ListBox

id=ListBox1

runat="server"

></asp:ListBox

>

DataGrid

A table with

data

binding.

EditComma

nd,

SelectedIn

dexChange

d

<asp:DataGrid

id=DataGrid1

runat="server"

></asp:DataGri

d>



Control

NameDescription

Commonly

Used

Events

Example Web

Form Code

DataList

Displays a

non-tabular

type of

format for

data.

SelectedInd

exChanged,

ItemCreate

d,

ItemDataBo

und

<asp:DataList

id=DataList1

runat="server"></

asp:DataList>


und

CheckBox

Used for

multiple

selections

from a

number of

options.

CheckChan

ged

<asp:CheckBox

id=CheckBox1

runat="server"></

asp:CheckBox>

CheckBox

List

Displays a

group of

check

boxes.

SelectedInd

exChanged

<asp:CheckBoxLis

t

id=CheckBoxList1

runat="server"></

asp:CheckBoxList

>



Control

NameDescription

Commonly

Used

Events

Example Web

Form Code

Radio

Button

Used for

single

selection

from a

number of

options.

CheckChang

ed

<asp:RadioButto

n

id=RadioButton1

runat="server"><

/asp:RadioButto

n>


options. n>

Radio

Button

List

Displays a

group of

radio

button.

SelectedInd

exChanged

<asp:RadioButto

nList

id=RadioButtonL

ist1

runat="server"><

/asp:RadioButto

nList>

Image

Displays an

image on an

HTML form

None <asp:Image

id=Image1

runat="server"><

/asp:Image>



Control

NameDescription

Commonly

Used

Events

Example Web

Form Code

Panel

Used to

group other

controls

None <asp:Panel

id=Panel1

runat="server">

Panel</asp:Pa

nel>

Creates a VisibleMont <asp:Calendar


Calendar

Creates a

calendar.

VisibleMont

hChanged,

DayRender

<asp:Calendar

id=Calendar1

runat="server">

</asp:Calendar

>

AdRotator

Used to

display list

of ads.

AdCreated <asp:AdRotator

id=AdRotator1

runat="server">

</asp:AdRotat

or>

Table

Used for

tabular

representati

on of data.

None <asp:Table

id=Table1

runat="server">

</asp:Table>


Using Using Using Using Validation ControlsValidation ControlsValidation ControlsValidation Controls

� Validation control

� can be linked to another control at designtime or run time

� RequiredFieldValidator

• used to test for required fields

� RangeValidatorControl

• used to test a range of input values


• used to test a range of input values

� RegularExpressionValidator

• used to test for values that match aparticular expression

� CompareValidator

• used to compare the value of one inputcontrol to another or to a fixed value

rngAgeValidate.ControlToValidate =

“txtAge”

rngAgeValidate.MinimumValue = “18”

rngAgeValidate.MaximumValue = “60”

rngAgeValidate.ErrorMessage = “Age

must be between 18 and 60 years

old.”


Using Using Using Using Rich ControlsRich ControlsRich ControlsRich Controls

� AdRotator

� used to display advertisement banners on a

page that automatically changes the

displayed advertisement every time the

page is refreshed or revisited.

<body>

<form id=”WebForm1” method=”post”


<form id=”WebForm1” method=”post”

runat=”server”>

<asp:AdRotator id=”AdRotator1”

runat=”server” width=”350px”

heigh=”40px”

AdvertisementFile=”ads.xml”>

</asp:AdRotator>

</form>

</body>


Using Using Using Using Rich ControlsRich ControlsRich ControlsRich Controls

<Advertisements>

<Ad>

<ImageUrl>images/graphic1.gif

</ImageUrl>

<NavigateUrl> http://www.sti.edu/admissions.asp

</NavigateUrl>

<AlternateText>

Click here for Admissions.

</AlternateText>


</AlternateText>

<Keyword>Admissions</Keyword>

<Impressions>80</Impressions>

</Ad>

<Ad>

<ImageUrl>images/graphic1.gif

</ImageUrl>

<NavigateUrl> http://www.sti.edu/programs.asp

</NavigateUrl>

<AlternateText>

Click here for Programs.

</AlternateText>

<Keyword>Programs</Keyword>

<Impressions>80</Impressions>

</Ad>

</Advertisements>


Handling Handling Handling Handling EventsEventsEventsEvents

� Events are created to handle these

interactions.

� Init

• where page initialization takes place

� Load


� Load

• used to view state information or access

controls

� PreRender

• occurs when the page is about to render its

contents to the Web browser

� Unload

• used to remove any resources created

throughout the request


Control Control Control Control EventsEventsEventsEvents

� Examples:

� Click event

� TextChanged event

� SelectedIndexChanged event

Private Sub btnPost_Click(ByVal

sender As System.Object, ByVal e



As System.EventArgs) Handles

btnPost.Click

Response.Write(“Button Clicked”)

txtInput.AutoPostBack = True

End Sub

Public Sub

txtInput_TextChanged(ByVal


As System.EventArgs) Handles

txtInput.TextChanged

Response.Write(“Text Changed”)

End Sub


Demo: HTML and Web Demo: HTML and Web Demo: HTML and Web Demo: HTML and Web Server ControlsServer ControlsServer ControlsServer Controls

� open Visual Studio 2005

� File > New Web Site

� select ASP.NET Web Site

� set Location to File System

� set Language to Visual Basic then click

OK


OK

� rename the aspx file

� expand the HTML controls then drag and

drop a HTML button element from the

Toolbox to the design window

� click on the Source tab



� scroll through the different properties of

the control in the Properties window


� add other HTML controls to the web form



� expand the Standard controls then drag

and drop a label Web control on the

design window

� add other Web controls

� save and view the page in browser


Technology

MELJUN CORTES Vb.net web controls.net