Download - MELJUN CORTES Vb.net handout web controls
Visual Basic .NET Programming
Web Controls * Property of STI Page 1 of 3
TOPIC TITLE: Web Controls Specific Objectives: At the end of the topic session, the students are expected to: Cognitive:
1. List the different HTML server controls. 2. Explain the different types of Web server controls. 3. Identify and familiarize the different Web server controls. 4. Explain event handling in ASP.NET and list some events used in
handling interactions. 5. Explain how to add to events to individual controls
Affective:
1. Listen to others with respect. 2. Participate in class discussions actively.
MATERIALS/EQUIPMENT:
o topic slides o OHP
TOPIC PREPARATION:
o Have the students research on the following: � HTML server Controls � Web server Controls
o It is imperative for the instructor to incorporate various kinds of teaching strategies while discussing the suggested topics. The instructor may use the suggested learning activities below to facilitate a thorough and creative discussion of the topic.
o Prepare the slides to be presented in the class.
TOPIC PRESENTATION: The topic will revolve around Web Forms and Web Services. This will be the suggested flow of discussion for the course topic:
1. Ask the students to cite some HTML server controls and web server controls and identify its use.
2. Identify the different HTML controls that can be used in a web application as well as its uses. Also, provide example for each control.
3. Explain the different types of Web server controls. 4. Identify different Web server controls as well as its uses and
commonly used server-side events. Also, provide code samples for each control.
5. Discuss the use of Validation and Rich controls by providing some examples.
6. Discuss the event-handling model for ASP .NET web pages and identify and define some events created to handle a particular interaction.
7. Provide a sample code on how to add events to individual controls.
8. Demonstrate how to add different HTML server controls and Web server controls.
Visual Basic .NET Programming
Web Controls * Property of STI Page 2 of 3
Using HTML Server Controls Page 1 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 1 of 19
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
� runat directive is used to convert HTML
elements to HTML server controls
<input type=”text” id=”text1”
value=”some text”
runat=”server”>
Using HTML Server Controls Page 2 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 2 of 19
Using HTML Using HTML Using HTML Using HTML Server ControlsServer ControlsServer ControlsServer Controls
<input type=file
runat=server>
Used for multi-
line text input.
Text Area
<input type=text
runat=server>
Mainly used for
single-line text
input.
Text Field
<input
type=password
runat=server>
Used for password
input. Password Field
<input
type=submit
runat=server>
It automatically
POSTs the form data to the value
of the action
attribute in the
FORM tag
Submit
Button
<input type=reset
runat=server>
Resets the values
of all HTML
controls.
Reset Button
<input
type=button
runat=server>
Commonly used to
respond to Clickevents
Button
Example
CodeUsage
Control
Name
Using HTML Server Controls Page 3 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 3 of 19
Using HTML Using HTML Using HTML Using HTML Server ControlsServer ControlsServer ControlsServer Controls
<img
src="FileName"
runat=server>
Displays an image
on an HTML
form.
Image
<table
runat=server></t
able>
Used for tabular
representation of
data.
Table
<input
type=checkbox
runat=server>
Used for multiple
selections from a
number of
options.
CheckBox
<select size=2
runat=server
></select>
Displays a list of
items to the
user.
ListBox
<input type=radio
runat=server>
Used for single
selection from a
number of
options.
Radio Button
<select><option>
</option></selec
t>
Used to select
one value from a
list of options.
Dropdown
Example
CodeUsage
Control
Name
Web Forms are definitely the heart and soul of ASP.NET. Web Forms are the User Interface (UI) elements that provide the look and feel to Web applications. It is similar to Windows Forms in that they provide properties, methods and events for the controls that are placed onto them. Web Forms are made up of two components: the visual portion (the ASPX file) and the code behind the form which resides in a separate class file. There are two types of controls that can be used to create the user interface: HTML controls and Web Form controls. Using HTML Server Controls
The namespace System.Web.UI.HtmlControls defines the HTML
controls that can be used in building web application in ASP.Net. The
HTML elements are converted to HTML server controls using the runat
directive. The runat directive is set to the value of the server. For example, the code below declares a text input fields to run on the server: <input type=”text” id=”text1” value=”some text”
runat=”server”>
When the control is marked to run on the server, control properties can now be manipulated programmatically. The properties correspond directly to the equivalent HTML tag predecessors. To specify the programmatic accessor that identifies the control in the server code, the
ID attribute is used. The Value attribute is then used to set the initial display value of the control like text field. The table below lists the different HTML server controls.
Control Name Usage 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>
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 Area Used for multi-line text input.
<input type=file runat=server>
Password Field Used for password input. <input
type=password runat=server>
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 options
<input type=radio runat=server>
Table Used for tabular representation of data.
<table runat=server></table>
Image Displays an image on an HTML form
<img src="FileName" runat=server>
ListBox Displays a list of items to <select size=2
Visual Basic .NET Programming
Web Controls * Property of STI Page 3 of 3
the user. runat=server ></select>
Dropdown Used to select one value from a list of options.
<select><option></option></select>
[Using HTML Controls, Pages 1-3 of 19]
Web Server Controls Page 4 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 4 of 19
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 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
Web Server Controls Web server controls runs only on the server. Web server controls are rendered differently to suit the capabilities of different browsers. It provides upward and downward compatibility to all types of browsers. Compared to HTML controls, Web server controls are strongly typed. With this, compile-time checking of code provides an accurate error messages. Also, Web server controls are declared using an XML tag. This tag
references the asp namespace and specifies information regarding the type of Web control, its attribute and initial value if there is any. Web server controls also supports enhanced versions of HTML form controls
such as TextBox and complex controls such as Calendar.
[Web Server Controls, Page 4 of 19]
Types of Web Server Controls Page 5 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 5 of 19
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
� Validation Controls
� provide simple control validation
� Rich Controls
� simplify common Web page requirements
Types of Web Server Controls Intrinsic Controls These controls provide the basic functionality for user interaction with the browser. Most of these controls are similar to the corresponding HTML controls. Some examples are Button, TextBox and CheckBox.
List Controls These controls are used for repetition when displaying any type of list.
Examples are DropDownList, ListBox, Repeater and DataGrid. Validation Controls These controls provide simple control validation that displays a message to the user without making a return trip to the server. Examples are
RequiredFieldValidator, RangeValidator,
RegularExpressionValidator and CompareValidator.
Rich Controls These controls simplify common Web page requirements. Examples are
AdRotator and Calendar.
Visual Basic .NET Programming
Web Controls * Property of STI Page 4 of 3
Types of Web Server Controls Page 6 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 6 of 19
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
<asp:HyperLi
nk
id=HyperLink
1
runat="server
">HyperLink
</asp:Hyper
Link>
None A
hyperlink
control
that
responds
to a click
event.
Hyper-link
<asp:TextBox
id=TextBox1
runat="server
"></asp:Text
Box>
TextChangedUsed for
single-line
text input. TextBox
<asp:Label
id=Label1
runat="server
">Label</asp
:Label>
NoneDisplays a
text on the
HTML page Label
Example
Web Form Code
Commonly Used Events
Descript-ion
Control Name
Types of Web Server Controls Page 7 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 7 of 19
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
<asp:LinkButto
n
id=LinkButton1
runat="server"
>LinkButton</
asp:LinkButton
>
Click,
Command
A button-
like
hyperlink. LinkButton
<asp:ImageBut
ton
id=ImageButto
n1
runat="server"
></asp:ImageB
utton>
Click Displays a
graphical
image. ImageButton
<asp:Button
id=Button1
runat="server"
Text="Button">
</asp:Button>
Click,
Command
Commonly
used to
respond to
Clickevents.
Button
Example Web Form Code
Commonly
Used Events
DescriptionControl Name
Types of Web Server Controls Page 8 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 8 of 19
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
<asp:ListBox
id=ListBox1
runat="server"
></asp:ListBox
>
SelectedIn
dexChange
d
A list box
control that
can be data
bounded to
a data
source.
ListBox
<asp:DataGrid
id=DataGrid1
runat="server"
></asp:DataGri
d>
EditComma
nd,
SelectedIn
dexChange
d
A table with
data
binding. DataGrid
<asp:DropDow
nList
id=DropDownLi
st1
runat="server"
></asp:DropDo
wnList>
SelectedIn
dexChange
d
A dropdown
list that can
be data
bounded to
a data
source.
DropDownList
Example Web Form Code
Commonly
Used Events
DescriptionControl Name
The table below lists the different Web server controls.
Control Name
Description 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>
TextBox
Used for single-line text input.
TextChanged
<asp:TextBox id=TextBox1 runat="server"></asp:TextBox>
Button
Commonly used to respond to Click events. The CommandName and CommandArguments properties can be used to pass additional information.
Click, Command
<asp:Button id=Button1 runat="server" Text="Button"></asp:Button>
LinkButton
A button-like hyperlink.
Click, Command
<asp:LinkButton id=LinkButton1 runat="server">LinkButton</asp:LinkButton>
Image Button
Displays a graphical image.
Click <asp:ImageButton id=ImageButton1 runat="server"></asp:ImageButton>
Hyperlink
A hyperlink control that responds to a click event.
None <asp:HyperLink id=HyperLink1 runat="server">HyperLink </asp:HyperLink>
DropDownList
A dropdown list that can be data bounded to a data source.
SelectedIndexChanged
<asp:DropDownList id=DropDownList1 runat="server"></asp:DropDownList>
ListBox
A list box control that can be data bounded to a data source.
SelectedIndexChanged
<asp:ListBox id=ListBox1 runat="server"></asp:ListBox>
DataGrid
A table with data binding. With data binding, paging, sorting, and formatting can be applied very easily with this control.
CancelCommand, EditCommand, DeleteCommand, ItemComm
<asp:DataGrid id=DataGrid1 runat="server"></asp:DataGrid>
Visual Basic .NET Programming
Web Controls * Property of STI Page 5 of 3
Types of Web Server Controls Page 9 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 9 of 19
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
<asp:CheckBox
id=CheckBox1
runat="server"></
asp:CheckBox>
CheckChan
ged
Used for
multiple
selections
from a
number of
options.
CheckBox
<asp:CheckBoxLis
t
id=CheckBoxList1
runat="server"></
asp:CheckBoxList
>
SelectedInd
exChanged
Displays a
group of
check
boxes.
CheckBox
List
<asp:DataList
id=DataList1
runat="server"></
asp:DataList>
SelectedInd
exChanged,
ItemCreate
d,
ItemDataBo
und
Displays a
non-tabular
type of
format for
data.
DataList
Example Web Form Code
Commonly
Used Events
DescriptionControl Name
Types of Web Server Controls Page 10 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 10 of 19
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
<asp:RadioButto
nList
id=RadioButtonL
ist1
runat="server"><
/asp:RadioButto
nList>
SelectedInd
exChanged
Displays a
group of
radio
button.
Radio
ButtonList
<asp:Image
id=Image1
runat="server"><
/asp:Image>
None Displays an
image on an
HTML form Image
<asp:RadioButto
n
id=RadioButton1
runat="server"><
/asp:RadioButto
n>
CheckChang
ed
Used for
single
selection
from a
number of
options.
Radio
Button
Example Web Form Code
Commonly
Used Events
DescriptionControl Name
Types of Web Server Controls Page 11 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 11 of 19
Types of Web Types of Web Types of Web Types of Web Server ControlsServer ControlsServer ControlsServer Controls
<asp:AdRotator
id=AdRotator1
runat="server">
</asp:AdRotat
or>
AdCreatedUsed to
display list
of ads. AdRotator
<asp:Table
id=Table1
runat="server">
</asp:Table>
None Used for
tabular
representati
on of data.
Table
<asp:Calendar
id=Calendar1
runat="server">
</asp:Calendar
>
VisibleMont
hChanged,
DayRender
Creates a
calendar.
Calendar
<asp:Panel
id=Panel1
runat="server">
Panel</asp:Pa
nel>
None Used to
group other
controls Panel
Example Web Form Code
Commonly Used Events
DescriptionControl Name
and, SelectedIndexChanged, PageIndexChanged, SortCommand, UpdateCommand, ItemCreated, ItemDataBound
DataList
Displays a non-tabular type of format for data.
CancelCommand, EditCommand, DeleteCommand, ItemCommand, SelectedIndexChanged, UpdateCommand, ItemCreated, ItemDataBound
<asp:DataList id=DataList1 runat="server"></asp:DataList>
CheckBox
Used for multiple selections from a number of options.
CheckChanged
<asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox>
CheckBox List
Displays a group of check boxes.
SelectedIndexChanged
<asp:CheckBoxList id=CheckBoxList1 runat="server"></asp:CheckBoxList>
Radio Button
Used for single selection from a number of options.
CheckChanged
<asp:RadioButton id=RadioButton1 runat="server"></asp:RadioButton>
Radio ButtonList
Displays a group of radio button.
SelectedIndexChanged
<asp:RadioButtonList id=RadioButtonList1 runat="server"></asp:RadioButtonList>
Image
Displays an image on an HTML form
None <asp:Image id=Image1 runat="server"></asp:Image>
Panel
Used to group other controls
None <asp:Panel id=Panel1 runat="server">Panel</asp:Panel>
Visual Basic .NET Programming
Web Controls * Property of STI Page 6 of 3
Calendar
Creates a calendar. SelectionChanged, VisibleMonthChanged, DayRender
<asp:Calendar id=Calendar1 runat="server"></asp:Calendar>
AdRotator
Used to display list of ads.
AdCreated <asp:AdRotator id=AdRotator1 runat="server"></asp:AdRotator>
Table
Used for tabular representation of data.
None <asp:Table id=Table1 runat="server"></asp:Table>
XML Displays XML documents within the HTML.
None <asp:Xml id="Xml1" runat="server"></asp:Xml>
[Types of Web Server Controls, Pages 5-11 of 19]
Using Validation Controls Page 12 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 12 of 19
Using Using Using Using Validation ControlsValidation ControlsValidation ControlsValidation Controls
� Validation control
� can be linked to another control at design time or run time
� RequiredFieldValidator
• used to test for required fields
� RangeValidatorControl
• used to test a range of input values
� RegularExpressionValidator
• used to test for values that match a particular expression
� CompareValidator
• used to compare the value of one input control 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 Validation Controls Validation control can be linked to another control at design time or run time. It is used to make comparison against the linked control. The
RequiredFieldValidator control is used to test for required fields.
The RangeValidatorControl control is used to test a range of input
values. The RegularExpressionValidator control is used to test
for values that match a particular expression. The CompareValidator control is used to compare the value of one input control to the value of another input control or to a fixed value.
The following example shows a RangeValidator control and a
TextBox Web server control. The validation control checks whether the
value in the TextBox matches the given range.
Assume that the instance of RangeValidator control is
“rngAgeValidate.” The TextBox control name is “txtAge”.
rngAgeValidate.ControlToValidate = “txtAge”
rngAgeValidate.MinimumValue = “18”
rngAgeValidate.MaximumValue = “60”
rngAgeValidate.ErrorMessage = “Age must be between 18
and 60 years old.”
[Using Validation Controls, Page 12 of 19]
Using Rich Controls
The AdRotator control is used to display advertisement banners on a page that automatically changes the displayed advertisement every time the page is refreshed or revisited. The details about the advertisement are contained in an XML file which includes information on the image, location of image, redirection and the number of times the advertisement will appear.
The example on the next page shows how to use an AdRotator
control.
Visual Basic .NET Programming
Web Controls * Property of STI Page 7 of 3
Using Rich Controls Page 13 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 13 of 19
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”
runat=”server”>
<asp:AdRotator id=”AdRotator1”
runat=”server” width=”350px”
heigh=”40px”
AdvertisementFile=”ads.xml”>
</asp:AdRotator>
</form>
</body>
Using Rich Controls Page 14 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 14 of 19
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>
<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>
<body>
<form id=”WebForm1” method=”post” runat=”server”>
<asp:AdRotator id=”AdRotator1” runat=”server”
width=”350px” heigh=”40px”
AdvertisementFile=”ads.xml”>
</asp:AdRotator>
</form>
</body>
The following example is the XML file (ads.xml) referenced by the code above. <Advertisements>
<Ad>
<ImageUrl>images/graphic1.gif
</ImageUrl>
<NavigateUrl> http://www.sti.edu/admissions.asp </NavigateUrl>
<AlternateText>
Click here for Admissions.
</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> [Using Rich Controls, Pages 13-14 of 19]
Handling Events Page 15 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 15 of 19
Handling Handling Handling Handling EventsEventsEventsEvents
� Events are created to handle these interactions.
� Init
• where page initialization takes place
� 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
Handling Events ASP.NET is created for the main purpose of providing dynamic control and interactivity to users. Events are created to handle these
interactions. Every Web page inherits from the Page class. It provides
several useful events from other inherited classes such as Controls
and TemplateControl classes. Some of these events are listed below in order in which they are triggered during user interaction.
1. Init – It is the first step in the page lifecycle. This is where page initialization takes place. Usually, it is used to initialize local variables.
2. Load – It occurs after the Init event and it is used to view
state information or access controls.
3. PreRender – This event occurs when the page is about to render its contents to the Web browser.
4. Unload – This event is used after the page content is rendered to the browser. It is also used to remove any resources created throughout the request.
Visual Basic .NET Programming
Web Controls * Property of STI Page 8 of 3
[Handling Events, Page 15 of 19]
Control Events Page 16 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 16 of 19
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
sender As System.Object, ByVal e
As System.EventArgs) Handles
txtInput.TextChanged
Response.Write(“Text Changed”)
End Sub
Control Events
Server controls share the events of Page class. To enhance user interaction, individual controls add their own events to the object model.
Examples include the simple Click event for the Button class, the
TextChanged event for the TextBox class and the
SelectedIndexChanged event for the ListControl class. There are controls that post their events to the server as soon as it is
triggered. Example of such is the Click event of the Button class.
Some controls such as TextChanged of the TextBox class only register events when other means are used to post events to the server.
This behavior can be altered by setting the AutoPostBack property of
the control to TRUE. Once set, the event can be raised immediately
regardless of the default behavior. The following example shows how to add to events to individual controls,
TextBox and Button.
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 sender As
System.Object, ByVal e As System.EventArgs) Handles
txtInput.TextChanged
Response.Write(“Text Changed”)
End Sub
When the user types a value into the TextBox control and tabs to the
Button control, the TextChanged event is held back until the button is clicked. This posts to the Web Form and executes first the
txtInput_TextChanged handler and then the btnPost_Click
handler. The page is then displayed again with the event order written
as part of the page using the Response.Write method. The post will now occur as soon as the user changes the value and tabs out of the
txtInput control. It is because the txtInput_AutoPostBack
property is set to True. [Control Events, Page 16 of 19]
Demo: HTML and Web Server Controls
1. Open Visual Studio 2005. 2. In the menu bar, click File and then click New Web Site. 3. In the New Web Site window, select ASP.NET Web Site. In the
Location information, make sure that the drop-down list is set to File System. Then, set the location of your Web application.
4. For the Language information, select Visual Basic. Click OK. 5. In the Solutions Explorer, rename the aspx file named
Default.aspx to WebControlDemo.aspx. 6. Open the Toolbox then expand the HTML controls. Drag and
Visual Basic .NET Programming
Web Controls * Property of STI Page 9 of 3
Demo: HTML and Web Server Controls Pages 17 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 17 of 19
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
� 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
Demo: HTML and Web Server Controls Pages 18 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 18 of 19
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
� add other HTML controls to the web form
drop a HTML button element on the design window. 7. Show the generated source code to your students by clicking on
the Source tab.
8. Also, in the Properties window, scroll through the different properties of the control.
9. Add other HTML controls namely;
• Text Field
• Text Area
• CheckBox
• Radio Button
• Table
• Image
10. Open the Toolbox, expand the Standard controls. Drag and drop a label Web control on the design window. Show the generated source code to your students. Also, in the properties window, scroll through the different properties of the control.
11. Add other Web controls namely;
• LinkButton
• ImageButton
• Calendar
Visual Basic .NET Programming
Web Controls * Property of STI Page 10 of 3
Demo: HTML and Web Server Controls Pages 19 of 19
Web Controls
Visual Basic .NET Programming
* Property of STIPage 19 of 19
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
• AdRotator
• Table
12. Save and view the page in browser.
[Demo: HTML and Web Server Controls, Pages 17-19 of 19]
EVALUATION/GENERALIZATION:
• Web Forms are made up of two components: the visual portion (the ASPX file) and the code behind the form which resides in a separate class file.
• The HTML elements are converted to HTML server controls using the runat directive.
• Web server controls runs only on the server and are rendered differently to suit the capabilities of different browsers.
• Validation control can be linked to another control at design time or run time.
REFERENCES:
� Microsoft Official Course, (2002), 2373B: Programming with
Microsoft Visual Basic .NET, Microsoft Corporation � Holzner, Steven, (2003), Sams teach yourself Microsoft Visual
Basic.Net 2003 in 21 days, USA, Sams Publishing � Liberty, Jesse, (2003), Learning Visual Basic .NET, USA,
O'Reilly & Associates, Inc