The success of an application largely depends upon its

user interface. For an application to be successful, its

interface needs to be attractive and easy-to-use. Such a
user interface can be designed by using various types of
controls provided in ASP.NET.
ASP.NET provides various types of controls that can be
added to a Web form to make it interactive. However,
while developing an application, you may face a situation
where the built-in controls do not fulfill your
requirements. In such a situation, you need to create
custom controls.
This chapter provides an overview of the controls used in
an ASP.NET application. It also discusses how to create
custom controls and implement them in a Web
application.

Objectives
In this chapter, you will learn to:
 Use ASP.NET Web Server controls
 Create custom controls

Chapter 2

Working with Controls

Using ASP.NET Web Server Controls

In the earlier days of Web development, the programmers had to use HTML controls to
design a Web application because there were no other controls available. The HTML
controls do not provide any built-in methods and events. Programmers had to manually
write the methods and events by using client-side scripts to create a dynamic Web page.
This is a time-consuming process. In addition, it is insecure because the client-side scripts
are visible to the users when they view the source for the Web page.
ASP.NET solves this problem by providing server controls. Server controls are the
fundamental building blocks that are specifically designed to work with Web forms in an
ASP.NET application. Server controls can be rendered as markup text on a Web browser
and are capable of executing the program logic on the server. Server controls also provide
built-in methods and events. This eliminates the need for writing the events and methods
manually. In addition, it provides security to the application because the program logic is
executed on the Web server and only the result is sent back to the browser in the HTML
format, thus, hiding the program logic from the user.
Each server control provides an object-oriented programmable interface. Therefore, each
server control is an object with methods, properties, and events associated with it.
Server controls can be viewed as special HTML tags, which are processed by the server.
The advantages of using server controls are:

Automatic state maintenance: ASP.NET server controls provide a property called

EnableViewState, which can be set to true to enable the server controls to maintain
their state after a postback.

Note
Postback is the process by which a browser posts information back to itself. It can also
be defined as the process by which a browser posts information back to the server by
requesting the same page.

NIIT

Browser independent rendering: When an ASP.NET page is requested, the server

generates the corresponding HTML code for all the server controls in the page. The
HTML code generated is specific to the Web browsers used by the clients. This
feature saves programmers from developing different versions of the page for
different Web browsers.
Easily programmable model: Server controls are implemented as objects in
ASP.NET. This makes the server control programming model similar to the
traditional object-oriented programming model, making it easy to program server
controls.

Working with Controls 2.3

Note
In addition to the server controls, ASP.NET provides HTML controls. Most HTML
controls are similar to server controls. However, there is a major difference. Unlike
server controls, HTML controls are processed by the Web browser.

To understand the processing of the server controls in a Web page, you need to
understand the sequence of their processing and how they are rendered on a Web page.

Processing of Server Controls on a Web Page

The processing of a server control depends on two situations, whether the page is
requested for the first time by the client or it is posted back to the Web server when the
user interacts with the Web page.
When a page is requested for the first time, the server controls are processed in the
following sequence:
1. Initializing: The server creates an instance of the server control.
2. Loading: The instance of the control is loaded onto the page object in which it is
defined.
3. PreRendering: The control is updated with the changes made to it by the user. This
phase prepares the control for rendering.
4. Saving: The state information of the control is saved. For example, if a value is set
for the control during the Load event, it is embedded in the HTML tag that will be
returned to the browser.
5. Rendering: The server creates the corresponding HTML tag for the control.
6. Disposing: All cleanup tasks, such as closing files and database connections opened
by the control are performed.
7. Unloading: All cleanup tasks, such as destroying the instances of server controls are
performed. This is the final event in the life cycle of a server control.
When the Web page is posted back to the Web server, the server controls are processed in
the following sequence:
1. Initializing: The server creates an instance of the server control.
2. Loading view state: The view state of the control, posted by the client, is reloaded
into the new instance of the control.
3. Loading control instance: The instance of the control is loaded onto the page object
in which it is defined.
4. Loading the postback data: The server searches any data corresponding to the
control that is loaded in the data posted by the client.
2.4 Working with Controls

NIIT

5.
6.

7.
8.
9.

PreRendering: The control is updated with the changes made in it by the user. This
is done in preparation for rendering.
Saving: The change in the state of the controls between the current request and the
previous request of the page is saved. For each change, the corresponding event is
raised. For example, if the text of a textbox is changed, the new text is saved and a
TextChanged event is raised.
Rendering: The server creates the corresponding HTML tag for the control.
Disposing: All cleanup tasks, such as closing files and database connections opened
by the control are performed.
Unloading: All cleanup tasks like destroying the instances of server control are
performed. This is the final event in the life cycle of a server control.

The following figure illustrates the processing of a server control.

Processing of a Server Control

NIIT

Working with Controls 2.5

Note
In ASP.NET, Web page refers to an instance of the Page class and a Web form refers
to the Web page and all the controls on it.

Types of Server Controls

ASP.NET provides various types of server controls. These controls can be classified into
the following categories:

HTML server controls

Web server controls

Validation controls

HTML Server Controls

In traditional websites, HTML controls were used to enable users to interact with the
website. Developers had to write the methods and events for these controls manually to
provide functionality to them. This was a very tedious task. In addition, these controls
were processed by the Web browser that is on the client-side, which does not provide the
functionality for validating the user input or managing the state.
To overcome these limitations, ASP.NET provides the HTML server controls, which are
processed by the Web server and make full use of the .NET Framework utilities such as
validation. Some of the common HTML server controls are:

HtmlAnchor control

HtmlInputText control

HtmlInputCheckBox control

HtmlInputRadioButton control

HtmlSelect control

2.6 Working with Controls

NIIT

HtmlAnchor Control
The HtmlAnchor control works like the HTML <a> tag but runs on the server. It is used
to direct the user from one page to another. The following table lists some properties of
the HtmlAnchor control.
Property

Description

ID

