ASP.

NET Controls

Your IT Partner
Objectives
After completion of this chapter you will be able to:
• Use different types of Standard Controls available in
Visual Studio.
• Use different types of List Controls.
• Explain different types of Validation Controls.
• Use different types of Rich Controls.

CMC Limited
Introduction
• When you create ASP.NET Web pages, you can
use the following types of controls:
o HTML server controls: HTML server controls
expose an object model that maps very closely
to the HTML elements that they render.
o Web server controls: Web server controls
include buttons, text boxes, calendar, menus,
and a tree view control.
o Validation controls: Validation controls enable
to check for a required field, to test against a
specific value or pattern of characters, to verify
that a value lies within a range, and so on.
o User controls: By user controls it is an easy
way to create toolbars.
CMC Limited
 HTML Server Controls
• HTML server controls are HTML elements containing
attributes that make them programmable in server code.
• By default, HTML elements in an ASP.NET Web page are
not available to the server. Instead, they are treated as
opaque text and passed through to the browser.
• The object model for HTML server controls maps closely to
that of the corresponding elements.
• Any HTML element on a page can be converted to an
HTML server control by adding the attribute runat="server".
During parsing, the ASP.NET page framework creates
instances of all elements containing the runat="server"
attribute.

CMC Limited
Standard Controls
• This section describes how to work with ASP.NET
Web server controls that appears on the Standard
tab of the Visual Studio Toolbox.
• These include controls that enable you to display
buttons, lists, images, boxes, hyperlinks, labels,
tables, as well as more complicated controls that
work with static and dynamic data or controls that
act as containers for other controls.

CMC Limited
 Standard Controls contd..
Label Control
• Modify the text displayed in a page dynamically, use
the Label control.
• Following are the steps to add a Label Web server
control to a Web Forms page:
o From the Standard tab of the Toolbox, drag a
Label control onto the page.
o Add the following code in the Page_Load event.
Protected Sub Page_Load(ByVal sender
As Object, ByVal e As
System.EventArgs) Handles Me.Load
Label1.Text = "Current Time is: " &
DateTime.Now.ToString("T")
End Sub

CMC Limited
 Standard Controls contd..
• Press CTRL+F5 to run the page. The current time
will be displayed in the browser.

Label Control
• Label control renders its contents in an HTML
<span> tag. Whatever value you assign to the Text
property is rendered to the browser enclosed in a
<span> tag.

CMC Limited
 Standard Controls contd..

Literal Control
• The Literal control differs from the Label control in
that the Literal control does not add any HTML
elements to the text.
• The Literal control does not support any style
attributes, including position attributes. However, the
Literal control enables you to specify whether the
content is encoded.
• The Literal control supports the Mode property, which
specifies how the control handles markup that you
add to it.

CMC Limited
 Standard Controls contd..

Protected Sub Page_Load(ByVal sender As object,

ByVal e As System.EventArgs) Handles Me.Load
Literal1.Text = "<hr/>"
Literal2.Text = "<hr/>"
Literal3.Text = "<hr/>“
End Sub

Literal Control
CMC Limited
 Standard Controls contd..

Textbox Control
• The TextBox server control is an input control that lets
the user to enter text.
• The TextBox control can be used to display three
different types of input fields depending on the values
of its TextMode property.
• The TextMode property accepts the following values:

o SingleLine: Displays a single-line input field.

o MultiLine: Displays a multi-line input field.
o Password: Displays a single-line input field in which
the text is hidden. Setting the TextMode property to
TextBoxMode.Password makes sure that other
people cannot see a password.

CMC Limited
 Standard Controls contd..

TextBox Controls

CMC Limited
 Standard Controls contd..
CheckBox Control
• The CheckBox control provides a way for users to specify
yes/no (true/false) choices.
• This control supports several properties like below:
o AccessKey
o AutoPostBack
o Checked
o TabIndex
o Text
o TextAlign

CMC Limited
 Standard Controls contd..
Protected Sub CheckBox1_CheckedChanged(ByVal
sender As Object, ByVal e As
System.EventArgs) Handles
CheckBox1.CheckedChanged
Label1.Text = CheckBox1.Text & ": " &
CheckBox1.Checked.ToString
End Sub

