ASP.NET 3.5 and ASP.NET AJAX

childlikenumberSecurity

Nov 5, 2013 (3 years and 7 months ago)

228 views



2009 Pearson Education, Inc. All rights reserved.

1

22

ASP.NET 3.5 and

ASP.NET AJAX



2009 Pearson Education, Inc. All rights reserved.

2

OBJECTIVES

In this chapter you will learn:


Web
-
application development using ASP.NET.


To create Web Forms.


To create ASP.NET applications consisting of
multiple Web Forms.


To maintain state information about a user with
session tracking and cookies.



2009 Pearson Education, Inc. All rights reserved.

3

OBJECTIVES


To use the
Web

Site

Administration

Tool

to
modify web application configuration settings.


To control user access to web applications using
forms authentication and ASP.NET login controls.


To use databases in ASP.NET applications.


To design a master page and content pages to
create a uniform look
-
and
-
feel for a website.


To use ASP.NET AJAX to improve the user
interactivity of your web applications.



2009 Pearson Education, Inc. All rights reserved.

4

22.1



Introduction

22.2



Simple HTTP Transactions

22.3



Multitier Application Architecture

22.4



Creating and Running a Simple Web
-
Form Example

22.5



Web Controls

22.6



Session Tracking

22.7



Case Study: Connecting to a Database in ASP.NET

22.8



Case Study: Secure Books Database Application

22.9



ASP.NET AJAX

22.10

New ASP.NET 3.5 Data Controls




2009 Pearson Education, Inc. All rights reserved.

5

22.1

Introduction


Web
-
based applications create web content for clients.


This web content includes Extensible HyperText
Markup Language (XHTML), client
-
side scripting,
images and binary data.


Web Form files have the file
-
name extension
.
aspx

and contain the web page

s GUI.


Microsoft Visual Web Developer 2008 Express
Edition is the IDE used for developing ASP.NET 3.5
web applications.



2009 Pearson Education, Inc. All rights reserved.

6

22.2

Simple HTTP Transactions


HTTP protocol allows clients and servers to interact

in a uniform and reliable manner.


HTTP uses URIs (Uniform Resource Identifiers)

to identify data on the Internet.


URIs that specify document locations are called URLs

(Uniform Resource Locators).



2009 Pearson Education, Inc. All rights reserved.

7

22.2

Simple HTTP Transactions (Cont.)


Consider the following URL:


http://
www.deitel.com/books/downloads.html


http:// indicates that the resource is obtained using HTTP.


www.deitel.com

is the
hostname

the name of the
server.


The hostname is translated into an
IP address

by a
domain name system (DNS) server
.


For security reasons, the remainder of the URL normally
specifies the location in a
virtual directory
.



2009 Pearson Education, Inc. All rights reserved.

8

22.2

Simple HTTP Transactions (Cont.)


In Fig.

22.1, the web browser sends an HTTP request to the server:


GET /books/downloads.html HTTP/1.1


The word
GET

is an
HTTP method

indicating that the client wishes
to obtain a resource from the server.

Fig. 22.1

|

Client interacting with web server.
Step 1:

The GET request.




2009 Pearson Education, Inc. All rights reserved.

9

22.2

Simple HTTP Transactions (Cont.)


The server responds by sending a line of text with the HTTP

version, followed by a code describing the status (Fig.

22.2).



HTTP/1.1 200 OK



HTTP/1.1 404 Not found

Fig. 22.2

|

Client interacting with web server.
Step 2:

The HTTP response.



2009 Pearson Education, Inc. All rights reserved.

10

22.2

Simple HTTP Transactions (Cont.)


The server then sends one or more
HTTP headers
:

Content
-
type: text/html


This specifies the

Multipurpose Internet Mail
Extensions

(MIME)

type of the content.


The headers are followed by a blank line, which
indicates to the client browser that the server is
finished sending HTTP headers.


The server then sends the contents of the requested
XHTML document.



2009 Pearson Education, Inc. All rights reserved.

11

22.2

Simple HTTP Transactions (Cont.)


A
GET

request retrieves information from a server.


A
GET

request can specify parameters in the URL.


A ? separates the
query string

from the rest of the
URL in a request.


A
name
/
value

pair is passed to the server with the
name

and the
value

separated by an equals sign (
=
).


If multiple
name
/
value

pairs are submitted, pairs are
separated by an ampersand (
&
).


The server then sends a
response

to the client.



2009 Pearson Education, Inc. All rights reserved.

12

22.2

Simple HTTP Transactions (Cont.)


A
POST

request sends data to a server.


A
POST

request sends form data as part of the HTTP message,
not as part of the URL.


Unlike
GET
,
POST

requests are not typically limited in length.


The
POST

method is also sometimes preferred because it hides
the data from the user.


An HTTP request often posts data to a
server
-
side form
handler

that processes the data.

Software Engineering Observation 22.1

The data sent in a
POST

request is not part of the URL, and

the user can’t see the data by default. However, there are tools
available that expose this data, so you should not assume that

the data is secure just because a
POST

request is used.




2009 Pearson Education, Inc. All rights reserved.

13

22.2

Simple HTTP Transactions (Cont.)


Browsers often
cache

(save on disk) web pages for
quick reloading.


An HTTP response can indicate the length of time for
which the content remains “fresh.”


This allows the browser to minimize the amount of
data that must be downloaded to view a web page.



2009 Pearson Education, Inc. All rights reserved.

14

22.3

Multitier Application Architecture


Multitier applications are divided into logical
groupings of functionality.


The
information tier

maintains data pertaining to

the application.


This tier typically stores data in databases.


The
middle tier

controls interactions between clients
and the data.


The
client tier

is the application’s user interface.



2009 Pearson Education, Inc. All rights reserved.

15

22.3

Multitier Application Architecture
(Cont.)


Figure

22.3 presents the structure of a web
-
based
application.

Fig. 22.3

|

Three
-
tier architecture.



2009 Pearson Education,
Inc. All rights reserved.

16


1

<%
--
Fig.

22.4: WebTime.aspx
--
%>


2

<%
--
A page that displays the current time in a Label.
--
%>


3

<%
@ Page

Language=
"C#"

AutoEventWireup=
"true"

CodeFile=
"WebTime.aspx.cs"



4


Inherits=
"WebTime"

EnableSessionState=
"False"

%>



5



6

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.0 Transitional//EN"


7


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd"
>


8



9

<html xmlns=
"http://www.w3.org/1999/xhtml"
>

10

<head runat=
"server"
>

11


<title>
A Simple Web Form Exam
ple
</title>

12