Gets or sets a unique identifier to the HtmlAnchor control for reference at

the server.

Href

Gets or sets the URL of the page to which the control is linked.

Name

Gets or sets a unique identifier to the HtmlAnchor control for reference at

the client side.

Target

Gets or sets the frame or window in which the page specified in the Href
property will load. The default value is _self. As a result the linked page
will be loaded in the same window.

Title

Gets or sets the value of the tooltip attribute of the <a> tag that is displayed
when the mouse pauses over the control.
Properties of the HtmlAnchor Control

When you click the HtmlAnchor control, the ServerClick event is raised. Consider the
following markup:
<a id="myAnchor1" href="URLLocation" runat="server">Click here</a>
<a id="myAnchor2" OnServerClick="myFunction" runat="server">Click
here</a>

The preceding markup illustrates the HTML code of two HtmlAnchor server controls with
the name myAnchor1 and myAnchor2, as specified by the id attribute. When myAnchor1 is
clicked, the browser navigates to the new location, URLLocation, as specified in the href
attribute. When myAnchor2 is clicked, the function, myFunction, attached to the
ServerClick event is invoked. The OnServerClick attribute is used to attach an event
handler to the ServerClick event.

NIIT

Working with Controls 2.7

HtmlInputText Control
The HtmlInputText control works like the HTML <input type="text"> tag but runs on
the server. The HtmlInputText server control is used to gather information from the user.
The following table lists some properties of the HtmlInputText control.
Property

Description

ID

Gets or sets a unique identifier to the HtmlInputText control for reference

at the server.

Type

Sets Type="Text" or Type ="Password" to specify the mode of work.

Name

Gets or sets a unique identifier to the HtmlInputText control for reference

at the client side.

Size

Gets or sets the width of the control.

MaxLength

Gets or sets the value for the maximum characters that can be entered in
the textbox.

Value

Gets or sets the value of the textbox or password box.

Properties of the HtmlInputText Control

The commonly used method of the HtmlInputText control is OnServerChange. The

OnServerChange method is invoked in response to the ServerChange event. The
ServerChange event is triggered when either a new text message is entered or a change is
made to the existing text in the HtmlInputText control. The following markup illustrates
the HTML code of two HtmlInputText controls:
<input type="text" id="txtName1" maxlength="12" runat="server">
<input type="text" id="txtName2" maxlength="15" runat="server">

The preceding markup illustrates the HTML code of two HtmlInputText server controls
with the names txtName1 and txtName2, as specified by the id attributes. The txtName1
can accommodate a maximum of 12 characters whereas txtName2 can accommodate a
maximum of 15 characters, as specified by the maxlength attribute.
HtmlInputCheckBox Control
The HtmlInputCheckBox control works as the HTML <input type="checkbox"> tag but
runs on the server. The HtmlInputCheckBox control is useful to implement questions that
can have only two answers, such as yes/no or true/false. For example, do you like Coffee?
The answer is either yes or no.

2.8 Working with Controls

NIIT

The following table lists some properties of the HtmlInputCheckBox control.

Property

Description

ID

Gets or sets a unique identifier to the HtmlInputCheckBox control for

reference at the server.

Name

Gets or sets a unique identifier to the HtmlInputCheckBox control for

reference at the client side.

Checked

Checks whether the check box is selected or not.

Value

Gets or sets the value of the HtmlInputCheckBox control.

Properties of the HtmlInputCheckBox Control

When you select or clear a check box, the ServerChange event is raised. The
ServerChange event triggers the associated event handler when the page consisting the
check box is submitted to the server. The following markup illustrates the HTML code for
the HtmlInputCheckBox control:
<input type="checkbox" id="MyCheckBox1"
OnServerChange="FunctionCheckBox" runat="server">

The preceding markup uses an HtmlInputCheckBox control named MyCheckBox1, as

specified by the id attribute. The OnServerChange attribute is used to attach an event
handler to the ServerChange event. When the MyCheckBox1 HtmlInputCheckBox control
is selected or cleared, the FunctionCheckBox method attached to its ServerChange event
is invoked.
HTMLInputRadioButton Control
The HtmlInputRadioButton control works as the HTML <input type="radio"> tag but
runs on the server. You can use the HtmlInputRadioButton control to implement
multiple-choice questions, where a user can select only one option.

NIIT

Working with Controls 2.9

The following table lists some properties of the HtmlInputRadioButton control.

Property

Description

ID

Gets or sets a unique identifier to the HtmlInputRadioButton

control for reference at the server.

Checked

Gets or sets the status of the radio button. This property will
return true if the radio button is selected.

Name

Sets the name of the option button group.

Value

Gets or sets the value of the HtmlInputRadioButton control.

Properties of the HtmlInputRadioButton Control

When the HtmlInputRadioButton control changes its state from the previous state on the
server, the ServerChange event is generated. You can use the following markup to
implement the HtmlInputRadioButton control:
<input type="radio" id="MyRadioButton" name="GroupRadio"
value="Titanic" OnServerChange="FunctionRadio" runat="server">
Titanic

The preceding markup uses an HtmlInputRadioButton control named MyRadioButton, as

specified by the id attribute. The MyRadioButton HtmlInputRadioButton control belongs
to a group GroupRadio as specified by the name attribute. When MyRadioButton is
selected or cleared, the FunctionRadio method attached to its ServerChange event is
invoked. The OnServerChange attribute is used to attach an event handler to the
ServerChange event.
HtmlSelect Control
The HtmlSelect control is same as the HTML <select> element but it runs on the server.
This control is used to create a list box. The HtmlSelect control is used when a user has to
select an option from a list of options. The following table lists some properties of the
HtmlSelect control.
Property

Description

ID

Gets or sets a unique identifier to the HtmlSelect control for

reference at the server.

Name

Gets or sets a unique identifier to the HtmlSelect control for

reference at the client side.

2.10 Working with Controls

NIIT

Property

Description

Items

Gets the list of items.

Multiple

