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”>
Visual Basic .NET Programming
Using HTML Using HTML Using HTML Using HTML Server ControlsServer ControlsServer ControlsServer Controls
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
Web Controls * Property of STIPage 2 of 19
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>
Visual Basic .NET Programming
Using HTML Using HTML Using HTML Using HTML Server ControlsServer ControlsServer ControlsServer Controls
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>
Web Controls * Property of STIPage 3 of 19
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>
Visual Basic .NET Programming
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
Web Controls * Property of STIPage 4 of 19
� 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
Visual Basic .NET Programming
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
Web Controls * Property of STIPage 5 of 19
type of list
� Validation Controls
� provide simple control validation
� Rich Controls
� simplify common Web page requirements
Visual Basic .NET Programming
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
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
Web Controls * Property of STIPage 6 of 19
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>
Visual Basic .NET Programming
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
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
Web Controls * Property of STIPage 7 of 19
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>
Visual Basic .NET Programming
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
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
Web Controls * Property of STIPage 8 of 19
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>
Visual Basic .NET Programming
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
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>
Web Controls * Property of STIPage 9 of 19
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
>
Visual Basic .NET Programming
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
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>
Web Controls * Property of STIPage 10 of 19
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>
Visual Basic .NET Programming
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
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
Web Controls * Property of STIPage 11 of 19
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>
Visual Basic .NET Programming
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
Web Controls * Property of STIPage 12 of 19
• 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.”
Visual Basic .NET Programming
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”
Web Controls * Property of STIPage 13 of 19
<form id=”WebForm1” method=”post”
runat=”server”>
<asp:AdRotator id=”AdRotator1”
runat=”server” width=”350px”
heigh=”40px”
AdvertisementFile=”ads.xml”>
</asp:AdRotator>
</form>
</body>
Visual Basic .NET Programming
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>
Web Controls * Property of STIPage 14 of 19
</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>
Visual Basic .NET Programming
Handling Handling Handling Handling EventsEventsEventsEvents
� Events are created to handle these
interactions.
� Init
• where page initialization takes place
� Load
Web Controls * Property of STIPage 15 of 19
� 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
Visual Basic .NET Programming
Control Control Control Control EventsEventsEventsEvents
� Examples:
� Click event
� TextChanged event
� SelectedIndexChanged event
Private Sub btnPost_Click(ByVal
sender As System.Object, ByVal e
Web Controls * Property of STIPage 16 of 19
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
sender As System.Object, ByVal e
As System.EventArgs) Handles
txtInput.TextChanged
Response.Write(“Text Changed”)
End Sub
Visual Basic .NET Programming
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
Web Controls * Property of STIPage 17 of 19
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
Visual Basic .NET Programming
Demo: HTML and Web Demo: HTML and Web Demo: HTML and Web Demo: HTML and Web Server ControlsServer ControlsServer ControlsServer Controls
� scroll through the different properties of
the control in the Properties window
Web Controls * Property of STIPage 18 of 19
� add other HTML controls to the web form
Visual Basic .NET Programming
Demo: HTML and Web Demo: HTML and Web Demo: HTML and Web Demo: HTML and Web Server ControlsServer ControlsServer ControlsServer Controls
� 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
Web Controls * Property of STIPage 19 of 19