</head>

13

<body>

14


<form id=
"form1"

runat=
"server"
>

15


<div>

16


<h2>
Current time on the web server:
</h2>


Outline

WebTime.aspx

( 1 of 2 )


Visual Web Developer generates the markup shown in
Fig.

22.4 when you create the GUI.

ASP.NET

comments

begin with
<
%
--

and
terminate with
--
%
>
, and
can span multiple lines.

The
Page

directive
specifies information
needed by ASP.NET to
process this file.

Fig. 22.4

|

ASPX file that displays the web server’s time. (Part 2 of 2. )

The document type declaration,
which specifies the document
element name and the
PUBLIC

URI for the DTD that defines the
XHTML vocabulary.

XHTML documents have
the root element
html

and markup information
about the document in the
head

element.

The body contains the
main content that the
browser displays.

The
form

that contains our XHTML text
and controls is set to execute on the server,
which generates equivalent XHTML.



2009 Pearson Education,
Inc. All rights reserved.

17

17


<p>

18


<asp:Label ID=
"timeLabel"

runat=
"server"

BackColor=
"Black"

19


Font
-
Size=
"XX
-
Large"

ForeColor=
"Yellow"


20


EnableViewState=
"False"
></asp:Label>


21


</p>

22



</div>

23


</form>

24

</body>

25

</html>


Outline

WebTime.aspx

( 2 of 2 )

Fig. 22.4

|

ASPX file that displays the web server’s time. (Part 2 of 2. )

Markup for a label web
control.

The
asp
:

tag prefix

indicates that the label is an
ASP.NET web control, not
an XHTML element.


In an ASPX file a
directive

is delimited by
<%@

and
%>
.



2009 Pearson Education, Inc. All rights reserved.

18

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

22.4.1

Examining an ASPX File


The
Page

directive’s
Language

attribute specifies the

code
-
behind file’s language.


The
CodeFile

attribute specifies the code
-
behind filename.


When
AutoEventWireup

is
true
, ASP.NET automatically
treats a method of name
Page_
eventName

as an event handler.


When
AutoEvent
Wireup

is set to
false
, you specify
event handlers using attributes in the
Page

directive just as
you would any other web control.


The
Inherits

attribute (line 4) specifies the class in the
code
-
behind file from which this ASP.NET class inherits.



2009 Pearson Education, Inc. All rights reserved.

19

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


The document type declaration, which specifies the document
element name and the
PUBLIC

URI for the DTD that defines
the XHTML vocabulary.


XHTML documents have the root element
html

and markup
information about the document in the
head

element.


Setting the
runat

attribute to
"
server
"

indicates that
ASP.NET processes the element and its nested elements and
generates the corresponding XHTML.


The body contains the main content that the browser displays.


The
form

that contains our XHTML text and controls is set to
execute on the server, which generates equivalent XHTML.



2009 Pearson Education, Inc. All rights reserved.

20

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


The
ID

attribute assigns a name to a control, used as an
identifier in the code
-
behind file.


The
asp
:

tag prefix

indicates that the label is an
ASP.NET web control, not an XHTML element.


Each web control maps to a corresponding XHTML
element or group of elements.

Portability Tip 22.1

The same web control can map to different XHTML
elements, depending on the client browser and the web
control’s property settings.



2009 Pearson Education, Inc. All rights reserved.

21

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


The
asp:Label

control is written as an XHTML
span

element.


A
span

element contains text with formatting styles.


This control is processed on the server so that the
server can translate the control into XHTML.


If this is not supported, the
asp:Label

element is
written as text to the client.



2009 Pearson Education,
Inc. All rights reserved.

22


1

// Fig.

22.5: WebTime.aspx.cs


2

// Code
-
behind file for a page that displays the current time.


3

using
System;


4



5

public partial class
WebTime : System.Web.UI.Page


6

{


7


// initializes the contents of the page


8


protected

void
Page
_Init(
object
sender,
EventArgs
e )


9

{

10

// display the server's current time in timeLabel

11

timeLabel.Text =
DateTime.Now
.ToString(
"hh:mm:ss"
);

12

}
// end method Page_Init

13

}
// end class WebTime


Outline

WebTime.aspx.cs

(1 of 2 )


Figure

22.5 presents the code
-
behind file.

Fig. 22.5

|

Code
-
behind file for a page that displays

the web server’s time. (Part 1 of 2.)

The
Page_Init

method
handles the page’s
Init

event, which indicates that
the page is ready to be
initialized.

Retrieve the current time
and formats it as
hh:mm:ss
.



2009 Pearson Education,
Inc. All rights reserved.

23

Outline

WebTime.aspx.cs

(2 of 2 )

Fig. 22.5

|

Code
-
behind file for a page that displays

the web server’s time. (Part 2 of 2.)


The
Page_Init

method handles the page’s
Init

event,
which indicates that the page is ready to be initialized.



2009 Pearson Education, Inc. All rights reserved.

24

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

22.4.3

Relationship Between an ASPX File and a

Code Behind File


The code
-
behind file inherits from
Page
, which defines the
general functionality of a web page.


The code
-
behind file contains a partial class.


ASP.NET generates another partial class that defines the
remainder of that class, based on the markup in the ASPX file.


The first time the web page is requested, this class is compiled,
and an instance is created.


This instance represents our page

it creates the XHTML that
is sent to the client.


Once an instance of the web page has been created, multiple
clients can use it to access the page

no recompilation is
necessary.



2009 Pearson Education, Inc. All rights reserved.

25

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

22.4.4

How the Code in an ASP.NET Web Page
Executes



When an instance of the page is created, the
PreInit


event occurs first, invoking method
Page_PreInit
,

which can be used to set a page’s theme.


The
Init

event occurs next, invoking method

Page_Init
, which is used to initialize objects and other

aspects of the page.



Next, the
Load

event occurs, and the
Page_Load

event

handler executes.




2009 Pearson Education, Inc. All rights reserved.

26

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


The
Init

event is raised only once (when the page is first
requested).


The
Load

event is raised with every request.


The page then processes any events that are generated by
the page’s controls.


Once a response has been generated and sent, an
Unload

event occurs, which calls
Page_Unload
, which typically
releases resources used by the page.



2009 Pearson Education,
Inc. All rights reserved.

27


1

<!
--
Fig.

22.6: WebTime.html
--
>


2

<!
--
The XHTML generated when WebTime.aspx is loaded.
--
>


3

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.1//EN"



4


"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>


5



6

<html xmlns=
"http://www.w3.org/1999/xht
ml"
>


7

<head>


8


