ASP.NET Hands-OnLesson 02

By Susan L. Miertschin

CHANGE IS GOOD?Our Development Environment Changes Now

Use a Text Editor?

Notepad – bare bones? Notepad – not really feasible with server-

side development in ASP.Net Visual Studio and its text editor – much

better – essential, really

Getting Started with Visual Studio – Our Development Environment Changes!

Open Visual StudioFile – New Project

Getting Started with Visual Studio – What Type of Project?

ASP.NET Web Application Project – You may name it: ASP.NET_HandsOn_02

Getting Started with Visual Studio – What’s Different About a Web App???

In Solution Explorer, observe the .aspx extension files

These become the web pages

.aspx extension informs server to parse for server-side execution prior to sending page to client

In Source view of Default.aspx, observe:

XHTML markup

Deitel’s ASP.NET Exercise on Validation Controls – Edit Default. aspx

In Design view, create the interface shown in Figure 25.17

Add a Validator Control

From the toolbox, drag a Required Field Validator Control, placing it beside the text box for the name

Set Properties for the Validator Control

In the Properties window, set values for various properties of the Required Field Validator control

ID = nameInputValidator ControlToValidate = txtName

(select from dropdownlist in Properties Window – so that the ControlToValidate property value matches the name of the name textbox control you added when you designed the interface)

Display = Dynamic ErrorMessage = “You must

enter your name”

Add More Validator Controls

From the toolbox, drag two more Required Field Validator Controls, placing each beside the text boxes for the email address and phone number, respectively. The controls will force all text boxes to have content when a PostBack of the page occurs.

Set Properties for the Validator Controls

In the Properties window, set values for various properties of the Required Field Validator controls you added

ID = emailInputValidator ControlToValidate=txteMail Display=Dynamic ErrorMessage=“Please enter

your email address.”

ID = phoneInputValidator ControlToValidate=txtPhone Display = Dynamic ErrorMessage = “Please enter

your phone number.”

Run the Application

Right click on Default.aspx in Solution Explore and choose Set as Start Page

Save all Build the application Run w/o Debugging Place the cursor in a textbox if it

isn’t already in one If you hit Enter without typing

anything in the text box, then the error message will appear prompting you to fill in the text box

Add a Different Validator Control

From the toolbox, drag a Regular Expression Field Validator Control, placing it beside the text box for the email address

Regular Expressions

A pattern describing a certain amount and layout of text The name comes from mathematical

theory that is the basis for the concept The term “regular expression” is often

abbreviated as regex or regexp

http://www.regular-expressions.info/tutorial.html

Regular Expression

Just when you thought you were THROUGH learning syntax!!!!

A regular expression is a pattern that matches some text \b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b This pattern represents any email address

Regular Expression Info

Go to: http://www.regular-expressions.info/regexbuddy/email.html To see how the pattern expressed by the

regular expression translates to any email address

Set Properties for the Regular Expression Validator Controls

Use the Deitel book as your guide

The property that contain the expression is ValidationExpression

There is a dropdown list of standard regular expressions you can use

Similarly for the phone number validator

Run the Application

Save all Build the application Run w/o Debugging Place the cursor in a textbox if it

isn’t already in one Hit the Enter key after entering

text in a textbox to see the validator controls work

Continue with Deitel Exercise

The Deitel exercise includes a submit button and a label that collects the validated and submitted information It is worth some extra time to get this part

of the exercise working as well Use a Button control to implement the

Submit button The code that needs to be written is in

Figure 25.18

Output After Submit Button and Code Added

View the Page Source to See All the Code the Web Server Generates

All the code that you see in the Page Source is not visible in the Design View of Default.aspx in Visual Studio

Why? Because the Web Server is now

participating in the processing of the web application

The user (innocently) request a page

The server pre-processes what it has in the web application and generates the code + markup+ content that is sent to the browser

Inside of script tags you will see JavaScript that you didn’t write

You will not see ASP.NET code that you did write

Time to Publish?

Uploading the contents of your Web application to the Web server is called publishing

Save all and Build!!!!! DO NOT FORGET TO BUILD IMMEDIATELY PRIOR TO PUBLISH !!!!!!

Choose Publish from the Build menu

Change the Publish Method to FPSE (Front Page Server Extensions)

Publish Your Web App

A subweb named ASP.NET_HandsOn_02 has been created for you under your username web folder

Type the full url as the Target Location:

http://cot-cis2336-01.cougarnet.uh.edu/secnnnnn/username/ASP.NET_HandsOn_02

http://cot-cis2336-01.cougarnet.uh.edu/secnnnnn/username/ASP.NET_HandsOn_02

See the Results (Hopefully You Won’t See Either of These)

If You Do See an Error

It may be because you forgot to build prior to publish

Try the Save All –Build – Publish routine again

Then email me if the error persists

See the Results

ASP.NET Hands-OnLesson 02

By Susan L. Miertschin