Module 2: Using Web Controls

Contents
Overview 1
What Are Web Controls? 2
Using Intrinsic Controls 4
Using Input Validation Controls 18
Selecting Controls for Applications 28
Lab 2: Creating a Form that Performs
Validation 29
Review 30

Module 2: Using Web
Controls
BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY


Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any

written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, BackOffice, MS-DOS, Windows, Windows NT, <plus other appropriate product
names or titles. The publications specialist replaces this example list with the list of trademarks
provided by the copy editor. Microsoft is listed first, followed by all other Microsoft trademarks
in alphabetical order. > are either registered trademarks or trademarks of Microsoft Corporation
in the U.S.A. and/or other countries.

<The publications specialist inserts mention of specific, contractually obligated to, third-party
trademarks, provided by the copy editor>

Other product and company names mentioned herein may be the trademarks of their respective
owners.


Module 2: Using Web Controls iii

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

Instructor Notes
This module provides students with an overview of Web controls. Students will
learn how to use different types of Web controls in their applications.
In the lab, students will add intrinsic Web controls, validation controls, and the
calendar control to a page. They will also perform the steps to test whether a
page is valid.
After completing this module, students will be able to:
!

Add Web controls to an ASP.NET page.
!
Use properties, methods, and events of Web controls.
!
Validate user input on an ASP.NET page using input validation controls.
!
Bind two controls together.

Materials and Preparation
This section provides the materials and preparation tasks that you need to teach
this module.
Required Materials
To teach this module, you need the following materials:
!
Microsoft
®
PowerPoint
®
file 2063A_02.ppt
!
Module 2, “ Using Web Controls” (2063A_02.doc)
!
Lab, “Using Web Controls” (2063A_L02.doc)

Preparation Tasks
To prepare for this module, you should:
!
Read all of the materials for this module.
!
Complete all the demonstrations.

!
Complete the lab.


Presentation:
120 Minutes

Lab:
60 Minutes
iv Module 2: Using Web Controls

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

Module Strategy
Use the following strategy to present this module:
!
What Are Web Controls?
Web controls are just a category of server controls. Everything students
learned in module 1 about server controls applies to Web controls too. This
section provides students with an overview of Web controls. When talking
about the rich controls say something about the rich controls, because rich
controls are not covered elsewhere in the course. Point them to .NET SDK
for more information about these controls.
Students will be using the Calendar control in the lab, but you won't be
covering it in the module. The lab directions cover what attributes to set,
and so on.
!
Using Intrinsic Controls
In this section, students learn about intrinsic controls and how they are used.
When talking about intrinsic controls, talk about how they compare to

HTML controls and the differences between using these controls and
standard HTML controls. The section also talks about handling events for
these controls. Handling events in ASP.NET is very different than handling
events in ASP and you may have to spend more time on it.
All of the controls are not covered in this section. Point students to the .NET
Framework SDK documentation for more information on the controls that
aren't covered.
!
Using Input Validation Controls
At the start of the section, bring out the need for using validation controls.
Remind students of how much code they had to write in order to validate
user input. When talking about the different input validation controls, tell
them the function of each (given in the student notes). When teaching how
to use the validation controls, you could start by showing them an example
of code needed to validate the range of the given input by using ASP. Then
show them how they could easily do it by using the RangeValidator control.
At the end of the section, ask students to summarize the advantages of using
validation controls.
All of the controls are not covered in this section. Point students to the .NET
Framework SDK documentation for more information on the controls that
aren't covered.
Students will be using the RegularExpressionValidator control in the lab,
but the directions explain how to set the attributes.
!
Selecting Controls for Applications
Provide students with examples of when they would use a particular type of
server control.

Module 2: Using Web Controls 1

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

Overview
!
What Are Web Controls?
!
Using Intrinsic Controls
!
Using Input Validation Controls
!
Selecting Controls for Applications


Web controls are designed to provide a simple way to add functionality, such as
displaying data or selecting dates, to a Web page. Web controls include
traditional form controls such as buttons and text boxes as well as complex
controls such as tables and calendar control.
After completing this module, you will be able to:
!
Add Web controls to an ASP.NET page.
!
Use properties, methods, and events of Web controls.
!
Validate user input on an ASP.NET page using input validation controls.
!
Bind two controls together.

Topic Objective
To provide an overview of
the module topics and

objectives.
Lead-in
In this module, you will learn
how to use Web controls in
your applications.
2 Module 2: Using Web Controls

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

What Are Web Controls?
!
HTML Controls
!
Web Controls
#
Intrinsic controls
#
Input Validation controls
#
Rich controls
#
List-bound controls
<asp:Button runat="server" />
<asp:Button runat="server" />