<title>
A Simple Web Form Example
</title>


9

</head>

10

<body>

11


<form method=
"post"

action=
"WebTime.aspx"

id=
"form1"
>

12


<div>

13


<input type=
"hidden"

name=
"__VIEWSTATE"

id=
"__VIEWSTATE"

value=

14



"/wEPDwUJODExMDE5NzY5ZGQ4n4mht8D7Eqxn73tM5LDnstPlCg=="
/>


15


</div>


Outline

WebTime.html

( 1 of 2 )


Figure

22.6 shows the XHTML generated by ASP.NET
when a web browser requests
WebTime.aspx

(Fig.

22.4).

Fig. 22.6

|

XHTML response when the browser requests
WebTime.aspx
.
(Part 1 of 2. )

Nonvisual form
components, called
hidden inputs
, store data
that the user doesn’t need
to see.

Attribute
method

of the
form

element specifies
the request method
(usually
get

or
post
).
The
action

attribute
identifies the resource
that will be requested
when a form is
submitted.



2009 Pearson Education,
Inc. All rights reserved.

28

16


17


<div>

18


<h2>
Current time on the web server:
</h2>

19


<p>

20


<span id=
"timeLabel"
style=
"color:Yellow;


21


background
-
color:Black;font
-
size:XX
-
Large;"
>

22


03:11:49



23


</span>


24


</p>

25


</div>

26


</form>

27

</body>

28

</html>


Outline

WebTime.html

( 2 of 2 )

Fig. 22.6

|

XHTML response when the browser requests
WebTime.aspx
.
(Part 2 of 2. )

The
form

contains a
span

element to represent the text
in the label. Formatting
properties of
timeLabel

are converted into the
style

attribute of the
span

element.



2009 Pearson Education, Inc. All rights reserved.

29

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


To view this XHTML, select
View

Source

from the
Page

menu ( ) in Internet Explorer (or
View >
Page

Source

if you are using Firefox).


Nonvisual form components, called
hidden inputs
, store
data that the user doesn’t need to see.


Attribute
method

of the
form

element specifies the
request method (usually
get

or
post
). The
action

attribute identifies the resource that will be requested
when a form is submitted.



2009 Pearson Education, Inc. All rights reserved.

30

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


When the
form

is processed on the server, the
runat

attribute is removed.


Only those elements marked in the ASPX file with
runat="server"

are modified or replaced in the
generated XHTML.



2009 Pearson Education, Inc. All rights reserved.

31

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

22.4.6

Building an ASP.NET Web Application


To build the
WebTime

application, perform the following
steps in Visual Web Developer:

Step 1: Creating the Web Application Project


Select
File

>

New

Web Site...

and choose
ASP.NET

Web

Site

in the
Templates

pane.


Select
File

System

from the drop
-
down list closest to
Location
.



Set the
Language

drop
-
down list to Visual C#, and

click
OK
.



2009 Pearson Education, Inc. All rights reserved.

32

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Fig. 22.7

|

Creating an
ASP.NET

Web

Site

in Visual Web Developer.



2009 Pearson Education, Inc. All rights reserved.

33

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 2: Examining the
Solution Explorer

of the Newly
Created Project



The

Solution

Explorer

is

shown

in

Fig
.

22
.
8
.

View Code

View Designer

Copy Web Site

ASP.NET Configuration

Nest Related Files

Refresh

Properties

Data files folder

Code
-
behind file

ASPX file

Website configuration file

Fig. 22.8

|

Solution

Explorer

window for project
WebTime
.




2009 Pearson Education, Inc. All rights reserved.

34

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


An ASPX file (i.e., Web Form) named
Default.aspx

is created for each new

project.


Visual Web Developer creates a code
-
behind file named
Default.aspx.cs
.


The
View

Designer

button opens the Web Form in
Design

mode.


The
Copy

Web

Site

button allows you to copy the
project’s files to another location, such as a remote web
server.


Finally, the
ASP.NET Configuration

button takes you

to the
Web Site Administration Tool
.



2009 Pearson Education, Inc. All rights reserved.

35

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 3: Examining the
Toolbox

in Visual Web
Developer



Figure

22.9 shows the
Toolbox

displayed in the IDE

when the project loads.



2009 Pearson Education, Inc. All rights reserved.

36

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Fig. 22.9

|

Toolbox

in Visual Web Developer.


a)

b)


Figure

22.9(a) displays the
beginning of the
Standard

list
of web controls.


Figure

22.9(b) displays the
remaining web controls, as well as
the list of
Data

controls used in
ASP.NET.



2009 Pearson Education, Inc. All rights reserved.

37

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 4: Examining the Web Forms Designer


Figure

22.10 shows the Web Forms Designer in
Source

mode, which appears in the center of the IDE.

Source


mode button

Source


mode button

Split


mode button

Design

mode button

Fig. 22.10
|
Source

mode of the Web Forms Designer.




2009 Pearson Education, Inc. All rights reserved.

38

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


When the project loads for the first time, the Web
Forms Designer displays the autogenerated ASPX file
in
Source

mode.



2009 Pearson Education, Inc. All rights reserved.

39

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


Clicking the
Design

button in the lower
-
left corner of
the Web Forms Designer switches to
Design

mode
(Fig.

22.11).

Fig. 22.11
|
Design

mode of the Web Forms Designer.


Cursor’s current location

Cursor


Design

mode indicates the XHTML element where the
cursor is currently located.



2009 Pearson Education, Inc. All rights reserved.

40

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


You can also view both the markup and the web
-
page design at
the same time by using
Split

mode, as shown in Fig.

22.12.

Fig. 22.12
|
Split

mode of Web Forms Designer.




2009 Pearson Education, Inc. All rights reserved.

41

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 5: Examining the Code
-
Behind File in the IDE


The next figure (Fig.

22.13) displays the code
-
behind file generated
by Visual Web Developer for
Default.aspx
.

Fig. 22.13
|

Code
-
behind file for
Default.aspx

generated by Visual Web Developer



Right click the ASPX file in the
Solution

Explorer

and select
View

Code

to open the code
-
behind file.



2009 Pearson Education, Inc. All rights reserved.

42

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 6: Renaming the ASPX File


Right click the ASPX file in the
Solution

Explorer

and select
Rename
.


Enter the new file name
WebTime.aspx

and press
Enter
. Both the ASPX file and the code
-
behind file are
updated.



2009 Pearson Education, Inc. All rights reserved.

43

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 7: Renaming the Class in the Code
-
Behind File
and Updating the ASPX File



Visual Studio’s refactoring tool, which automatically updates