CheckBox Control

CMC Limited
 Standard Controls contd..
RadioButton Control
• RadioButton control enables users to select from a small
set of mutually exclusive, predefined choices. Only one
radio button in a group of RadioButton controls can be
checked at a time.
• The RadioButton controls are grouped together with the
RadioButton control’s GroupName property. After grouping
the RadioButton controls only one of them can be checked
at a time.
• The RadioButton control supports several properties. Some
of them are described below:
o AccessKey o Enabled o Text
o AutoPostBack o GroupName o TextAlign
o Checked o TabIndex

CMC Limited
 Standard Controls contd..
Protected Sub Button1_Click(ByVal sender As
Object, ByVal e As System.EventArgs) Handles
Button1.Click
If RadioButton1.Checked Then
Label1.Text = "Wrong. You have selected '"
& RadioButton1.Text & "' option. Try again."
ElseIf RadioButton2.Checked Then
Label1.Text = "Right. You have selected '"
& RadioButton2.Text & "' option."
ElseIf RadioButton3.Checked Then
Label1.Text = "Wrong. You have selected
'" & RadioButton3.Text & "' option. Try
again."
End If
End Sub

CMC Limited
 Standard Controls contd..

RadioButton Control

CMC Limited
 Standard Controls contd..
Button Control
• Use the Button control to create a push button on the Web
page. By default, a Button control is a Submit button.
• A Submit button does not have a command name
associated with the button and simply posts the Web page
back to the server.
• The Button control supports several properties. Some of
them are described below:

o AccessKey o Enabled o TabIndex

o CommandArgument o OnClientClick o Text
o CommandName o PostBackUrl o UseSubmitBeh
avior

CMC Limited
 Standard Controls contd..
Protected Sub Button1_Command(ByVal sender As
Object, ByVal e As
System.Web.UI.WebControls.CommandEventArgs)
Handles Button1.Command
Label1.Text = "You clicked the " &
e.CommandName & _
" - " & e.CommandArgument & "
button."
End Sub

Button Control
CMC Limited
 Standard Controls contd..
LinkButton Control
• The LinkButton control, like the Button control, enables to
post a form to the server. The LinkButton control renders a
link instead of a push button.
• The LinkButton control supports several properties as given
below :
o CommandArgument o OnClientClick
o CommandName o PostBackUrl

• The LinkButton control also supports the following two

events:
o Click
o Command

CMC Limited
 Standard Controls contd..
ImageButton Control
• The ImageButton control always displays an image. Both
the Click and Command events are raised when the
ImageButton control is clicked.
• By using the OnClick event handler, you can
programmatically determine the coordinates where the
image is clicked. Code a response, based on the values of
the coordinates
• The ImageButton control supports several properties as
given below:

o AlternateText o CommandName o OnClientClick

o DescriptionUrl o ImageAlign o PostBackUrl
o CommandArgument o ImageUrl

CMC Limited
 Standard Controls contd..

Protected Sub ImageButton1_Click(ByVal

sender As Object, ByVal e As
System.Web.UI.ImageClickEventArgs)
Handles ImageButton1.Click
If ((e.X > 35 And e.X < 50) And (e.Y >
35 And e.Y < 50)) Then
Label1.Text = "You hit the
target."
Else
Label1.Text = "You miss the
target."
End If
End Sub

CMC Limited
 Standard Controls contd..

ImageButton Control

CMC Limited
 Standard Controls contd..
Image Control
• The Image Web server control allows to display images on
an ASP.NET Web page and manage the images in your
own code.
• Unlike most other Web server controls, the Image control
does not support any events.
• The Image control supports several properties. Some of
them are described below:

o AlternateText o ImageAlign
o DescriptionUrl o ImageUrl
o GenerateEmptyAlternateText

CMC Limited
 Standard Controls contd..
ImageMap Control
• The ASP.NET ImageMap control enables to create an
image that has individual regions that users can click,
which are called hot spots. Each of these hot spots may
be a separate hyperlink or postback event.
• An ImageMap control is composed out of instances of
the HotSpot class. A HotSpot defines the clickable
regions in an image map. The ASP.NET framework ships
with three HotSpot classes:
o CircleHotSpot
o PolygonHotSpot
o RectangleHotSpot