ASP.NET uses server controls extensively to simplify the task of programming
Web pages. You can change many HTML elements into server controls by
adding the runat=server attribute to the element tag. However, ASP.NET
includes new controls, called Web controls that have built-in functionality and

are the preferred controls to use in an ASP.NET page.
Web controls include traditional form controls such as buttons and text boxes as
well as complex controls such as tables. They also include controls that provide
commonly used form functionality such as displaying data in a grid, choosing
dates, and so on.

There are four sets of Web controls:
!
Intrinsic controls map to simple HTML elements.
!
Validation controls provide a variety of data validation.
!
Rich controls provide rich user interface and functionality. Currently
ASP.NET ships with two rich controls, the Calendar and the AdRotator
controls.
!
List-bound controls provide data flow across a page.
The DataGrid, DataList, and Repeater controls constitute an interrelated
set of Web controls. These controls render HTML to display the contents of
a list or data source to which they are bound. Hence, they are collectively
referred to as “list-bound controls.”

You will learn how to display data from databases using list-bound
controls in Module 3 “Using ADO.NET to Access Data.”


Topic Objective
To remind students of the
difference between Web
controls and HTML controls

and list the categories of
Web controls available.
Lead-in
In the previous chapter, you
worked with HTML controls.
Let’s now look at how to use
Web controls.
Note
Module 2: Using Web Controls 3

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

Web controls exist within the System.Web.UI.WebControls namespace. You
create them using the asp: namespace. You do not have to import this
namespace into your ASPX page in order to use these controls. For example,
the following sample code creates a button Web control:
<asp:Button runat="server" />


All controls must be well formed and must not overlap. Unless otherwise
noted, elements must be closed, either with an ending slash within the tag, or
with a closing tag. For example, <asp:Button runat=server /> or < asp:Button
runat=server > </asp:Button>.

For more information about the Web controls available with ASP.NET, go to
the Web Controls section in the ASP.NET SDK documentation.
Note
4 Module 2: Using Web Controls

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

$ Using Intrinsic Controls
!
What Are Intrinsic Controls?
!
Using Intrinsic Controls on a Form
!
List of Intrinsic Controls
!
Demonstration: Adding Intrinsic Controls to a Page
!
Handling Intrinsic Control Events
!
Linking Two Controls Together
!
Demonstration: Linking Two Controls Together


Intrinsic controls are designed to be replacements for the standard set of HTML
controls.
This section describes intrinsic controls and explains how to use them in an
ASP.NET page.
Topic Objective
To introduce the topics
included in this section.
Lead-in
Web controls include
intrinsic, validation, rich, and
list-bound controls. In this

section, you will learn more
about intrinsic controls.
Module 2: Using Web Controls 5

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

What Are Intrinsic Controls?
<asp:CheckBox Checked="True" ... />
<asp:CheckBox Checked="True" ... />
!
Provide standard naming convention, with
standard properties for controls
!
Include properties specific to the control
!
Create browser-specific HTML
<asp:RadioButton BackColor="red" Text=" "... />
<asp:CheckBox BackColor="red" Text=" "... />
<asp:RadioButton BackColor="red" Text=" "... />
<asp:CheckBox BackColor="red" Text=" "... />
<span>
<input type="checkbox" id="ctrl1"
checked="true" name="ctrl1">
<label for="ctrl1">Standard</label>
</span>
<span>
<input type="checkbox" id="ctrl1"
checked="true" name="ctrl1">
<label for="ctrl1">Standard</label>
</span>

Intrinsic controls are used as an alternative to HTML controls. You use Web
controls the same way you use HTML controls. The most important difference
is the prefix tag asp: that is added before every Web control. For example, you
can add a Label control to a form using the following line of code:
<asp:Label runat="server" Text="Label1"></asp:Label>

Intrinsic Web controls provide the following benefits:
!
Provide a standard naming convention for similar controls
!
Provide common properties for all controls
!
Include strongly typed properties specific to the control
!
Create browser-specific HTML

Standard Naming Convention
One of the problems with HTML controls has been the lack of consistent
naming convention for similar controls. Intrinsic controls eliminate this
problem, as shown in the following examples.
The following lines of code declare a radio button, a check box, and a button.
<input type ="radio">
<input type ="checkbox">
<input type ="submit">

All of these controls are input controls; however, they all behave in a different
manner.

Topic Objective
To describe intrinsic
controls.
Lead-in
One of the biggest problems
with using HTML controls
has been the lack of a
consistent naming
convention. Intrinsic controls
are designed to replace
HTML controls
.

Example 1
6 Module 2: Using Web Controls

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

Intrinsic controls provide an alternative way of declaring different controls. The
following lines of code use intrinsic Web controls to declare a radio button, a
check box, and a button:
<asp:RadioButton>
<asp:CheckBox>
<asp:Button>