Specifies whether multiple items can be selected.

SelectedIndex

Gets the Index of the selected item.

Size

Sets the number of visible items in the list.

Value

Gets the value of the selected item.

Properties of the HtmlSelect Control

When an item is selected in the HtmlSelect control, the ServerChange event is generated.
The following markup illustrates how to implement the HtmlSelect control:
<select Runat="Server" size=4>
<option>Titanic</option>
<option>The Lords of the Ring</option>
<option>Matrix Reloaded</option>
<option>Harry Potter</option>
</select>

The preceding markup creates a list box containing four movie names as list items. Out of
these movie names only one can be selected at a time.

Web Server Controls

Web server controls are created on the server and require a runat="server" attribute to
work. This attribute indicates that the element should be treated as a server control and
will be processed at the server. However, unlike the HTML server controls, Web server
controls do not necessarily map to any existing HTML elements and may represent more
complex elements. Some of the most commonly used Web server controls are:

TextBox control

Label control

ListBox control

CheckBox and CheckBoxList control

RadioButton and RadioButtonList control

AdRotator control

Calendar control

DropDownList control

ImageButton control

Button control
NIIT

Working with Controls 2.11

Wizard control
MultiView control
HyperLink control
FileUpload control
XML control
Substitution control

TextBox Control
The TextBox control is used to obtain information, such as text, numbers, and dates from
users in a Web form. You can set a TextBox control as single-line, password, or multi-line
TextBox control. By default, a TextBox control is single-line that allows users to type
characters in a single line only. A password TextBox control is similar to the single-line
TextBox control, but masks the characters typed by users and displays them as asterisks
(*). A multi-line TextBox displays multiple lines and allows text wrapping.
The properties of a TextBox control determine the appearance of the TextBox control.
The following table lists some properties of the TextBox control.
Property

Description

Text

Gets and sets the text in a TextBox control.

Height

Gets and sets the height of the control.

Rows

Allows you to set the vertical size of the TextBox control and takes a
value in number of rows. If you set both the Height and Rows
properties, the Height property takes precedence.

Wrap

Allows you to set the word wrap behavior in a multi-line TextBox

control. The text wraps automatically if the value is set to True.
However, if the value is set to False, the user has to press the
carriage return key to move to the next line.
Properties of the TextBox Control

2.12 Working with Controls

NIIT

Label Control
The Label control is used to display static text in a Web form that cannot be edited by the
user. The Text property of the Label control can be set to modify the controls caption.
The following table lists some properties of the Label control.
Property

Description

Text

Gets or sets the text of the Label control.

Visible

Displays or hides the Label control.

Properties of the Label Control

ListBox Control
The ListBox control is a collection of list items. It allows users to select one or more items
from the list. The following table lists some properties of the ListBox control.
Property

Description

Items

Represents the collection of list items in the ListBox control.

Rows

Sets the vertical size of the ListBox control and takes a value in number
of rows. If the control contains more than the specified number of items,
a vertical scrollbar is displayed. If you set both the Height and Rows
properties, the Height property takes precedence.

SelectionMode

Sets the number of items that can be selected. To allow users to select
only one item, you need to set the SelectionMode property to Single.
To allow users to select multiple items, you need to set the
SelectionMode property to Multiple. To select more than one item,
users can hold the CTRL or SHIFT key while selecting the items.
Properties of the ListBox Control

The items can be added to a ListBox control by using:

Static item addition method: In this method, the items are added during the design
phase.

Dynamic item addition method: In this method, the items are added during run
time.

NIIT

Working with Controls 2.13

CheckBox and CheckBoxList Controls

A check box provides you with independent choices or options that you can select. You
can add check boxes to a Web form by using either the CheckBox control or the
CheckBoxList control. The CheckBox control provides you with a single check box
whereas the CheckBoxList control is a collection of several check boxes. The choice
between using the CheckBox control and using the CheckBoxList control depends on the
requirement. The CheckBox control provides more control over the layout of the check
boxes on a page. For instance, you can set the font and color of check boxes individually
or include text between different check boxes. The CheckBoxList control is a better
choice if you need to add a series of check boxes.
The following table lists some properties of the CheckBox and CheckBoxList controls.
Property

Available with

Description

Text

CheckBox control

Gets or sets the text of the CheckBox

control.

TextAlign

CheckBox and
CheckBoxList controls

Sets the alignment of the Text

property of the CheckBox and the
CheckBoxList controls.

Items

CheckBoxList control

Accesses individual check boxes in

the CheckBoxList control.

Properties of the CheckBox and CheckBoxList Controls

Note
Methods for adding items to a CheckBoxList control are similar to the methods used to
add items to the ListBox control.

RadioButton and RadioButtonList Controls

Radio buttons provide a set of choices or options that you can select. You can add radio
buttons to a Web form by using either the RadioButton control or the RadioButtonList
control. The RadioButton control is a single radio button that you can work with whereas
the RadioButtonList control is a collection of radio buttons. Usually, you use radio
buttons in a group. A group of radio buttons provides a set of mutually exclusive options.
You can select only one radio button in a group.

2.14 Working with Controls

NIIT

You can group a set of radio buttons in the following ways:

Place a set of RadioButton controls in a page and assign them manually to a group by
using the GroupName property.

Place a RadioButtonList control in a page. The radio buttons in this control are
grouped by default.
After you add a RadioButtonList control, you need to add individual radio buttons. You
can do so by using the Items property in the same way as you do for the CheckBoxList
control. Similar to the CheckBox and CheckBoxList controls, the RadioButton control
offers more control over the layout of the radio buttons on the page.
The following table lists some properties of the RadioButton and RadioButtonList
controls.
Property

Available with

Description

Text

RadioButton control

Gets or sets the text of the RadioButton control.

TextAlign

RadioButton and
RadioButtonList
controls

Sets the alignment of the Text property of

RadioButton and RadioButtonList controls.

Items

RadioButtonList control

Accesses the individual check boxes in the