CMC Limited
 Standard Controls contd..
• The ImageMap control supports several properties.
Some of them are described below:
o AlternateText o HotSpots
o DescriptionUrl o ImageAlign
o GenerateEmptyAlternateText o ImageUrl
o HotSpotMode o Target

ImageMap Control

CMC Limited
 Standard Controls contd..
Panel Control
• The Panel control as a container for other controls. This
is particularly useful when you are creating content
programmatically and you need a way to insert the
content into the page.
• Manage a group of controls and associated markup as a
unit by putting them in a Panel control and then
manipulating the Panel control.
• Add scrolling behavior by placing the control in a Panel
control. To add scrollbars to the Panel control, set the
Height and Width properties to constrain the Panel
control to a specific size, and then set the ScrollBars
property.

CMC Limited
 Standard Controls contd..

• The Panel control supports many properties as given below:

o DefaultButton o HorizontalAlign
o Direction o ScrollBars
o GroupingText o Wrap

Panel Control

CMC Limited
 Standard Controls contd..
HyperLink Control
• Add a hyperlink to Web Forms page by placing a
HyperLink Web server control on the page and
associating it with a URL.
• Specify that HyperLink controls render as either text or
as graphics.
• The Hyperlink control supports several properties as
given below:
o Enabled
o ImageUrl
o NavigateUrl
o Target
o Text

CMC Limited
 Standard Controls contd..
List Controls
• The list controls include the ListBox, DropDownList,
CheckBoxList, RadioButtonList, and BulletedList. The list
controls work in essentially the same way but are
rendered differently in the browser.
• The ListItem control supports the following five
properties:
o Attributes
o Enabled
o Selected
o Text
o Value

CMC Limited
 Standard Controls contd..
DropDownList Control
• The DropDownList Web server control enables to
select an item from a predefined list. This control does
not support multi-selection mode.
• The DropDownList control is actually a container for
the list items, which are of type ListItem. Each ListItem
object is a separate object with its own properties.
• It raises the SelectedIndexChanged event when users
select an item. This event does not cause the page to
be posted to the server. However, you can cause the
control to force an immediate post by setting the
AutoPostBack property to True.

CMC Limited
 Standard Controls contd..

ListItem Collection Editor

CMC Limited
 Standard Controls contd..