the existing references to this class in the rest of the project to

reflect this change.



Right click the class name in the partial class’s declaration and

select
Refactor > Rename…
to open the
Rename

dialog (Fig.

22.14).



2009 Pearson Education, Inc. All rights reserved.

44

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Fig. 22.14
|
Rename dialog.



Specify
WebTime

as the new class name and click
OK
.



2009 Pearson Education, Inc. All rights reserved.

45

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 8: Changing the Title of the Page


We change the page’s title from the default
Untitled

Page

to
A

Simple

Web

Form

Example
.


Open the ASPX file in
Source

mode and modify the
text between the
<title>

tags.


Alternatively, you can modify the Web Form’s
Title

property in the
Properties

window.


To view the Web Form’s properties, select
DOCUMENT

from the drop
-
down list in the
Properties

window.




2009 Pearson Education, Inc. All rights reserved.

46

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 9: Designing the Page


To add controls to the page, you can drag and drop them
from the
Toolbox

onto the Web Form in
Design

mode.


Like the Web Form itself, each control is an object that has
properties, methods and events.


You can type text directly on a Web Form at the cursor
location or insert XHTML elements using menu commands.



2009 Pearson Education, Inc. All rights reserved.

47

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


Controls and other elements are placed sequentially

on a Web Form. The cursor indicates the point at which
text and XHTML elements will be inserted.


You can drop the control at a specific position within the
existing elements and rearrange existing controls using
drag
-
and
-
drop actions.



2009 Pearson Education, Inc. All rights reserved.

48

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


The positions of controls and other elements are relative to
the Web Form’s upper
-
left corner. This type of layout is
known as
relative positioning
.


An alternate type of layout is known as
absolute
positioning
, in which controls are located exactly where
they are dropped on the Web Form.


You can enable absolute positioning in
Design

mode in
the
HTML Designer > CSS Styling

node of the
Options

dialog.




2009 Pearson Education, Inc. All rights reserved.

49

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Portability Tip 22.2

Absolute positioning is discouraged, because pages designed
in this manner may not render correctly in different browsers
or on computers with different screen resolutions and font
sizes. This could cause absolutely positioned elements to
overlap each other or display off
-
screen, requiring the client
to scroll to see the full page content.



2009 Pearson Education, Inc. All rights reserved.

50

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


To add the text to the Web Form, click within the gray
rectangle at the top of the Web Form in
Design

mode.

Type
Current

time

on

the

web

server:
.


Visual Web Developer is a
WYSIWYG
(
What You See Is
What You Get
) editor

the IDE converts changes made in
Design

mode into markup.


Highlight the text you added. From the
Block Format

drop
-
down list, choose
Heading 2
.


Finally, click to the right of the text and press the
Enter

key to move the cursor to a new paragraph.


The IDE should now look like Fig.

22.15.




2009 Pearson Education, Inc. All rights reserved.

51

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Fig. 22.15
|
WebTime.aspx

after inserting text and a new paragraph.


Block

Format

drop
-
down list

Cursor position after inserting a new paragraph by pressing
Enter



2009 Pearson Education, Inc. All rights reserved.

52

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


Place a
Label

on a Web Form either by dragging and
dropping or by double clicking the
Toolbox
’s
Label

control.


Using the
Properties

window, set the
(ID)

property

of the
Label

to
timeLabel
.


Delete
timeLabel
’s text, because we set it
programmatically in the code
-
behind file.


When a
Label

does not contain text, the name is displayed
in square brackets in the Web Forms Designer (Fig.

22.16).



2009 Pearson Education, Inc. All rights reserved.

53

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


Set
timeLabel
’s
BackColor
,
ForeColor

and

Font
-
Size

properties to
Black
,
Yellow

and

XX
-
Large
, respectively.


Set the
Label
’s
EnableViewState

property to
False
.


Finally, select
DOCUMENT

from the drop
-
down list in the
Properties

window and set the Web Form’s
Enable
-
SessionState

property to
False
.




2009 Pearson Education, Inc. All rights reserved.

54

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Fig. 22.16
|
WebTime.aspx

after adding a

Label

and setting its properties.


Label



2009 Pearson Education, Inc. All rights reserved.

55

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 10: Adding Page Logic


Open
WebTime.aspx.cs

by double clicking its node in
the
Solution Explorer
.


Add a
Page_Init

event handler to the code
-
behind file.
Page_Init

programmatically sets the text of
time
-
Label

to the current time on the server.




2009 Pearson Education, Inc. All rights reserved.

56

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Step 11: Running the Program


You can view the Web Form several ways.


You can select
Debug

> Start Without Debugging
,
which runs the application by opening it in a browser window.


To debug your application, you can select
Debug > Start

Debugging
. You cannot debug a web application unless
debugging is explicitly enabled by the
web.config

file.


To view a specific ASPX file, you can right click either the Web
Forms Designer or the ASPX file name and select
View

In
Browser
.


Finally, you can run your application by opening a browser
window and typing the web page’s URL in the
Address

field.



2009 Pearson Education, Inc. All rights reserved.

57

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)


ASP.NET compiles your web page whenever it
changes between HTTP requests.


You can manually compile a web page or an entire
website by selecting
Build

Page

or
Build Site
,
respectively, from the
Build

menu.




2009 Pearson Education, Inc. All rights reserved.

58

22.4

Creating and Running a Simple
Web
-
Form Example (Cont.)

Windows Firewall Settings


For security reasons, Windows Firewall does not allow
remote access to a web server on your local computer by
default.


You can change this using the Windows Firewall utility

in the Windows Control Panel.



2009 Pearson Education, Inc. All rights reserved.

59


Web control

Description


Label

Displays text that the user cannot edit.


TextBox

Gathers user input and displays text.


Button

Triggers an event when clicked.


HyperLink

Displays a hyperlink.


DropDownList

Displays a drop
-
down list of choices from
which a user can select an item.


RadioButtonList

Groups radio buttons.


Image

Displays images (e.g., GIF, JPG and PNG).


Fig. 22.17

|

Commonly used web controls.


Figure

22.17 summarizes several web controls.

22.5

Web Controls



2009 Pearson Education,
Inc. All rights reserved.

60


1

<%
--
Fig.

22.18: WebControls.aspx
--
%>


2

<%
--
Registration form that demonstrates web controls.
--
%>


3

<%@

Page

Language
=
"C#"

AutoEventWireup
=
"true"


4


CodeFile
=
"WebControls.aspx.cs"

Inherits
=
"WebControls"

%>


5



6

<!DOCTYPE html PUBLIC

