c



 c

 
c

Using ASP.NET Controls in Expression Web Appendix


Ý

Ý 

ASP.NET controls allow you to add content that can change, making your Web page

dynamic. ASP stands for Active Server Pages. Several ASP.NET controls are available in the

Expression Web Toolbox. ASP.NET pages create an interactive experience for the user,

permitting the user to enter information into a Web form; the information the user enters then is

collected and used by the site owner. With a static .htm or .html Web page, the Web server

simply reads the HTML code and sends it ³as is´ to the browser for display. A Web page that O


d"-
"
. &&/

contains ASP.NET controls has an extension of .aspx, and the page runs as a program on a Web

server. As the page is being displayed, the ASP.NET controls can perform any task that your

page requires, including computing calculations, validating the user¶s input, or even accessing

database information.

ASP.NET controls can be used for many purposes. For example, you could use an

ASP.NET form to register for a hotel stay or to update your online bank account. If you applied

for college using an online application, the form into which you placed your personal O

 d,!/

information might have reminded you to not leave any fields empty, or it could have asked you

to correct your state abbreviation in the form controls.

In Chapter 7 of the textbook, you learned to work with forms. In the following example,

you will replace the form controls with ASP.NET controls, adding functionality to the Wisteria

Farms form. ASP.NET controls are more powerful than simple forms because of their ability to

perform tasks such as validation without a Web designer having to write code. In the Wisteria

Farms site, the user¶s name ASP.NET TextBox control can be validated, meaning that the file

confirms that text was actually entered by the user in the text box. The e-mail ASP.NET TextBox




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

control can be validated to confirm that the e-mail address has all the necessary components,

such as an ³@´ symbol; for example, user@collegemail.com.



  


If you are using a computer to step through the project in this Appendix, and you want

your screen to match the figures, you should change your computer¶s resolution to 1024 x 768.

For information about how to change a computer¶s resolution, read Appendix F.





 




 !!" 

#
 
$

%

 &$



''
(

)

!"

' 
!!"









*

!"
"+

 
!!"
"!,#






The following steps rename elements of the Wisteria form in preparation for adding the

ASP.NET controls.



-!!"!





$




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c



 !

. !
 




 

#Order Form

 !


!

 ,
"#/$(-0

