ASP.NET Appendix Using ASP.NET Controls in Expression Web

elderlyscatteredInternet and Web Development

Jul 5, 2012 (5 years and 4 months ago)

490 views

Microsoft Expression Web
ASP.NET Appendix
Using ASP.NET Controls
in Expression Web
Introduction
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 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 per
-
sonal 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 functional
-
ity 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 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.
APP
2


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
To Start Expression Web and Open a Site
If you are using a computer to step through the project in this Appendix, and you
want your screen to match the fi gures, you should change your computer’s resolution to
1024
 768. For information about how to change a computer’s resolution, read Appendix F.
1
Start Expression Web.
2
On the File menu, click Open Site to display the Open Site dialog box.
3
Navigate to the data fi les for the Appendix.
4
Click the Wisteria folder, then click the Open button to open the site in Expression Web.
5
Click Task Panes on the menu bar, then click Reset Workspace Layout.
To Rename the Form Components
The following steps rename elements of the Wisteria form in preparation for adding the ASP.NET controls.
1

Double-click
directions.html in
the Folder List to
open the page.
2

Select the word,
Directions, in the
Title section, then
type
Order Form
.

Select the bulleted
directions and press
the
DELETE
key
(Figure A–1).
the word, Directions, is
replaced with new text
bullets are
deleted
Figure A–1
Expression Web ASP.NET Appendix
ASP.NET TextBox Controls
APP
3
To Create an .aspx Page
The following steps save the page as an .aspx page.
1

Click File on the menu bar,
then click Save As to open the
dialog box.

Type
form.aspx in the File name
text box (Figure A–2).

Click the Save button to save the
page as an .aspx page.
Save button
File name
text box
Figure A–2
ASP.NET TextBox Controls
An ASP.NET TextBox control looks very similar to a form Input (Text) 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 user provides the kind of information you
expect to receive. For example, if you are expecting a phone number and a user enters a
ZIP code, you end up with incorrect information. Validation ensures that the correct data
is entered by the user.
The .aspx File Format
To add ASP.NET controls to a Web page, you must fi rst save the site 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 fi lename is not changed to the extension
.aspx. If ASP.NET controls are added to a Web page the fi le, the page must have the
extension .aspx.
APP
4


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
To Create ASP.NET TextBox Controls
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.
1

Click Insert Table on
the Table menu to
open the Insert Table
dialog box.

Type
3
in the Rows
text box and
3
in the
Columns text box.

Click the Specify
width check box
to deselect it
(Figure A–3).

Click the OK button
to close the
dialog box.
OK button
Close button
Specify width
check box
Figure A–3
Rows
text box
Columns
text box
Expression Web ASP.NET Appendix
2

Click the Close button on the
Apply Styles task pane to close
the task pane and expand the
Toolbox.

On the Toolbox, scroll to the
ASP.NET Controls category and
then click the plus sign to expand
the list of ASP.NET controls and
click the plus sign to expand the
Standard controls (Figure A–4).
ASP.NET Controls
Standard
category
Figure A–4
3

Click in the fi rst cell in the table
to position the insertion point, if
necessary.

Type
Full Name
, then press
TAB

to move to the fi rst cell in the
second column (Figure A–5).
insertion point in
second column
Figure A–5
ASP.NET TextBox Controls
APP
5
plus signs change
to minus signs
when clicked
APP
6


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
4

Double-click the
ASP.NET TextBox con-
trol in the Toolbox to
place the TextBox in
the form (Figure A–6).
ASP.NET TextBox
control
ASP.NET TextBox
placed on form
Figure A–6
5

In the ASP.NET text box, position
the insertion point over the right
resize handle until it becomes a
two-headed arrow, click, then
drag until the ScreenTip reads
250 pixels wide (Figure A–7).
ScreenTip reads
250 pixels wide
Figure A–7
Expression Web ASP.NET Appendix
6

In the Tag Properties
panel, click the Show
alphabetized list
button to show an
alphabetized list of
properties.

In the Tag Properties
panel, click to the
right of the ID prop-
erty, select TextBox1,
and then type
txtName
to rename
the ASP.NET TextBox
control (Figure A–8).
Show alphabetized
list button
ID property
Tag Properties
panel
Figure A–8
E-mail Address
Figure A–9
7

Click the fi rst cell in the second
row in the table.

Type E-mail Address (Figure A–9).

Press
TAB
to move to the next cell.
ASP.NET TextBox Controls
APP
7
APP
8


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
8

Double-click the
ASP.NET TextBox
control in the
Toolbox to add the
control to the table.

In the ASP.NET text
box, position the
insertion point over
the right resize han-
dle until it turns into
a two-headed arrow,
click, then drag until
the ScreenTip reads
250 pixels wide
(Figure A–10).
TextBox control
ScreenTip reads
250 pixels wide
Figure A–10
ID property
Tag Properties
panel
Figure A–11
9

In the Tag Properties panel, click
to the right of the ID property,
select TextBox1, and then type
txtEmail to rename the ASP.NET
TextBox control (Figure A–11).
Expression Web ASP.NET Appendix
To Add a RequiredFieldValidator ASP.NET Validation Control
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 completed a
particular fi eld of information before submitting the Web form back to the server.
1

Click in the fi rst row
in the third column
of the table to
position the
insertion point.