"
-
//W
3C//DTD XHTML 1.0 Transitional//EN"


7


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd"
>


8



9

<html xmlns
=
"http://www.w3.org/1999/xhtml"
>

10

<head

runat
=
"server"
>

11


<title>
Web Controls Demonstration
</title>

12


<style type
=
"te
xt/css"
>

13


.style1


14


{


15



color:

#006699
;


16


}



Outline

WebControls.aspx

( 1 of 6 )


Figure

22.18 depicts a simple form for gathering user
input.

Fig. 22.18

|

Web Form that demonstrates web controls. (Part 1 of 6. )

In the
head

element of your
.aspx

file, the
style

element
defines
embedded style
sheets
.



2009 Pearson Education,
Inc. All rights reserved.

61

17


.style2


18


{


19


width:

100%
;


20


}


21


</style>


22

</head>

23

<body>

24


<form id
=
"form1"

runat
=
"server"
>

25


<div>

26


<h3>
Th
is is a sample registration form.
</h3>

27


<p><i>
Please fill in all fields and click Register.
</i></p>

28

<p>

29


<asp:Image ID
=
"userInformationImage"

runat
=
"server"

30


ImageUrl
=
"~/Images/user.png"

/>


31


<span class="style1">
Please fill out the fields below.
</span>

32

</p>

33


<table class
=
"style2"
>

34

<tr>

35


<td valign
=
"top"

style
=
"width: 225px"
>

36


<asp:Image ID
=
"firstNameImage"

run
at
=
"server"

37


ImageUrl
=
"~/Images/fname.png"

/>

38



<asp:TextBox ID
=
"firstNameTextBox"

runat
=
"server"
>

39


</asp:TextBox>


40

</td>


Outline

WebControls.aspx

( 2 of 6 )

Fig. 22.18

|

Web Form that demonstrates web controls. (Part 2 of 6. )

An
Image

control inserts an
image into a web page.

A
TextBox

control allows
you to obtain text from the
user and display text to the
user.

In the
head

element of your
.aspx

file, the
style

element
defines
embedded style
sheets
.



2009 Pearson Education,
Inc. All rights reserved.

62

41


<td valign
=
"top"
>

42


<asp:Image ID
=
"lastNameImage"

runat
=
"server"

43


ImageUrl
=
"~/Images/lname.png"

/>

44


<asp:TextBox ID
=
"lastNameTextBox"
runat
=
"server"
>

45

</asp:TextB
ox>

46

</td>

47

</tr>

48

<tr>

49


<td valign
=
"top"

style
=
"width: 225px"
>

50


<asp:Image ID
=
"emailImage"

runat
=
"server"

51


ImageUrl
=
"~/Images/email.png"

/>

52



<asp:TextBox ID
=
"emailTextBox"

runat
=
"server"
>

53

</asp:TextBox>

54

</td>

55


<td valign
=
"top"
>

56


<asp:Image ID
=
"phoneImage"

runat
=
"server"

57


ImageUrl
=
"~/Images/phone.pn
g"

/>

58


<asp:TextBox ID
=
"phoneTextBox"

runat
=
"server"
>

59

</asp:TextBox>

60

<br />

61

Must be in the form (555) 555
-
5555.

62

</td>

63

</tr>

64

</table>


Outline

WebControls.aspx

( 3 of 6 )

Fig. 22.18

|

Web Form that demonstrates web controls. (Part 3 of 6. )



2009 Pearson Education,
Inc. All rights reserved.

63

65

<p>

66


<asp:Image ID
=
"publicationsImage"

runat
=
"server"


67


ImageUrl
=
"~/Images/publications.png"

/>
&nbsp;

68


<span class
=
"style1"
>

69

Which book would you like information about?
</span>

70


</p>

71

<p>

72


<asp:DropDownList ID
=
"booksDropDownList"

runat
=
"server"
>


73


<asp:ListItem>
Visual Basic 2008 How to Program
</asp:ListItem>

74


<asp:ListItem>
Visual C# 2008 How to Program
</asp:ListItem>



75


<asp:ListItem>
Java How to Program 6e
</asp:ListItem>


76



<asp:ListItem>
C++ How to Program 5e
</asp:ListItem>


77


<asp:ListItem>
C How to Program 5e
</asp:ListItem>


78


<asp:ListItem>
Internet and World Wide Web How to Program 4e


79


</asp:ListItem>


80


</asp:DropDownList>


81

</p>

82

<p>

83



<asp:HyperLink ID
=
"booksHyperLink"

runat
=
"server"


84


NavigateUrl
=
"http://www.deitel.com"

Target
=
"_blank"
>

85


Click here to view more information about our books


86


</asp:HyperLink>



87

</p>


Outline

WebControls.aspx

( 4 of 6 )

Fig. 22.18

|

Web Form that demonstrates web controls. (Part 4 of 6. )

A
TextBox

control
allows you to obtain text
from the user and display
text to the user.

The
HyperLink

control
adds a hyperlink to a web
page.



2009 Pearson Education,
Inc. All rights reserved.

64

88

<p>

89


<asp:Image ID
=
"operatingSystemImage"

runat
=
"server"


90


ImageUrl
=
"~/Images/os.png"
/>
&nbsp;

91


<span class
=
"style1"
>
Which operating system are you using?

92

</span>

93

</p>

94


<p>

95



<asp:RadioButtonList ID
=
"operatingSystemRadioButtonList"

96


runat
=
"server"
>


97


<asp:ListItem>
Windows Vista
</asp:ListItem>


98


<asp:ListItem>
Windo
ws XP
</asp:ListItem>


99


<asp:ListItem>
Mac OS X
</asp:ListItem>


100


<asp:ListItem>
Linux
</asp:ListItem>


101


<asp:ListItem>
Other
</asp:ListItem>


102


</asp:RadioButtonList>


103

</p>

104

<p>

105


<asp:Button ID
=
"registerButton"

runat
=
"server"

106


Text
=
"Register"
/>


107

</p>

108

</div>

109

</form>

110

</body>

111

</html>


Outline

WebControls.aspx

( 5 of 6 )

Fig. 22.18

|

Web Form that demonstrates web controls. (Part 5 of 6. )

The
RadioButtonList

control provides a series of
radio buttons from which
the user can select only one.

A
Button

web control
represents a button that
triggers an action when
clicked, and typically maps
to an XHTML
input

element of
type

"button"
.



2009 Pearson Education,
Inc. All rights reserved.

65

Outline

WebControls.aspx

( 6 of 6 )

Fig. 22.18

|

Web Form that demonstrates web controls. (Part 6 of 6. )