Protected Sub Page_Load(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Me.Load
DropDownList1.Items.Add(New ListItem("C", "C"))
DropDownList1.Items.Add(New ListItem("C++", "C+
+"))
DropDownList1.Items.Add(New ListItem("Visual
Basic 6", "VB6"))
End Sub

DropDownList Control
CMC Limited
 Standard Controls contd..
RadioButtonList Control
• The RadioButttonList control displays a list of radio
buttons that can be arranged either horizontally or
vertically.
• The RadioButtonList control, like the DropDownList
control, enables a user to select only one list item at a
time.
• The RadioButtonList control includes three properties
that have an effect on its layout:
o RepeatColumns
o RepeatDirection
o RepeatLayout

CMC Limited
 Standard Controls contd..
• Following are the steps to add a RadioButtonList Web
server control to a Web Forms page.
o From the Standard tab of the Toolbox, drag a
RadioButtonList control onto the page.
o Add items to the RadioButtonList Web server control
in the same way as shown in case of DropDownList
Web server control.

RadioButtonList Control
CMC Limited
 Standard Controls contd..
ListBox Control
• Use the ListBox Web server control to display multiple
items at a time and to enable users to select one or more
items from the predefined list.
• The ListBox control differs from a DropDownList control
in that it can display multiple items at a time and that it
optionally enables the user to select multiple items.
• The ListBox control raises the SelectedIndexChanged
event when users select an item.
• This event does not cause the page to be posted to the
server, but the control to force an immediate postback by
setting the AutoPostBack property to True.

CMC Limited
 Standard Controls contd..

ListBox Control

CMC Limited
 Standard Controls contd..
CheckBoxList Control
• The CheckBoxList control renders a list of check boxes.
It can be rendered horizontally or vertically.
• The CheckBoxList control includes three properties that
affect its layout:
o RepeatColumns: The number of columns of check
boxes to display.
o RepeatDirection: The direction in which the check
boxes are rendered. Possible values are Horizontal
and Vertical.
o RepeatLayout: Determines whether the check boxes
are displayed in an HTML table. Possible values are
Table and Flow.

CMC Limited
 Standard Controls contd..
• Follow the steps to add a CheckBoxList Web server
control to a Web Forms page:
o From the Standard tab of the Toolbox, drag a
CheckBoxList control onto the page.
o In the Properties window, set the RepeateColumns
property to Horizontal.

CheckBoxList Control

CMC Limited
 Standard Controls contd..
BulletedList Control
• The BulletedList control renders either an unordered
(bulleted) or ordered (numbered) list. Each list item can
be rendered as plain text, a LinkButton control, or a link
to another web page.
• Control the appearance of the bullets that appear for
each list item with the BulletStyle property.
• This property accepts NotSet, Numbered, LowerAlpha,
UpperAlpha, LowerRoman, UpperRoman, Disc, Circle,
Square, and CustomImage values.
• Modify the appearance of each list item by modifying the
value of the DisplayMode property.
• This property accepts one of the following:
i) HyperLink ii) LinkButton iii) Text

CMC Limited
 Standard Controls contd..
• Follow the steps to add a BulletedList Web server control
to a Web Forms page:
o From the Standard tab of the Toolbox, drag a
BulletedList control onto the page.
o In the Properties window, set the DisplayMode
property to Hyperlink and Target property to _blank.

ListItem Collection Editor

CMC Limited
 Standard Controls contd..
• Press CTRL+F5 to run the page. When you click one of
the hyperlinks, the page is opened in a new window.

BulletedList Control

CMC Limited
 Validation Controls
• Validation controls can be used to validate user
input entered in a Web form.
• The following are the list of ASP.NET validation
controls and how to use them.
Type of validation Control to use Description
Required entry RequiredFieldValidator Ensures that the user does not skip an entry.
Comparison to a value CompareValidator Compares a user's entry against a constant value, against
the value of another control, or for a specific data type.
Range checking RangeValidator Checks that a user's entry is between specified lower and
upper boundaries. You can check ranges within pairs of
numbers, alphabetic characters, and dates.
Pattern matching RegularExpressionValidator Checks that the entry matches a pattern defined by a
regular expression.

User-defined CustomValidator Checks the user's entry using validation logic that you
write. This type of validation enables you to check the
values derived at run time.

Lists of Validation Control

CMC Limited
 Validation Controls contd..

RequiredFieldValidator Control
• The RequiredFieldValidator control enables to require a
user to enter a value into a form field.
• Must set two important properties when using the
RequiredFieldValdiator control:
i) ControlToValidate ii) Text

RequiredFieldValidator Control

CMC Limited
 Validation Controls contd..

CompareValidator Control
• Use the CompareValidator control to compare the
value entered by the user in an input control, such as a
TextBox control, with the value entered in another input
control or a constant value.
• The CompareValidator control has following:

o ControlToValidate o Type
o ControlToCompare o Operator
o Text o ValueToCompare

CMC Limited
 Validation Controls contd..
• Set the properties in the CompareValidator control:
o ControlToCompare to TextBox1
o ControlToValidate to TextBox2
o Type to Date
o Operator to GreaterThan
o ErrorMessage to Finish date must be greater than
beginning date

CompareValidator Control

CMC Limited
 Validation Controls contd..

RangeValidator Control
• Use the RangeValidator control to determine whether a
user's entry falls within a specific range of values.
• Must set following properties when using the
RangeValidator control:

o ControlToValidate: o MaximumValue
o MinimumValue o Type

CMC Limited
 Validation Controls contd..
• Set the following properties of the RangeValidator control:
o ControlToValidate to TextBox1
o MininumValue to 10
o MaximumValue to 100
o Type to Integer
o Operator to GreaterThan
o ErrorMessage to Value out of range
• The following output will be displayed.

RangeValidator Control
CMC Limited
 Validation Controls contd..

RegularExpressionValidator Control
• The RegularExpressionValidator control is used to
determine whether the value of an input control
matches a pattern defined by a regular expression.
• This type of validation allows you to check for
predictable sequences of characters, such as those in
social security numbers, e-mail addresses, telephone
numbers, postal codes, and so on.
• All regular expressions consist of two kinds of
characters:

o Literals
o Metacharacters

CMC Limited
 Validation Controls contd..
• Regular Expression Characters
Character Description
* Zero or more occurrences of the previous character or subexpression.
+ One or more occurrences of the previous character or subexpression.
() Groups a subexpression that will be treated as a single element.
{m,n} The previous character (or subexpression) can occur from m to n times.
| Either of two matches.
[] Matches one character in a range of valid characters.
[^ ] Matches a character that isn’t in the given range.
. Any character except newline.
\s Any whitespace character (such as a tab or space).
\S Any nonwhitespace character.
\d Any digit character.
\D Any character that isn’t a digit.
\w Any “word” character (letter, number, or underscore).
\W Any character that isn’t a “word” character (letter, number, or underscore).

CMC Limited
 Validation Controls contd..
• Commonly used regular expression
Content Regular Description
Expression
E-mail \ Check for an at (@) sign and dot (.) and allow
address S+@\S+\.\S nonwhitespace characters only.
+
Password \w+ Any sequence of one or more word characters (letter,
space, or underscore).
Specific- \w{4,10} A password that must be at least four characters long but no
length longer than ten characters.
password
Advanced [a-zA- As with the specific-length password, this regular
password Z]\w{3,9} expression will allow four to ten total characters. The twist is
that the first character must fall in the range of a–z or A–Z.
Limited- \S{4,10} Like the password example, this allows four to ten
length field characters, but it allows special characters (asterisks,
ampersands, and so on).
U.S. Social \ A sequence of three, two, then four digits, with each group
Security d{3}-\d{2}-\d{ separated by a dash. You could use a similar pattern when
number 4} requiring a phone number.

CMC Limited
 Validation Controls contd..

Regular Expression Editor

RegularExpressionValidator Control

CMC Limited
 Validation Controls contd..

CustomValidator Control
• If none of the other validation controls perform the type
of validation that you need, you can use the
CustomValidator control.
• The CustomValidator control has following important
properties:
o ControlToValidate
o Text
o ClientValidationFunction

CMC Limited
 Validation Controls contd..

Adding ServerValidate Event

CustomValidator Control

CMC Limited
 Validation Controls contd..

ValidationSummary Control
• The ValidationSummary control allows you to
summarize the error messages from all validation
controls on a Web page in a single location.
• The summary can be displayed as a list, a bulleted list,
or a single paragraph, based on the value of the
DisplayMode property.
• The ValidationSummary control supports the following
properties:
o DisplayMode
o HeaderText
o ShowMessageBox
o ShowSummary

CMC Limited
 Validation Controls contd..

Web Form in Design View

ValidationSummary Control

CMC Limited
 Validation Controls contd..

ValidationSummary Control – Displaying error messages in

a popup alert box

CMC Limited
Rich Controls
• Rich controls are web controls that model complex
user interface elements.
• The Rich Controls supports the following properties:
o FileUpload
o Calendar
o AdRotator
o MultiView
o Wizard control

CMC Limited
 Rich Controls contd..

FileUpload Control
• The FileUpload control enables users to upload
pictures, text files, or other files.
• The FileUpload control displays a text box where users
can enter the full path to the file on the local computer
that they want to upload to the server.
• The user can select the file by clicking the Browse
button, and then locating it in the Choose File dialog
box.
• For security reasons, you cannot pre-load the name of
a file into the FileUpload control.
• The FileUpload control does not automatically send a
file to the server after the user selects the file to upload.

CMC Limited
 Rich Controls contd..
• The FileUpload control supports many properties like below:
o FileBytes o HasFile o Focus
o FileContent o PostedFile o SaveAs
o FileName

FileUpload Control – No file provided to upload

CMC Limited
 Rich Controls contd..

FileUpload Control – in case of selecting file other than

".bmp", ".gif" or ".jpg“

CMC Limited
 Rich Controls contd..

FileUpload Control – After successfully upload the file

CMC Limited
 Rich Controls contd..