Ý1 (-


( +2+$

To add ASP.NET controls to a Web page, you must first save the site must as a dynamic

Web page with the extension .aspx. The Web page with the ASP.NET controls will not open in a

browser if the .html extension of the page filename is not changed to the extension .aspx. If

ASP.NET controls are added to a Web page the file, the page must have the extension .aspx. The

following steps save the page as an .aspx page.



!"
 
!!" &(


#Porm.aspx


/$(-0

Ý1 (-

!"
 &


&
$$

( +





A form Input (Text) control looks very similar to an ASP.NET TextBox control, which

you learned about in Chapter 7. The difference between the two controls is that the data entered

by the user into the ASP.NET TextBox can be validated. If a form requests user input on a Web

site, it is important that the form validates the input that the user provides. Form validation

ensures that the user provides the kind of information you expect to receive. For example, if you




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

are expecting a phone number and a user enters their ZIP code, you end up with incorrect

information.


( +


3


The following steps create a table with two ASP.NET TextBox controls into which a user

can enter their name and their e-mail address.



!"Ý





Ý

$


#°
.°


!"
 !'#.
!!"
!

/$(-%0

!"
4


!
$

Ý1 (-%



!"



(#
#
"
!

"







 !

( +
!
!
$#
!!"


$


'( +
!
!!"
$




!
/$(-)0

Ý1 (-)

%

!"
'
!






'!#




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c


#Full Name 

(3
&

'
!
!

!/$(-*0

Ý1 (-*

)

-!!"
( +


3!



!



3
'/$(-50

Ý1 (-5

*

Ý
( +


 



&
$
6



!
.-. !!" 
$



!
*7./$(-80

9Ý1 (-8:

5

Ý

$+
 !!"
 .
6



.


6
'


Ý

$+
 !!"

$
'
Ý
# !



3 

# txtNam

( +


3!


/$(-;0

Ý1 (-;

8

!"
'
!
!.




#E-mail Address/$(-<0

+
(3
&


!

9Ý1(-<:

;




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

!!"
( +


3!






!





Ý
( +


 



&
$
6






.-. !!" 
$



!
*7./$(-70

9Ý1(-7:

<

Ý

$+
 !!"

$
'
Ý
#  !



3 

# txtEmail

( +


3!


/$(-0

Ý1 (-

(=>

( +
>



To help confirm that the user enters appropriate information, you can use the ASP.NET

validation control to check input forms for errors and to display messages if users enter incorrect

or incomplete responses. The following steps add a RequiredFieldValidator control that displays

an error message if the user leaves the TextBox control empty. The Required Field Validator

control allows you to make sure that the user has filled out a particular field of information

before submitting the Web Form back to the server.






!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

!"
'
.

!


!

$


'


( +


!







 !

 '!# 
#
( +

!
$# 


!!"
$


>
!




>
!
$#/$(-0

Ý1 (-



-!!"
( +
=>
!






!

'/$(-%0

Ý1 (-%

%

Ý

$+
 !!"

$
'
 ?$
#

!



=>
 

# Enter Name


$

/$(-)0

Ý1 (-)

)

Ý

$+
 !!"

$
'


>



#
#.

!"


>
.
#
 
!!"



!'#


'.&



'/$(-

*0

Ý1 (-*




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

( +
=>



Validation controls can be used to ensure that the data entered into a form field is in the

proper format. For example, standard numerical fields, such as phone number, e-mail address,

URL, ZIP code, and Social Security number, all have specific requirements²the user should not

enter a four-digit ZIP code, a Social Security number must have nine digits, and so on.

The ASP.NET RegularExpressionValidator confirms whether the user entered data that

matches. If the user does not enter the data in the proper format, an error message is displayed.

($ >

( +
>



In the Web form, the second ASP.NET TextBox control on the form requests the user¶s

e-mail address. To confirm that the information entered is a possible e-mail address, a

RegularExpressionValidator control can test the contents and verify that it matches the format of

a valid e-mail address, which follow the format of name@isp.com. The following steps

incorporate a RegularExpressionValidator control in the Web form.



!"
!.

!


!



$
'




3!


-!!"
( +
$ >
!





&


'/$(-50

Ý1 (-5






!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

Ý

$+
 !!"

$
'
 ?$


#

 !



$ >
 

# Enter a Valid E-

mail/$(-80

Ý1 (-8

%

Ý

$+
 !!"

$
'


>



#
#
.

!"


>
.
#
 
!!"



!'#


'.&



'/$(-

;0

Ý1 (-;0

)

Ý

$+
 !
!!"

$
'


>
 
#

!"


/

 #@0

$

 
$

!"Ý

-'


$





-

'!'

-

'
/$(-<0

Ý1 (-<

*

!"
4


!
$  
$




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c


( 
3



To test the validation controls, a Submit button is necessary. The validation controls

cannot be checked until the user has completed the form and pressed the Submit button. The

following steps add a Submit button to the form.



 !

'
!


.'





 !

 '!# 
!!"
( +
3



!

!



'/$(-70

Ý1 (-7

%

Ý

$+
 !!"

$
'



#


!$



#
 


 !

. 3

 
#÷ubmit


'


 


 
/$(-0

Ý1 (-




( +


After the Web form has been designed, it is important to test the ASP.NET Validation

controls to confirm the controls are performing as expected. The following steps test the

Validation controls.




 !!" &
&
!$






!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

+

+&.3.
 
!!".Ý



87

'$
./$(-0

Ý1 (-

%

,&
 

3!

#

Ý
 
 -(' 
#&- !#

!-

!"
 



#
&
$

$

#



#/$(-%0

Ý1 (-%

)


##
 

3!


!"
 


&



&
$



$
-
9ou.9ouremail.com

!"
 



#
&
$

$

#



&-/$(-)0

2+ Ý  3( >Ý (,
Ý

Expression Web provides an excellent environment for designing professional Web sites,

but Microsoft has also designed another product that works seamlessly with Expression Web.

Microsoft Visual Studio 2008 or 2010 enables you to open Expression Web pages directly into

the Visual Studio programming environment. Web developers can add powerful code to their

Web pages within Visual Studio using the languages of Visual Basic or C# (pronounced ³C-

sharp´) to take their sites to the next level. This functionality enables Web designers to use




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c 
 c
 
 c

 
c

Microsoft Expression Web to design an organization¶s Web site and then open that site (called a

project in Visual Studio) to add business logic, such as creating an online state tax computation,

or a reservation form that states availability.




!"#$%&$ ' !!()*)
 !! !!&++,"c





!

*c