RadioButtonList control.

Properties of the RadioButton and RadioButtonList Controls

Note
The methods for adding items to a RadioButtonList control are similar to the methods
for adding items to the ListBox control.

NIIT

Working with Controls 2.15

AdRotator Control
The AdRotator control is used to display flashing banner advertisements on Web pages.
This control is capable of displaying advertisements randomly. AdRotator is one of the
rich Web controls available in ASP.NET. The following table lists some properties of the
AdRotator control.
Property

Description

AdvertisementFile

Sets the path to an XML file that contains a list of banner

advertisements to display. The XML file contains multiple <Ad>
elements, one for each advertisement that you want to display.
Each <Ad> element contains an <ImageUrl> element that
specifies the URL of the image and an <Impressions> element
that specifies weights for each image. These weights define the
relative probability of an image being displayed.

KeywordFilter

Specifies the filter criteria based on which advertisements of

specific categories will be displayed on a Web page.

Target

Specifies the name of the Web browser window that will display
the contents of the linked Web page when the AdRotator control
is clicked. This parameter can also take any of the following
HTML frame-related keywords:
_top: Loads the linked page into the topmost window
_blank: Loads the linked page into a new browser window
_self: Loads the linked page in the same window
_parent: Loads the linked page in the parent window of the

window that contains the link

Properties of the AdRotator Control

2.16 Working with Controls

NIIT

Calendar Control
The Calendar control is used to display a one-month calendar. Users can use this control
to view dates or select a specific day, week, or month. Calendar is one of the rich web
controls available in ASP.NET. The following table lists some properties of the Calendar
control.
Property

Description

DayNameFormat

Specifies the name format of the days of a week.

VisibleDate

Specifies the month to be displayed in the Calendar

control. This property is updated after the
VisibleMonthChanged event is raised.

FirstDayOfWeek

Specifies the day of the week to be displayed in the first

column of the Calendar control.

SelectedDate

Represents the date selected in the Calendar control.

SelectionMode

Specifies whether a user can select a day, a week, or a

month. The default value of this property is Day.
Properties of the Calendar Control

DropDownList Control
The DropDownList control allows users to select an item from a set of predefined items,
where each item is a separate object with its own properties, such as Text, Value, and
Selected. You can add items to a DropDownList control by using the Items property.
Unlike the ListBox control, you can select only one item at a time and the list of items
remains hidden until the user clicks the drop-down button. The following table lists some
properties of the DropDownList control.
Property

Description

Items

Represents the collection of list items in the DropDownList control.

Width

Gets or sets the width of the DropDownList control and takes the
value in pixels.

Height

Gets or sets the vertical size of the DropDownList control and takes
the value in pixels.
Properties of the DropDownList Control

NIIT

Working with Controls 2.17

ImageButton Control
The ImageButton control is similar to a button control but unlike the button control, it can
also display an image. The ImageButton control has a few properties that are identical to
the Image control. It inherits these properties from the Image control. It also has a few
properties that are identical to the Button control. The following table lists some
properties of the ImageButton control.
Property

Description

AlternativeText

Gets or sets the alternative text that is displayed in the Image control
when a Web browser does not support images.

CausesValidation

Specifies whether validation will be performed when the Button

control is clicked. If the value is False, the form submitted by the
button is not validated. The default value of this property is True.

CommandArgument

Passes a value to the Command event along with the associated

command name when the button is clicked.

ImageAlign

Gets or sets the alignment of the image. The possible values for this
property are Top, Left, Right, Middle, Bottom, AbsBottom,
AbsMiddle, Baseline, Middle, NotSet, and TextTop.

ImageURL

Specifies the URL of the image to be displayed.

CommandName

Gets or sets the command name associated with the Button control
that is passed to the Command event.
Properties of the ImageButton Control

Button Control
The Button control is generally used to submit the data that is entered by a user as an
input in a Web application. When the user clicks a button control on a Web page, the page
is posted back to the Web server, and the click event is triggered. ASP.NET provides
three types of button controls; Button, LinkButton, and ImageButton.

2.18 Working with Controls

NIIT

The following table describes how these buttons appear on a Web page.
Control

Description

Button

Rendered as a standard command button that is rendered as an

HTML input element.

LinkButton

Rendered as a hyperlink on a Web page. It contains client-side

script that causes the form to be posted back to the server.

ImageButton

Rendered in the form of a graphic button. It is used for presenting

a rich button appearance.
Types of Button Control

The following table lists some common properties of all the three Button controls.
Property

Description

ID

Gets or sets the unique identifier assigned to the button control.

Text

Gets or sets the text that is displayed on the Button control.

PostBackURL

Gets or sets the URL of the Web page to which the data is posted.

Enabled

Gets or sets a value indicating whether the button control is

enabled.

ToolTip

Gets or sets the text displayed when the mouse pointer hovers over
the button control.
Common Properties of Button Controls

Wizard Control
A wizard is a group of forms used to accomplish a particular task. ASP.NET provides a
Wizard control that is used to enable a user to perform a task step-by-step or to collect
user input related to the task. A Wizard control contains a series of forms that describe the
whole task. It provides an easy mechanism that allows you to build steps, add a new step,
or reorder the steps.
With the help of the Wizard control, a user can move between steps, which create a
simple user experience for performing a task. As a developer, you need not worry about
preserving data across the Web pages as the control maintains the state while a user
performs the various steps of the wizard.
NIIT

Working with Controls 2.19

The following table lists some properties of the Wizard control.

Property

Description

ID

Gets or sets the unique identifier assigned to the Wizard

control.

WizardSteps

Gets a collection of all the WizardStepBase objects that

are defined for the control.

EnableViewState

Gets or sets a value indicating whether the Wizard control

persists its view state, and the view state of any child
controls it contains.

Enabled

Gets or sets a value indicating whether the Wizard control

is enabled.

ToolTip

Gets or sets the text displayed when the mouse pointer