Calendar Control
• The Calendar Web server control can be used to display
selectable dates in a calendar and to display data
associated with specific dates.
• The Calendar control supports many properties like below:
o DayNameFormat o ShowDayHeader
o NextMonthText o ShowNextPrevMonth
o NextPrevFormat o ShowTitle
o PrevMonthText o TitleFormat
o SelectedDate o TodaysDate
o SelectedDates o VisibleDate
o SelectionMode o DayRender
o SelectMonthText o SelectionChanged
o SelectWeekText o VisibleMonthChanged

CMC Limited
 Rich Controls contd..

Calendar Control

CMC Limited
 Rich Controls contd..
AdRotator Control
• The AdRotator Web server control provides a way to
display advertisements on your ASP.NET Web pages.
• The control displays a .gif file or other graphic image that
provide. When users click the ad, they are redirected to a
target URL that you have specified.
• The control automatically reads advertisement information,
such as the graphic file name and the target URL, from a
list of ads that you provide using a data source.
• The AdRotator control selects ads randomly, changing the
displayed ad each time the page is refreshed.
• Ads can be weighted to control the priority level of
banners, making it possible to have certain ads display
more often than others.

CMC Limited
 Rich Controls contd..
• The AdRotator control supports many properties as below:
o AdvertisementFile o DataSource o KeywordFilter
o AlternateTextField o DataSourceID o NavigateUrlField
o DataMember o ImageUrlField o Target

• Add xml code as shown above within this ads.xml file.

XML file

CMC Limited
 Rich Controls contd..

AdRotator Control

CMC Limited
 Rich Controls contd..
MultiView Control
• The MultiView control enables you to hide and display
different areas of a page.
• The MultiView control contains one or more View controls.
You use the MultiView control to select a particular View
control to render.
• The contents of the remaining View controls are hidden.
You can render only one View control at a time.
• The MultiView control supports the following properties:
o ActiveViewIndex
o Views
o GetActiveView
o SetActiveView

CMC Limited
 Rich Controls contd..

MultiView and View Controls – multiview.aspx

CMC Limited
 Rich Controls contd..
• Recognized Command Names for the MultiView
Command Name MultiView Field Description

PrevView PreviousViewCommandName Moves to the previous view.

NextView NextViewCommandName Moves to the next view.

SwitchViewByID SwitchViewByIDCommandName Moves to the view with a

specific ID (string name). The
ID is taken from the
CommandArgument property
of the button control.
SwitchViewByIndex SwitchViewByIndexCommandName Moves to the view with a
specific numeric index. The
index is taken from the
CommandArgument property
of the button control.

CMC Limited
 Rich Controls contd..

MultiView Control – Displaying View1

CMC Limited
 Rich Controls contd..
Wizard Control
• The Wizard control, like the MultiView control, can be used
to divide a large form into multiple sub-forms.
• The Wizard control, however, supports many advanced
features that are not supported by the MultiView control.
• The Wizard control supplies navigation buttons and a
sidebar with links for each step on the left.
• The Wizard control contains one or more WizardStep child
controls.
• The Wizard control supports the following properties:
o ActiveStep o DisplaySideBar
o ActiveStepIndex o FinishDestinationPageUrl
o CancelDestinationPageUrl o HeaderText
o DisplayCancelButton o WizardSteps

CMC Limited
 Rich Controls contd..
• The Wizard control also supports the following templates:
o FinishNavigationTemplate
o StartNavigationTemplate
o HeaderTemplate
o StepNavigationTemplate
o SideBarTemplate
• The Wizard control also supports the following methods:
o GetHistory()
o GetStepType()
o MoveTo()
• The Wizard control also supports the following events:
o ActiveStepChanged o NextButtonClick
o CancelButtonClick o PreviousButtonClick
o FinishButtonClick o SideBarButtonClick
o Activate o Deactivate

CMC Limited
 Rich Controls contd..
• The WizardStep control supports the following properties:
o AllowReturn o Title
o Name o Wizard
o StepType

• Follow the steps to work with Wizard web control:

Wizard Control – Step 1 WizardStep

CMC Limited
 Rich Controls contd..

Wizard Control – Step 2 WizardStep

Wizard Control – Step 3 WizardStep

CMC Limited
 Rich Controls contd..

Wizard Control

CMC Limited