Image

control

TextBox

control

DropDownList

control

HyperLink

control

RadioButtonList

Button

control



2009 Pearson Education, Inc. All rights reserved.

66

22.5

Web Controls (Cont.)


The code in Fig.

22.18 was generated by Visual Web
Developer using
Design

mode.



To begin, create an
ASP.NET Web Site

named
WebControls
.



The page contains an
h3

heading element, followed
by a series of additional XHTML blocks.



We use an XHTML
table

element to organize

the
Image

and
TextBox

controls in the

user
-
information section of the page.



2009 Pearson Education, Inc. All rights reserved.

67

Fig. 22.19
|
Insert

Table

dialog.

22.5

Web Controls (Cont.)

Adding an XHTML Table to a Web Form


Select
Insert

Table

from the
Table

menu to display the

Insert

Table

dialog (Fig.

22.19).




2009 Pearson Education, Inc. All rights reserved.

68

22.5

Web Controls (Cont.)


In the
Size

group box, change the values of
Rows

and
Columns

to
2
.



Click
OK

to close the
Insert Table

dialog and create
the table.




2009 Pearson Education, Inc. All rights reserved.

69

22.5

Web Controls (Cont.)


We changed the vertical alignment of all cells in the table
(i.e.,
td

elements) by setting the
valign

property to
top

in the
Properties

window.


We also changed the width of the cells in the left column
by modifying the
style

property in the
Properties

window.


Click the ellipsis next to the style property to display the
Modify

Style

dialog.


In this case, we set the width (in the
Position

category)

to
225px
.



2009 Pearson Education, Inc. All rights reserved.

70

22.5

Web Controls (Cont.)

Setting the Color of Text on a Web Form


To set the color of a specific piece of text, highlight the text
and select
Format

> Font…
.


In the
Font

dialog that appears, choose a color or click
More

Colors

.


he
More Colors

dialog offers a greater selection of
colors and allows you to specify a custom color by clicking
the
Colors


button.


The IDE places the colored text in an XHTML
span

element and applies the color using CSS styling.



2009 Pearson Education, Inc. All rights reserved.

71

22.5

Web Controls (Cont.)

Examining Web Controls on a Sample Registration
Form



An
Image

control inserts an image into a web page.



We added an
Images

folder to this project by right

clicking the location of the project in the
Solution


Explorer

and selecting
New Folder
.



We then added each of the images used in the example


to this folder by right clicking the folder and selecting

Add Existing Item

.



The
ImageUrl

property specifies the location of the

image to display.



2009 Pearson Education, Inc. All rights reserved.

72

22.5

Web Controls (Cont.)


To select an image, click the ellipsis next to the
ImageUrl

property and use the
Select

Image

dialog.


A
TextBox

control allows you to obtain text from
the user and display text to the user.




2009 Pearson Education, Inc. All rights reserved.

73

22.5

Web Controls (Cont.)


A
DropDownList

is similar to the Windows Forms
ComboBox

control. However, a
DropDownList

does
not allow users to type text.


Each item in the drop
-
down list is defined by a
ListItem

element.


You can add items to a
DropDownList

using the
ListItem

Collection

Editor
.

This process is
similar to customizing a
ListBox

in a Windows
application.


Visual Web Developer displays
smart
-
tag menus

for
many ASP.NET controls to facilitate common tasks.



2009 Pearson Education, Inc. All rights reserved.

74

22.5

Web Controls (Cont.)

Fig. 22.20
|
DropDownList

Tasks

smart
-
tag menu.




2009 Pearson Education, Inc. All rights reserved.

75


The
HyperLink

control adds a hyperlink to a web page.


The
Navigate
Url

property of this control specifies the
resource that is requested when a user clicks the hyperlink.


Setting the
Target

property to _
blank

specifies that the
requested web page should open in a new window or tab.


The
RadioButtonList

control provides a series of radio
buttons from which the user can select only one.


Like options in a
DropDownList
, individual radio buttons
are defined by
ListItem

elements.


A
Button

web control represents a button that triggers an
action when clicked, and typically maps to an XHTML input
element of
type

"
button
".


22.5

Web Controls (Cont.)



2009 Pearson Education, Inc. All rights reserved.

76

CSS Inline Styles and Embedded Style Sheets


Visual Web Developer often generates
CSS (Cascading Style
Sheets
TM
)

code to specify the presentation of an element.


In the
head

element of your
.aspx

file, the
style

element

defines
embedded style sheets
.


The
style

element’s
type

attribute specifes the MIME type

of its content.


The body of the style sheet declares
CSS rules

(styles).


A CSS rule is composed of a
CSS selector

and a series of property
specifications separated by semicolons (
;
) and enclosed in curly
braces (
{}
).


Each specification is composed of a property followed by a

colon and a value.

22.5

Web Controls (Cont.)



2009 Pearson Education, Inc. All rights reserved.

77

22.5

Web Controls (Cont.)


When you use one of the visual programming tools to
define an element’s appearance, the IDE sometimes
creates a
style class
, which can be used as a selector
by prefixing it with a period.


The style class can then be applied to any element in
the document by setting the XHTML attribute
class
.


Another way to apply styles is to use
inline styles
,
which declare an individual element’s format using
the XHTML attribute
style
.



2009 Pearson Education,
Inc. All rights reserved.

78


1

<%
--
Fig.

22.21: FlagRotator.aspx
--
%>


2

<%
--
A Web Form that displays flags using an AdRotator control.
--
%>


3

<%@

Page Language
=
"C#"

AutoEventWireup
=
"false"



4


CodeFile
=
"FlagRotator.aspx.cs"

Inherits
=
"FlagRotator"

%>


5



6

<!DOCTYPE html P
UBLIC

"
-
//W3C//DTD XHTML 1.0 Transitional//EN"



7


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd"
>


8



9

<html xmlns
=
"http://www.w3.org/1999/xhtml"
>

10

<head runat
=
"server"
>

11


<title>
Flag Rotator
</title>

12

</head>


Outline

FlagRotator.aspx

( 1 of 3 )


Using advertisement data located in an XML file, an
AdRotator

web control randomly selects an image
and generates a link to the associated web page.

Demonstrating the
AdRotator

Web Control


Figure

22.21 demonstrates the
AdRotator

web
control.

Fig. 22.21

|

Web Form that demonstrates the
AdRotator

web control. (Part 1 of 3. )



2009 Pearson Education,
Inc. All rights reserved.

79

13

<body background
=
"Images/background.png"
>

14


<form id
=
"form1"

runat
=
"server"
>

15

<div>

16