hovers over the Wizard control.
Properties of the Wizard Control

MultiView Control
A Multiview control is a set of View controls. These View controls, in turn, contain child
controls such as buttons and textboxes. A Web application dynamically displays a View
control to a user based on certain criteria such as user identity, preferences, or information
passed in a query string parameter. It is used to present alternate views of information.
The following table lists some properties of the MultiView control.
Property

Description

ID

Gets or sets the unique identifier assigned to the MultiView

control.

Views

Gets the collection of View controls in the MultiView control.

Visible

Gets or sets a value that indicates whether a MultiView control

is rendered as UI on the page.
Properties of the MultiView Control

2.20 Working with Controls

NIIT

HyperLink Control
A HyperLink control is used to link all the Web pages in a Web application. By using a
HyperLink control, a user can easily move between the Web pages. It is rendered as a
clickable text or an image on a Web page. A HyperLink control does not raise an event in
the server code when a user clicks it. Instead, it simply performs navigation. In other
words, it directs the user to another Web page. The following table lists some properties
of the HyperLink control.
Property

Description

Text

Specifies the text displayed as a hyperlink on a Web browser.

ImageUrl

Creates a graphical link when you set the URL property of the
control to a .gif, .jpg, or other Web graphic file.

NavigateUrl

Specifies the URL of the page to which you want to link.

Target

Indicates the ID of a target window or frame in which you want

to display as a linked page.
Properties of the HyperLink Control

FileUpload Control
The FileUpload control enables users to send a file from their computer to the server. It is
useful for allowing users to upload various types of files such as pictures, text files, or
other files. The files that are to be uploaded are submitted to the server as part of the
browser request during postback.
The FileUpload control displays a textbox to type the name of the file that is to be
uploaded on the server. It also displays a Browse button that that can be used to browse
for the file. The following table lists some properties of the FileUpload control.
Property

Description

Filename

Gets the name of the file on the client computer to be uploaded.

HasFile

Gets a value that indicates whether the control contains a file.

Properties of the FileUpload Control

NIIT

Working with Controls 2.21

XML Control
The XML control is used to write the output of an XML document on a Web page. The
XML output appears at the location of the control on the Web page. The following table
lists some properties of the XML control.
Property

Description

Document

Gets or sets the XML document to be displayed.

DocumentContent

Sets a string that contains the XML document to display.

DocumentSource

Gets or sets the path of the XML document whose output is to be

displayed.
Properties of the XML Control

Substitution Control
The Substitution control is used on the Web pages that are configured to be cached. It
allows you to create areas on the page that can be updated dynamically and integrated into
the cached page.
When a page is cached, the entire output of the page is cached. However, there may be
situations wherein you need to cache a page but want to update the selected portions of
the page on each request. For updating the selected portions in a cached page, you can
place the Substitution control in the cached page and insert dynamic content into the
Substitution control. The following table lists some properties of the Substitution control.
Property

Description

MethodName

Gets or sets the name of the method to be invoked when the

Substitution control executes.

Site

Gets information about the container that hosts the current

control when rendered on a design surface.
Properties of the Substitution Control

Validation Controls
Validation is the process of checking something against a certain criterion. There are
various situations where validation is required. One such situation is when a user fills out
a form for which the minimum age required is 18 years. In such a situation, when the user
submits the form, the age must be validated against the criterion. If the criterion is
2.22 Working with Controls

NIIT

satisfied, the form is accepted, otherwise it is rejected. Such type of validation can be
implemented on a website by using the ASP.NET validation controls.
ASP.NET provides the following validation controls that can be attached to input controls
to validate the values that are entered by the user:

RequiredFieldValidator control

RegularExpressionValidator control

CompareValidator control

RangeValidator control

ValidationSummary control

CustomValidator control
RequiredFieldValidator Control
The RequiredFieldValidator control is used to check whether a server control, added to a
Web form, has a value or not. For example, you can use this validation control to check
whether a user has entered any value in the password textbox.
The following table lists some properties of the RequiredFieldValidator control.
Property

Description

ControlToValidate

Specifies the ID of the control to be validated.

ErrorMessage

Specifies the error message to be displayed when the validation

condition fails.

Text

Specifies the error message displayed by the control.

Properties of the RequiredFieldValidator Control

RegularExpressionValidator Control
The RegularExpressionValidator control is used to check whether the server control added
to a Web form matches with a specific regular expression or not. The regular expression
can be the format of a telephone number or an e-mail address.

NIIT

Working with Controls 2.23

The following table lists some properties of the RegularExpressionValidator control.

Property

Description

ControlToValidate

Specifies the ID of the control to be validated.

ErrorMessage

Specifies the error message to be displayed when the

validation condition fails.

ValidationExpression

Specifies the regular expression, when performing validation.

Properties of the RegularExpressionValidator Control

CompareValidator Control
The CompareValidator control is used to compare the entered value with another value.
The other value can be a number or a value entered into another control. The following
table lists some properties of the CompareValidator control.
Property

Description

ControlToCompare

Specifies the ID of the control that will be used to compare

values.

ControlToValidate

Specifies the ID of the control to be validated.

ErrorMessage

Specifies the error message to be displayed when the validation

condition fails.

ValueToCompare

Specifies the ID of the control to be compared.

Properties of the CompareValidator Control

RangeValidator Control
The RangeValidator control is used to check whether the value of a particular Web form
field is within the range specified by the RangeValidator controls MinimumValue and the
MaximumValue properties. The MinimumValue and MaximumValue properties can contain
dates, numbers, currency amounts, or strings.

2.24 Working with Controls

NIIT

The following table lists some properties of the RangeValidator control.

Property

Description

ControlToValidate

Specifies the ID of the control to be validated.

ErrorMessage

Specifies the error message to be displayed when the validation

condition fails.

MaximumValue

Specifies the maximum value.

MinimumValue

Specifies the minimum value.

Properties of the RangeValidator Control

