ASP.NET HandsOn 02smiertsc/2336itec/ASP.NET_HandsOn_02.pdfUse a Text Editor? Notepad – bare bones?...
Transcript of ASP.NET HandsOn 02smiertsc/2336itec/ASP.NET_HandsOn_02.pdfUse a Text Editor? Notepad – bare bones?...
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