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.



Using HTML Server Controls Page 1 of 19

Web Controls


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


Web 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


Web 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



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



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



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.




Web 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


Web 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


Web 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


Commonly

Used Events


The table below lists the different Web server controls.

Control Name

Description Commonly

Used Events


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.


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




Web 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


Commonly

Used Events



Web 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


Commonly

Used Events



Web 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


Commonly Used Events


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.


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


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



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



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.



Using Rich Controls Page 13 of 19

Web Controls



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



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>

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

</NavigateUrl>

<AlternateText>

Click here for Programs.

</AlternateText>

<Keyword>Programs</Keyword>


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

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

<AlternateText>

Click here for Admissions.

</AlternateText>

<Keyword>Admissions</Keyword>


</Ad>

<Ad>


</ImageUrl>

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

<AlternateText>

Click here for Programs.

</AlternateText>

<Keyword>Programs</Keyword>


</Ad>

</Advertisements> [Using Rich Controls, Pages 13-14 of 19]

Handling Events Page 15 of 19

Web Controls



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.



[Handling Events, Page 15 of 19]

Control Events Page 16 of 19

Web Controls



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



Demo: HTML and Web Server Controls Pages 17 of 19

Web Controls



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


Web 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




Web 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

Technology

MELJUN CORTES Vb.net handout web controls