ValidationSummary Control
The ValidationSummary control is used to summarize all errors and display the error list
at a location specified by the user on the Web page. The following table lists some
properties of the ValidationSummary control.
Property

Description

HeadText

Gets or sets the text to be displayed at the top of the summary.

ShowMessageBox

Displays the error message in a pop-up message box when the

value of this property is True.

ShowSummary

Enables or disables the summary of error messages.

Properties of the ValidationSummary Control

NIIT

Working with Controls 2.25

CustomValidator Control
The CustomValidator control is used to perform user-defined validations that cannot be
performed by standard validation controls. The following table lists some properties of the
CustomValidator control.
Property

Description

ControlToValidate

Specifies the ID of the control that is to be validated.

ErrorMessage

Specifies the error message to be displayed when validation

condition fails.
Properties of the CustomValidator Control

Server Control Events

Every server control has some events associated with it. An event is a message
that contains details about the user action, such as the cause of the event and the
control on which the event occurred.
When a user interacts with a server control, its corresponding event is invoked
and the code written on the event is executed. For example, when a user clicks a
button, the Click event of the button control is invoked and the code written on
the event is executed.
Most of the ASP.NET events pass the following two arguments:

Sender Object: This is the first argument and is an instance of System.Object class.
This represents the control that raised the event.

Event object: This is an instance of System.EventArgs class. This contains

information about the event that is generated.

ASP.NET Server Control Event Model

In traditional client-based Web applications, the events are raised and processed on the
client machine. However, in ASP.NET, events associated with the server controls
originate on the client but the processing of the events happens only on the server.
ASP.NET supports two types of events:

Postback events: In postback events, a Web page is sent back to the server for
processing. When a user clicks a button, the click event of the button causes a Web
page to be posted back to the server. When a Web page is posted back to the server,
the server processes the page and sends it back to the user.
2.26 Working with Controls

NIIT

Nonpostback events: In nonpostback events, a Web page does not immediately

cause a postback. For example, change events in HTML server controls and Web
server controls, such as the TextBox control, are captured but do not immediately
cause a post. These events are cached by the control until the next time a post occurs.
When a post occurs, the page is processed on the server and all the pending events
are raised and processed.

Event Handlers
When an event is raised, the corresponding event handler is searched and the code written
in the event handler is executed. If you want your application to perform some action
when an event is raised, you need to add an event handler for that event.
The various approaches that can be used to work with event handlers include:

Using default events

Using non-default events

Using the AutoEventWireup capabilities of a Web form

Creating centralized event-handlers

Using Default Events
Every control exposes an event that is designated as the default event. A default event is
an event that is most commonly associated with a control. For example, the Click event is
the default event of a Button control. Default events are handled by a default event
handler.
Task 2.1: Creating a Default Event Handler

Using Non-Default Events

In addition to the default event, each control exposes other events, called non-default
events. For example, the Command event is a non-default event of a Button control.
Non-default events are handled by non-default event handlers.
Task 2.2: Creating a Non-Default Event Handler

NIIT

Working with Controls 2.27

Using the AutoEventWireup Capabilities of a Web Form

ASP.NET provides the event wire-up capability to a Web form using which events can be
automatically associated with event-handling procedures having well-defined names and
signatures. Event wire-ups determine the procedures that need to be called when objects
raise events. To enable the event wire-up capability of a Web form, you need to set the
AutoEventWireUp attribute of the .aspx page to true. By default, the AutoEventWireUp
attribute of the .aspx pages is set to true, as shown in the following markup:
<%@ Page Language="C#" AutoEventWireup="true"%>

The AutoEventWireup attribute can have two values, true or false. When the value is
set to true, the ASP.NET runtime does not require events to specify event handlers, such
as Page_Load and Page_Init. This means that in Visual C#, you do not have to initialize
and create the delegate structures. However, when the value is set to false, the events
need to specify event handlers explicitly.
Creating Centralized Event-Handlers
There are situations when you want to associate the same event handler with different
controls. Such situations can be handled by using a centralized event handler. A
centralized event handler eliminates the need for declaring separate event handlers for
different ASP.NET objects. You can create one centralized event handler that can perform
appropriate action at runtime.
When you create a single event handler to respond to multiple events that should trigger
different actions, you need to determine which event invoked the event handler. To
determine which control caused the event, you need to perform the following steps:
1. Declare a variable in the event handler with a type that matches the control that
raised the event.
2. Assign the sender argument of the event handler to the variable, casting it to the
appropriate type.
3. Examine the ID property of the variable to determine which object raised the event.
Consider a Web page containing the following markup:
<asp:Button ID="Button1" runat="server" Text="Button1"
onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button2"
onclick="Button1_Click" />

2.28 Working with Controls

NIIT

