Module 2: Using Web Controls

Contents Overview 1 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 Contr

Contents

Overview 1

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

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

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

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

Overview

! 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

In this module, you will learn

how to use Web controls in

your applications

What Are Web Controls?

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

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

$ 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

What Are Intrinsic Controls?

<asp:RadioButton BackColor="red" Text=" " />

<asp:CheckBox BackColor="red" Text=" " />

<asp:RadioButton BackColor="red" Text=" " />

<asp:CheckBox BackColor="red" Text=" " />

<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

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"

! 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

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>

Using Intrinsic Controls on a Form

<script language ="vb" runat="server">

Sub btnSubmit_Click(s As Object, e as EventArgs)lblOutput.Text = "Hi" & " " & txtName.TextEnd Sub

</script>

<script language ="vb" runat="server">

Sub btnSubmit_Click(s As Object, e as EventArgs)lblOutput.Text = "Hi" & " " & txtName.TextEnd 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"

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

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

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

List of Intrinsic Controls

! List of intrinsic controls

<asp:textbox> <asp:button> <asp:checkbox>

<asp:hyperlink> <asp:linkbutton> <asp:imagebutton>

<asp:image> <asp:label> <asp:radiobutton>

Examples of Intrinsic Controls

The following table lists some of the intrinsic Web controls and their corresponding HTML controls

<asp:textbox>, <input type=text>

<asp:button> <input type=submit>

<asp:imagebutton> <input type=image>

<asp:checkbox> <input type=checkbox>

<asp:radiobutton> <input type=radiobutton>

<asp:listbox> <select size="5"> </select>

<asp:dropdownlist> <select> </select>

<asp:hyperlink> <a href="…"> </a>

<asp:image> <img src="…">

<asp:label> <span> </span>

<asp:panel> <div> </div>

<asp:table> <table> </table>

Adding Intrinsic Controls

The DropDownList control is used to allow a single selection from a number

of choices displayed as a drop-down list:

You can add a list box to a form using following code:

<asp:dropdownlist id="favColor" runat="server">

ASP.NET intrinsic controls

include traditional form

controls such as buttons

and text boxes as well as

complex controls such as

tables

Drop-down List box

You can add a label control to a form as follows:

<asp:Label runat="server" Text="Label1" Italic="true"></asp:Label>

Font-The CheckBox control is used to generate a check box that can be toggled

between selected and cleared states:

<asp:CheckBox runat="server" Text="CheckBox1"

Demonstration: Adding Intrinsic Controls to a Page

In this demonstration, you will learn how to add intrinsic Web controls to an ASP.NET page You will see the HTML generated by this page for Microsoft Internet Explorer and understand what happens when you put intrinsic controls

on a form Then you will learn how to add event procedures for the controls

Topic Objective

To introduce the

demonstration

Lead-in

In this demonstration, you

will see how to add a Web

control to an ASP.NET

page

Delivery Tip

1 Open the page

intrinsic.aspx from the

\2063\DemoCode\Mod02

folder

2 Point out the three

intrinsic controls, text box,

list box, and button, and the

two SPANs

3 Run the page and display

the HTML generated on the

browser Notice that the

view state is not saved; view

state is a property of the

form Also, nothing happens

when you click the button or

select an item in the list

These are also aspects of

controls on a form

4 Add a form

(runat="server") to the

page to hold the controls

5 Run the page and show

that the view state is now

preserved Also show the

additional tags and

attributes added to the

control tags

6 Now add event

procedures to the button

(onclick) and list box

(onSelectedIndexChanged)

to call the procedures in the

SCRIPT section

7 Run the page The button

procedure runs when you

click the button, but the list

box event procedure

doesn’t

8 Set AutoPostBack on the

listbox to true and run again

The completed

demonstration is in

demo1.aspx