Include common properties for controls
In ASP.NET, common properties for intrinsic controls have the same name. For
example, when you want to set the background color for a control you always
use the same attribute irrespective of the control. For example, all controls have
a Text property that sets the text corresponding to the control. Controls also

have BackColor and ForeColor properties. Setting the BackColor="red"
property sets the background color to red for any control.
<asp:TextBox id="txtName" Text="Jane" BackColor="red"
runat="server" />

<asp:Button id="btnSubmit" Text="Submit" BackColor="cyan"
runat="server" />

Control-Specific Properties
Intrinsic Web controls also have a set of properties that relate specifically to the
control.
For example, a check box has a Checked property that indicates whether the
check box is checked or not.
The following sample code creates a check box labeled Standard that is
initially checked.
<asp:CheckBox Checked="True" Text="Standard" runat="server" />

Some properties of Web controls are available only at run time. For example,
the list box and drop-down list boxes have the following properties that make it
easy to read their selected value:
!
SelectedItem is the value of the item selected in the list box.
!
SelectedItems is the collection of values of the items selected in a
multiselection list box.

Create Browser-Specific HTML
Although Web controls are easily added to a page, they are powerful controls.
When a page is rendered for a browser, the Web controls determine which
browser is requesting the page and then deliver the appropriate HTML.

For example, if the requesting browser supports client-side scripting, such as
Internet Explorer 4.0 or greater, then the controls create client-side script to
implement their functionality. But if the requesting browser does not support
client-side script, then the controls would create server-side code and require
more round trips to the server to obtain the same functionality.
Check Box
List Box
Module 2: Using Web Controls 7

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

For example, the HTML generated for the above check box in Internet Explorer
5.5 is:
<span>
<input type="checkbox" id="ctrl1" checked="true" name="ctrl1">
<label for="ctrl1">Standard</label>
</span>

8 Module 2: Using Web Controls

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

Using Intrinsic Controls on a Form
<script language ="vb" runat="server">
Sub btnSubmit_Click(s As Object, e as EventArgs)
lblOutput.Text = "Hi" & " " & txtName.Text
End Sub
</script>
<script language ="vb" runat="server">
Sub btnSubmit_Click(s As Object, e as EventArgs)

lblOutput.Text = "Hi" & " " & txtName.Text
End Sub
</script>
<form runat="server">
<asp:textbox id="txtName" runat="server" />
<asp:button id="btnSubmit" Text="Submit"
OnServerClick="btnSubmit_Click" runat="Server" />
<p><asp:label id="lblOutput" runat="Server" />
</form>
<form runat="server">
<asp:textbox id="txtName" runat="server" />
<asp:button id="btnSubmit" Text="Submit"
OnServerClick="btnSubmit_Click" runat="Server" />
<p><asp:label id="lblOutput" runat="Server" />
</form>


Like a traditional form that you create in ASP using HTML controls, ASP.NET
allows you to create a form using intrinsic controls. You can use intrinsic
controls such as text boxes, labels, and buttons to build a simple Web form.
The following code shows you an example of a form that uses a text box, label,
and a submit button. The OnServerClick event of the button is bound to the
btnSubmit_Click method, which displays the text in the label.
<script language ="vb" runat="server">
Sub btnSubmit_Click(s As Object, e as EventArgs)
lblOutput.Text = "Hi" & " " & txtName.Text
End Sub
</script>

<form runat="server">

<asp:textbox id="txtName" runat="server" />
<asp:button id="btnSubmit" Text="Submit"
OnClick="btnSubmit_Click" runat="Server" />
<p><asp:label id="lblOutput" runat="Server" />
</form>

Topic Objective
Describe how to use
intrinsic controls on a form.
Lead-in
You can use intrinsic
controls such as text boxes,
labels, and buttons to build
a simple Web form.
Module 2: Using Web Controls 9

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY


Although you create Web forms from separate components, they form a unit.
When the Web form is compiled, ASP.NET parses the page and its code,
generates a new class dynamically, and then compiles the new class. The
dynamically generated class is derived from the ASP.NET Page class, but is
extended with controls, your code, and the static HTML text in the .aspx file.
This is different from ASP. In ASP, the page consists of static HTML
interspersed with executable code. The ASP processor reads the page, extracts
and runs the code, and then inserts the results back into the static HTML before
sending the results to the browser.
In the previous versions of ASP, controls on forms could only invoke client-
side functions. This has been changed in ASP.NET by the introduction of server

controls and server-side events. In the example above, the server side function
btnSubmit_Click runs when a user clicks the submit button which is a server
control.
Unlike controls in ASP forms, all intrinsic controls in an ASP.NET form are
objects. Therefore, all the controls on a form have properties, methods, and
events. It is the click events of the controls that cause the form to be posted to
the server. You will learn more about intrinsic control events in a later topic.