In the preceding example, the event handler Button1_Click is associated with both the
button controls. You need to write the event handler in such a manner that it will
determine which control has caused the event. The following code snippet illustrates how
to write such an event handler:
protected void Button1_Click(object sender, EventArgs e)
{
Button mybtn = (Button)sender;
switch (mybtn.ID)
{
case "Button1": Response.write("You have clicked Button
1");
break;
case "Button2": Response.write ("You have clicked Button
2");
break;
}
}

The preceding code works well to define a centralized event handler for the Click event
of the Button control. However, if you need to create a centralized event handler for the
Command event of two button controls, the preceding code will not work because the
Command event passes a different set of arguments to its event handler.
Consider a Web page containing the following markup:
<asp:Button ID="Button1" runat="server" Text="Button1"
CommandName=Prev onCommand="Button1_Command" />
<asp:Button ID="Button2" runat="server" Text="Button2"
CommandName=Next onCommand="Button1_Command" />

In the preceding example, the event handler Button1_Command is associated with both the
button controls. You need to write the event handler in such a manner that it will
determine which control has caused the event. The following code snippet illustrates how
to write such an event handler:
protected void Button1_Command(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "Prev": Response.Write("You clicked the Prev
button");
break;
case "Next": Response.Write("You clicked the Next
button");
break;
}
}

NIIT

Working with Controls 2.29

Loading Controls Dynamically

There are situations where you need to add controls dynamically to a Web page. Consider
a situation where you are designing a registration form for an insurance company. The
form has a section where the persons seeking insurance have to enter the name and age of
their family members. The number of family members varies from user to user. Therefore,
you cannot add the textboxes for entering the name and age at the design time. Such a
situation can be handled by adding the controls at run time. Adding controls to a Web
page at run time makes a website flexible, interactive, and user-friendly.
When adding a control dynamically to a Web page, you need to place them in a container
so as to make the Web page well-structured. Two controls that act as containers when
adding controls dynamically are:

PlaceHolder

Panel

PlaceHolder
A PlaceHolder control is used as a container that is not visible in a Web application. It is
added to a Web page to hold other controls on the page. The PlaceHolder control reserves
a place in the structure of the Web page for other controls that are added dynamically. The
following markup adds a PlaceHolder control to a Web page:
<asp:PlaceHolder id="PlaceHolder1" runat="server"/>

The following code snippet shows how to add a Button control and a literal in a
PlaceHolder control:
void Page_Load(object sender, EventArgs e)
{
//creates an instance of a button control.
Button Button1 = new Button();
Button1.Text = "Button 1";
// Adds the button control in a PlaceHolder control.

PlaceHolder1.Controls.Add(Button1);
// creates an instance of a literal control.
Literal Literal1 = new Literal();
Literal1.Text = " Dynamically loaded controls";
// Adds the literal control in a PlaceHolder control.
PlaceHolder1.Controls.Add(Literal1);

2.30 Working with Controls

NIIT

Panel
A Panel control is also used as a container for other controls. The only difference between
a PlaceHolder and a Panel control is that a Panel control renders div tag around all the
child controls in the panel where as a PlaceHolder will only render its child controls. This
makes panels useful when you want to apply a css class to a container. The following
code snippet shows how to add a Label control to a Panel control:
//Creating an instance of a Label control
Label TestLabel = new Label();
TestLabel.Text = "testlabel";
//Adding the Label control to a Panel control
Panel1.Controls.Add(TestLabel);

Adding Event Handlers Dynamically

An event handler for a control is usually created at design time. However, it can also be
created dynamically at run time for the controls that are created dynamically. For
example, to create a Button control dynamically and associate an event handler to it at run
time, you need to write the following code in the .cs file of a Web page:
protected void Page_Load(object sender, EventArgs e)
{
Button btn=new Button();
btn.Text = "Click Me";
form1.Controls.Add(btn);//Adding button to the form
btn.Click += new EventHandler(btn_Click);
}
protected void btn_Click(object sender, EventArgs e)
{
Response.Write("Hello");
}
Activity 2.1: Creating a Web Application by Using ASP.NET

NIIT

Working with Controls 2.31

Implementing Generic Handler

The .aspx files are the default HTTP handler for all ASP.NET pages. However, there may
be situations wherein you want that instead of .aspx files the request is handled by generic
handlers. For example, you have created the ProductDetails page in which you are
displaying the details of a product. This page has a button control, clicking on which a
page having the image of the product is displayed. Instead of using a Web page to display
an image, you can use a generic handler.
A generic handler can be used when you want to display the output of a text file, XML
file, or display an image. This is because a generic handler uses fewer resources as
compared to Web pages. Therefore, it enhances the performance of your Web application.
The generic handler provides a class that implements the IHttpHandler interface. The
class provides the ProcessRequest method and the IsReusable property. The
processRequest method is responsible for processing individual HTTP requests. This
method is used to write the code that produces the output for the handler. The IsReusable
property specifies whether the IHttpHandlerFactory object can put the handler in a pool
and reuse it to increase performance. The IHttpHandlerFactory object is the object that
calls the appropriate handler.
Consider the following example:
<%@ WebHandler Language="C#" Class="SimpleHandler" %>
using System;
using System.Web;
public class SimpleHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
HttpResponse r = context.Response; //Create and initialize an
//HttpResponse object
r.ContentType = "image/png";
//Set the Content type for the
//HttpResponse object
//Write the image
r.WriteFile(@"~\images\4.JPG");
}

public bool IsReusable

{
get {return true;}
}

In the preceding example, the generic handler is used to display an image.

2.32 Working with Controls

NIIT

Task 2.3: Adding a Generic Handler to a Website

Note
You can navigate to a generic handler by using the Respose.redirect() method.
For example, you want that on clicking the Show Picture button on the default.aspx
page, the generic handler MyHandler.ashx is displayed in the browser. For this, you
need to write the following code snippet in the event handler for the Click event of the
button:
Response.Write(MyHandler.ashx);

NIIT

Working with Controls 2.33

Creating Custom Controls

Developers use various Web server controls to enable users to interact with the Web
pages. There might be a situation where you need some functionality that is not provided
by the in-built Web server controls or you might want to reuse the same set of controls,
which you have added to one Web page, on another Web page. For example, you have
created a customized Login page with two labels, two textboxes, and one button to enable
the user to log on to a website. You want to reuse the same Login page in all other Web
applications. In such a case, you can create a custom control with the required
customizations and then reuse it in as many Web applications as you want.
Custom controls are controls that are created by combining two or more controls and can
be reused in multiple Web applications. You can create the following types of custom
controls:

Web user controls

Web custom controls

Templated user controls

Web User Controls

Web user controls are containers that can be created by combining one or more Web
server controls. After creating a Web user control, you can treat it as a unit and define
properties and methods for it. Web user controls are similar to ASP.NET Web pages in
the context that they contain both a user interface page and code.
A Web user control is created in the same way as you create an ASP.NET page. However,
it differs from an ASP.NET Web page in the following ways:

The file name extension of a user control is .ascx.

A user control contains the @Control directive instead of the @Page directive.

User controls cannot run as stand-alone files. They need to be added to ASP.NET
pages to make them work.

User controls do not have <html>, <body>, or <form> elements in them. These
elements must be present on the Web page that is hosting these controls.
A Web user control on a Web page must be registered before it is used. You can register a
Web user control by using the @Register directive as illustrated in the following markup:
<%@Register TagPrefix="ABC" TagName="Header" Src="mycontrol.ascx" %>

2.34 Working with Controls

NIIT

The preceding markup contains the following three attributes:

TagPrefix: Specifies the alias to associate with the namespace of the user control.

TagName: Specifies the alias to associate with the class of the user control.

Src: Specifies the virtual path of the file containing the user control.
After registering the control, you can include it on the page by writing the markup as
shown in the following example:
<ABC:Header ID=mycontrol1 runat="Server"/>

Task 2.4: Creating and Using a Web User Control

Web Custom Controls

There may be situations where you need a new control with properties that are not
provided by any of the existing server controls. In such situations, you cannot use a Web
user control because a Web user control is created by combining one or more server
controls. Such situations can be handled by writing code to create a new control. These
controls are known as Web custom controls.
Web custom controls provide an approach to reuse logic in an ASP.NET application. Web
custom controls are written as classes. Web custom controls are written entirely by using
managed code and have no markup files. These controls are compiled into an assembly
before the deployment of the application.
Web custom controls are of the following three types:

Controls that combine two or more existing controls: This type of control is
known as a composite control and can be created by defining a class that derives
from the System.Web.UI.Control or System.Web.UI.WebControl class and
overrides the CreateChildControls method of the base class. In addition, the class
can expose public properties that will be accessible to the pages that use this control.

Controls that extend the functionality of an existing control: This type of control
is created when an existing control meets most of your requirements but lacks some
features. In such a situation, you can customize the existing control by defining a
class that derives from the class corresponding to the existing control. You can then
add new properties and override existing methods and events of the base class to
modify the functionality of the control.

NIIT

Working with Controls 2.35

Controls that are not similar to any existing control: This type of control is
created when none of the existing controls meets your requirement. In such a case,
you can create a custom control by deriving from the System.Web.UI.Control or
System.Web.UI.WebControl class, adding public properties to this class, and
overriding existing methods of the base class.
Task 2.5: Creating and Using a Composite Control

Task 2.6: Creating and Using a Web Custom Control that Extends
the Functionality of an Existing Control

Task 2.7: Creating and Using a Web Custom Control that is Not
Similar to any Existing Control

Templated User Controls

A templated user control allows developers to modify the layout of its user interface by
defining their own templates. Templated user controls allow the separation of control data
from its presentation. They do not have a user interface; instead they simply implement a
naming container and include a class whose properties and methods are accessible to the
host page. The user interface of the control is defined at the time of designing the Web
page on which the templated control is to be used.
To create a templated user control, you need to perform the following steps:
1. Add an ASP.NET PlaceHolder control in the .ascx file of the user control to specify
the place where you want the template to appear.
2. Implement a property of type ITemplate in the code of the user control.
3. Define a server control class that implements the INamingContainer interface as a
container in which an instance of the template can be created. This class is called the
templates naming container.
4. Apply the TemplateContainer attribute to the property that implements ITemplate
and pass the type of the templates naming container as the argument to the
attributes constructor.

2.36 Working with Controls

NIIT

5.

For each data item, write code in the Page_Init event handler of the user control to:
a. Create an instance of the naming container class.
b. Create an instance of the template in the naming container.
c. Add the naming container instance to the Controls property of the PlaceHolder
server control.

Note
Repeater, DataList, and GridView Web server controls are the examples of built-in
Templated controls. These controls will be discussed in detail later in the course.

Task 2.8: Creating and Using a Templated User Control

NIIT

Working with Controls 2.37

Practice Questions
1.

2.

During which of the following phase, a control is updated with the changes made to
it by the user?
a. PreRendering
b. Loading
c. Rendering
d. Disposing
Which of the following properties gets or sets the value of the tooltip attribute of the
<a> tag?

a.
b.
c.
d.

Name
Target
Title
Href

3.

Which of the following Web server controls is used to display flashing banner
advertisements on Web pages?
a. ImageButton control
b. Check Box control
c. MultiView control
d. AdRotator control

4.

Which of the following validation controls is used to check whether a server control
added to a Web form has a value or not?
a. RequiredFieldValidator
b. RegularExpressionValidator
c. CompareValidator
d. RangeValidator

5.

Which of the following HTML-frame related keyword loads the linked page in a new
browser window?
a. _top
b. _blank
c. _parent
d. _self

2.38 Working with Controls

NIIT

Summary
In this chapter, you learned that:

Server controls are the fundamental building blocks that are specifically designed to
work with Web forms in an ASP.NET application.

Server controls provide:

z
Automatic state maintenance.
z
Browser independent rendering.
z
Easily programmable model.

The sequence in which a server control is processed when the page is requested for
the first time is:
a. Initializing
b. Loading
c. PreRendering
d. Saving
e. Rendering
f. Disposing
g. Unloading

The sequence in which a server control is processed when the Web page is posted
back to the Web browser is:
a. Initializing
b. Loading view state
c. Loading control instance
d. Loading the postback data
e. PreRendering
f. Saving
g. Rendering
h. Disposing
i. Unloading

The various types of server controls provided by ASP.NET can be classified into the
following categories:
z
HTML server controls
z
Web server controls
z
Validation controls
z
User controls

An event is a message that contains details about the user action, such as the cause of
the event and the control on which the event occurred.
NIIT

Working with Controls 2.39

The two arguments passed by all events in ASP.NET are:

z
Sender Object
z
Event object
The two types of events in ASP.NET server control event model are:
z
Postback events
z
Nonpostback events
The two controls that act as container when adding controls dynamically are:
z
PlaceHolder
z
Panel
The two types of custom controls are:
z
Web user controls
z
Web custom controls
z
Template user controls

2.40 Working with Controls

NIIT