Scroll the Toolbox,
if necessary, to
display the ASP.NET
Controls category,
and then click the
plus sign next to the
Validation controls
to expand the
Validation category
(Figure A–12).
plus sign changes
to minus sign
when clicked
ASP.NET
Controls
category
insertion point
in third column
Figure A–12
2

Double-click the
ASP.NET Required
FieldValidator
control in the
Toolbox to insert
the control in the
form (Figure A–13).
RequiredFieldValidator
control
RequiredFieldValidator
placed on form
Figure A–13
ASP.NET Validation Controls
APP
9
ASP.NET Validation Controls
Validation controls can be used to ensure that required data is entered into a form fi eld,
and that the data provided is in the proper format. For example, standard numerical fi elds,
such as phone number, e-mail address, URL, ZIP code, and Social Security number, all
have specifi c 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 RequiredFieldValidator displays an error message if a user leaves a
required form fi eld blank. The ASP.NET RegularExpressionValidator confi rms whether the
user entered data that matches a specifi c format. If the user does not enter the data in the
proper format, an error message is displayed.
APP
10


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
3

In the Tag Properties
panel, click to
the right of the
ErrorMessage prop-
erty to select the
text RequiredField
Validator, then type
* Enter Name
as
the error message
text (Figure A–14).
ErrorMessage
property
Figure A–14
4

In the Tag Properties
panel, click to
the right of the
ControlToValidate
property to display a
box arrow.

Click the
ControlToValidate
box arrow to display
the menu, then click
txtName to specify
that the form will
validate the txtName
fi eld (Figure A–15).
ControlToValidate
property set to
txtName
Figure A–15
Expression Web ASP.NET Appendix
To Add a RegularExpressionValidator ASP.NET Validation Control
In the Web form, the second ASP.NET TextBox control on the form requests the user’s e-mail address.
To confi rm that the information entered is an e-mail address, a RegularExpressionValidator control can test the
contents and verify that it matches the format of a valid e-mail address, in the format of name@isp.com. The
following steps incorporate a RegularExpressionValidator control in the Web form.
1

Click in the second
row in the third
column to position
the insertion point.

Double-click
the ASP.NET
RegularExpression
Validator control in
the Toolbox to add
the validator to the
form (Figure A–16).
RegularExpressionValidator
control
RegularExpressionValidator
on form
Figure A–16
2

In the Tag Properties
panel, click to
the right of the
ErrorMessage
property.

Select the
text Regular
ExpressionValidator,
then type
* Enter
a Valid E-mail

(Figure A–17).
ErrorMessage
property
Figure A–17
ASP.NET Validation Controls
APP
11
APP
12


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
3

In the Tag Properties
panel, click to
the right of the
ControlToValidate
property to display
the box arrow.

Click the
ControlToValidate
box arrow to display
the menu, then click
txtEmail to specify
that the form will
validate the txtEmail
fi eld (Figure A–18).
ControlToValidate
property set to
txtEmail
Figure A–18
4

In the Tag Properties
panel, scroll and
then click to
the right of the
Validation Expression
property.

Click the ellipsis
button (three dots,
displayed as …) to
open the Regular
Expression Editor
dialog box.

Click Internet e-mail
address from the list
of Standard expres-
sions to ensure that
the e-mail address
entered on the form
conforms to a stan-
dard e-mail format
(Figure A–19).
5

Click the OK button
to close the Regular
Expression Editor
dialog box.
ellipsis
button
OK button
Internet e-mail
address expression
ValidationExpression
property
Figure A–19
Expression Web ASP.NET Appendix
To Add a Submit Button
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.
1

Select the fi rst cell in
the bottom row of
the table.
2

Scroll the Toolbox,
if necessary, and
then double-click
the ASP.NET Button
control to place the
button on the form
(Figure A–20).
ASP.NET Button
control
Button control
placed on form
Figure A–20
3

In the Tag Properties panel, click
to the right of the Text property to
change the Text property to Submit.

Select the word, Button, type
Submit
as the text for the
button, and then press
ENTER

(Figure A–21).
Text
property
Figure A–21
ASP.NET Validation Controls
APP
13
renamed
button
APP
14


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
To Test the ASP.NET Form
After the Web form has been designed, it is important to test the ASP.NET Validation controls to confi rm the
controls are performing as expected. The following steps test the Validation controls.
1

On the File menu,
click Save to save the
changes.
2

Point to Preview in
Browser on the File
menu, then click
Windows Internet
Explorer 7.0 to
open the form.aspx
page in the browser
(Figure A–22).
Figure A–22
Expression Web ASP.NET Appendix
3

Leave the Name TextBox
control empty.

In the Enter E-mail Address fi eld,
type a valid e-mail address, such as
your school e-mail address.

Click the Submit button to display
the validation message stating
that you need to enter your name
(Figure A–23).
Submit button
validation
message
Figure A–23
ASP.NET Validation Controls
APP
15
APP
16


Expression Web ASP.NET Appendix
Using ASP.NET Controls in Expression Web
Expression Web and Visual Studio
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 power-
ful 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 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.
Submit button
e-mail address missing
the @ symbol is in
wrong format
validation
message
displayed
Figure A–24
4

Type your name in the Name
TextBox control.

Click the Submit button and
observe that the validation
message disappears.

Change the e-mail address to
you.youremail.com
.

Click the Submit button to display
the validation message stating
that you need to enter a valid
e-mail address (Figure A–24).