<h3>
AdRotator Example
</h3>

17


<p>

18


<asp:AdRotator ID
=
"countryRotator"

runat
=
"server"


19


DataSource
ID
=
"adXmlDataSource"

/>


20


<asp:XmlDataSource ID
=
"adXmlDataSource"

runat
=
"server"

21


DataFile
=
"~/App_Data/AdRotatorInformation.xml"
>


22


</asp:XmlDataSource>


23

</p>

24

</div>

25

</form>

26

</body>

27

</html>


Outline

FlagRotator.aspx

(2 of 3 )

Fig. 22.21

|

Web Form that demonstrates the
AdRotator

web control. (Part 2 of 3. )

This page contains XHTML
text and an
AdRotator

control named
countryRotator
.

The page contains an
XmlDataSource

control,
which supplies the data to the
AdRotator

control.



2009 Pearson Education,
Inc. All rights reserved.

80

Outline

FlagRotator.aspx

(3 of 3 )

Fig. 22.21

|

Web Form that demonstrates the
AdRotator

web control. (Part 3 of 3. )

a)

AlternateText

displayed in a tool tip

AdRotator

image

c)

b)



2009 Pearson Education, Inc. All rights reserved.

81

22.5

Web Controls (Cont.)


This page contains XHTML text and an
AdRotator

control named
countryRotator
.


The page contains an
XmlDataSource

control,
which supplies the data to the
AdRotator

control.


Figure

22.21(a) shows the first time the page is
requested, when the Swedish flag is randomly chosen.


In the second request, as shown in Fig.

22.21(b), the
French flag is displayed.


Figure

22.21(c) depicts the web page that loads when
you click the French flag.



2009 Pearson Education, Inc. All rights reserved.

82

22.5

Web Controls (Cont.)

Connecting Data to an
AdRotator

Control


An
XmlDataSource

references an XML file containing
data that will be used in an ASP.NET application.


To build this example, we first add the XML file
AdRotatorInformation.xml

to the project.


Right click the
App_Data

folder in the
Solution

Explorer

and select
Add

Existing

Item…
.


Next, drag an
AdRotator

control from the
Toolbox

to the Web Form.



2009 Pearson Education, Inc. All rights reserved.

83

22.5

Web Controls (Cont.)


From the smart
-
tag menu, select
<New Data Source…>

from the
Choose Data Source
drop
-
down list to start the
Data Source Configuration Wizard
.


Select
XML

File

as the data
-
source type. Set the ID of the
control to
adXmlDataSource
.


In the next dialog’s
Data

File

section, click
Browse…

and, in the
Select

XML

File

dialog, locate and select the
XML file you added to the
App_Data

folder.



2009 Pearson Education, Inc. All rights reserved.

84

22.5

Web Controls (Cont.)

Examining an XML File Containing Advertisement
Information



Any XML document used with an
AdRotator

control


must contain one
Advertisements

root element.



Within that element can be as many
Ad

elements as you

need. Each
Ad

element is similar to the following:

<Ad>


<ImageUrl>
Images/france.png
</ImageUrl>


<NavigateUrl>
https://www.cia.gov/library/publications/




the
-
world
-
factbook/geos/fr.html
</NavigateUrl>


<AlternateText>
France Information
</AlternateText>


<Impressions>
1
</Impressions>

</Ad>



2009 Pearson Education, Inc. All rights reserved.

85

22.5

Web Controls (Cont.)


Element
ImageUrl

specifies the path (location) of the
advertisement’s image.


Element
NavigateUrl

specifies the URL for the web page
that loads when a user clicks the advertisement.


The
AlternateText

element nested in each
Ad

element
contains text that displays in place of the image when the
browser cannot display the image.


The
Impressions

element specifies how often a particular
image appears, relative to the other images. In our example, the
advertisements display with equal probability, because the
value of each
Impressions

element is set to
1
.



2009 Pearson Education, Inc. All rights reserved.

86

22.5

Web Controls (Cont.)

22.5.3

Validation Controls


TA
validation control

(or
validator)

determines whether the
data in another web control is in the proper format, before the
data is processed.


When the XHTML for our page is created, the validator is
converted into
JavaScript

that performs the validation.


JavaScript is a scripting language that enhances the
functionality and appearance of web pages and is typically
executed on the client.


Because some clients disable or do not support scripting,
ASP.NET validation controls can function on the client,

on the server or both.



2009 Pearson Education,
Inc. All rights reserved.

87


1

<%
--
Fig.

22.22: Validation.aspx
--
%>


2

<%
--
Form that demonstrates using validators to validate user input.
--
%>


3



4

<%@

Page Language
=
"C#"

AutoEventWireup
=
"true"


5


CodeFile
=
"Validation.aspx.cs"

Inherits
=
"Validation"

%>


6



7

<!DOCTYPE h
tml PUBLIC

"
-
//W3C//DTD XHTML 1.0 Transitional//EN"


8


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd"
>


9


10

<html xmlns
=
"http://www.w3.org/1999/xhtml"
>

11

<head runat
=
"server"
>

12


<title>
Demonstrating Validation Controls
</title>

13


<style type
=
"text/css"
>

14


.style1

15

{

16


width:

125px
;

17


vertical
-
align:

top
;

18

}

19

</style>

20

</head>


Outline

Validation.aspx

( 1 of 7 )

Validating Input in a Web Form


Figure

22.22 presents the ASPX file.

Fig. 22.22

|

Validators used in a Web Form that retrieves user contact
information. (Part 1 of 7. )



2009 Pearson Education,
Inc. All rights reserved.

88

21

<body>

22


<form id
=
"form1"

runat
=
"server"
>

23

<div>

24

<p>

25

Please fill out the following form.
<br /><i>
All fields are

26

required and must contain valid information.
</i>

27


</p>

28


<table style
=
"width: 100%;"
>

29


<tr>

30


<td class
=
"style1"
>
Name:
</td>

31


<td>

32


<asp:TextBox ID
=
"nameTextBox"

runat
=
"server"
>

33


</asp:TextBox><br />

34



<asp:RequiredFieldValida
tor ID
=
"nameExistsValidator"

35


runat
=
"server"

ControlToValidate
=
"nameTextBox"



36


ErrorMessage
=
"Please enter your name."



37


Display
=
"Dynamic"
>



38



</asp:RequiredFieldValidator>


39

</td>

40

</tr>


Outline

Validation.aspx

(2 of 7 )

Fig. 22.22

|

Validators used in a Web Form that retrieves user contact
information. (Part 2 of 7. )

The
Control
ToValidate

property indicates which control’s
contents is verified by the
RequiredFieldValidator
.

Because we set the validator’s
Display

property to
Dynamic
,
the validator is displayed on the
Web Form only when validation
fails.

Property
ErrorMessage
’s

text is displayed on the Web Form
if the validation fails.



2009 Pearson Education,
Inc. All rights reserved.

89

41

<tr>

42


<td class
=
"style1"
>
E
-
mail address:
</td>

43


<td>

44


<asp:TextBox ID
=
"emailTextBox"

runat
=
"server"
>

45


</asp:TextBox>
&nbsp;e.g., user@domain.com
<br />

46



<asp
:RequiredFieldValidator ID
=
"emailExistsValidator"

47


runat
=
"server"

ControlToValidate
=
"emailTextBox"


48


ErrorMessage
=
"Please enter your e
-
mail address."


49


Display
=
"Dynamic"
>



50



</asp:RequiredFieldValidator>


51


<asp:RegularExpressionValidator ID
=
"emailFormatValidator"

52


runat
=
"server"

ControlToValidate
=
"emailTextBox"


53



ErrorMessage
=


54


"Please enter an e
-
mail address in a valid format."

55


ValidationExpression
=


56


"
\
w+([
-
+.']
\
w+)*@
\
w+([
-
.]
\
w+)*
\
.
\
w+([
-
.]
\
w+)*"


57


Display
=
"Dynamic"
>


58


</asp:RegularExpressionValidator>


59

</td>

60

</tr>


Outline

Validation.aspx

( 3 of 7 )

Fig. 22.22

|

Validators used in a Web Form that retrieves user contact
information. (Part 3 of 7. )



2009 Pearson Education,
Inc. All rights reserved.

90

61

<tr>

62


<td class
=
"style1"
>
Phone number:
</td>

63

<td>

64


<asp:TextBox ID
=
"phoneTextBox"
runat
=
"server"
>

65


</asp:TextBox>
&nbsp;e.g., (555) 555
-
5555
<br />

66


<asp:Re
quiredFieldValidator ID
=
"phoneExistsValidator"

67


runat
=
"server"

ControlToValidate
=
"phoneTextBox"


68


ErrorMessage
=
"Please enter your phone number."


69


Display
=
"Dynamic"
>



70


</asp:RequiredFieldValidator>


71


<asp:RegularExpressionValidator ID
=
"phoneFormatValidator"

72


runat
=
"server"
ControlToValidate
=
"phoneTextBox"


73



ErrorMessage
=


74



"Please enter a phone number in a valid format."


75


ValidationExpression
=


76


"((
\
(
\
d{3
}
\
) ?)|(
\
d{3}
-
))?
\
d{3}
-
\
d{4}"


77


Display
=
"Dynamic"
>


78


</asp:RegularExpressionValidator>


79

</td>

80

</tr>

81

</t
able>


Outline

Validation.aspx

(4 of 7 )

Fig. 22.22

|

Validators used in a Web Form that retrieves user contact
information. (Part 4 of 7. )



2009 Pearson Education,
Inc. All rights reserved.

91

82

<p>

83


<asp:Button ID
=
"submitButton"
runat
=
"server"

Text
=
"Submit"

/>

84

</p>

85

<p>

86


<asp:Label ID
=
"outputLabel"

runat
=
"server"

87


Text
=
"Thank you for your submission."

Visible
=
"False"
>

88


</asp:Label>

89

</p>

90

</div>

91

</form>

92

</body>

93

</html>


Outline

Validation.aspx

(5 of 7 )

Fig. 22.22

|

Validators used in a Web Form that retrieves user contact
information. (Part 5 of 7. )

a)

outputLabel
’s
Visible

property is initially set to
False

(line 87), so it won’t appear in the
browser when the page first loads.



2009 Pearson Education,
Inc. All rights reserved.

92

Outline

Validation.aspx

(6 of 7 )

Fig. 22.22

|

Validators used in a Web Form that retrieves user contact
information. (Part 6 of 7. )

c)

b)



2009 Pearson Education,
Inc. All rights reserved.

93

Outline

Validation.aspx

( 1 of 7 )

Fig. 22.22

|

Validators used in a Web Form that retrieves user contact
information. (Part 1 of 7. )

d)



2009 Pearson Education, Inc. All rights reserved.

94

22.5

Web Controls (Cont.)

Using
RequiredFieldValidator

Controls


A
RequiredFieldValidator

makes an input

control a required field.


If such a field is empty, validation fails.


The
Control
ToValidate

property indicates

which control’s contents is verified by the
RequiredFieldValidator
.


Set the value of this property (and the validator’s other
properties) by selecting the validator in
Design

mode
and using the
Properties

window.



2009 Pearson Education, Inc. All rights reserved.

95

22.5

Web Controls (Cont.)


Property
ErrorMessage
’s text is displayed on the
Web Form if the validation fails.


Because we set the validator’s
Display

property to
Dynamic
, the validator is displayed on the Web
Form only when validation fails.


The controls below the validator shift downward to
accommodate the
ErrorMessage
, as seen in
Fig.

22.22(b).



2009 Pearson Education, Inc. All rights reserved.

96

22.5

Web Controls (Cont.)

Using
RegularExpressionValidator

Controls


This example also uses
RegularExpressionValidator

controls to match the e
-
mail address and phone number against
regular expressions.


A
RegularExpressionValidator’s

ValidationExpression

property specifies the regular
expression that validates the
ControlToValidate’s

contents.


Clicking the ellipsis next to
ValidationExpression

in
the
Properties

window displays the
Regular

Expression

Editor

dialog.



2009 Pearson Education, Inc. All rights reserved.

97

22.5

Web Controls (Cont.)


The
Regular

Expression

Editor

contains a
list of
Standard

expressions

for phone
numbers, zip codes and other formatted information.


If the user enters an invalid email address and clicks in
a different text box or attempts to submit the form, the
ErrorMessage

text is displayed in red.


If all five validators are successful, clicking the
Submit

button sends the form’s data to the server.


The server then responds by displaying the submitted
data in the
outputLabel
.



2009 Pearson Education,
Inc. All rights reserved.

98


1

// Fig.

22.23: Validation.aspx.cs


2

// Code
-
behind file for the form demonstrating validation controls.


3

using
System;


4



5

public

partial

class
Validation : System.Web.UI.Page


6

{


7

// Page_Load event handler executes when the page is l
oaded


8


protected

void
Page_Load(
object
sender, EventArgs e )


9

{

10

// if this is not the first time the page is loading

11

// (i.e., the user has already submitted form data)

12