Unit 1 Lab Answer Key: Creating a

Web Application

Exercise 1: Creating a New Web Application

 Task 1: Create a new file-system Web site
1. Click Start, point to All Programs, point to Microsoft Visual Studio 2005,
and then click Microsoft Visual Studio 2005.
2. If you are prompted to choose the default environment settings, click
General Development Settings, and then click Start Visual Studio.
3. On the File menu, point to New and then click Web Site.
4. In the Templates pane, click ASP.NET Web Site.
5. In the Location list, click File System and then type
E:\Labfiles\Adventure-Works.
6. In the Language list, click one of the following:
 Visual C#
 Visual Basic
7. Click OK.

In the Resource Toolkit, see the resources “Types of Web Sites in Visual
Web Developer” and “How to: Create a File-System Web Site.”

 Task 2: Design the Default.aspx Web page

1. On the Website menu, click Add Existing Item.
2. Browse to the E:\Labfiles\Starter folder and then select the following files:
 AdvWorksLogo.gif
 AdvWorksSideBar.gif
 BlueBike.gif
 RedBike.gif
3. In the Add Existing Item dialog box, click Add.
4. In Solution Explorer, click Default.aspx.
5. On the View menu, click Designer.

In the Resource Toolkit, see the resource “Sample Page Design.”

6. On the View menu, click Toolbox.

Unit 1 Lab Answer Key: Creating a Web Application

7. In the Toolbox, expand the HTML section and then drag a Table control
onto the Default.aspx page.
8. On the View menu, click Properties Window.
9. In the Properties window, click the Width property and then type 100%
10. In the Design window, right-click the table, point to Insert, and then click
Row Below.
11. Select the three cells in the first row of the table. On the Layout menu, click
Merge Cells.
12. Select the newly merged cell. In the Properties window, click the Align
property and then type right in the combo box.
13. Click the leftmost cell in the second row. In the Properties window, click the
Style property and then type width:10%
14. Click the rightmost cell in the second row. In the Properties window, click
the Style property and then type width:10%
15. Select the three cells in the fourth row of the table, and then on the Layout
menu, click Merge Cells.
16. Select the newly merged cell. In the Properties window, click the Align
property and then type right in the combo box.
17. Drag an Image control from the Standard section of the Toolbox to the
first row of the table.
18. In the Properties window, click the ImageUrl property and then type
AdvWorksLogo.gif
19. Drag a Label control from the Standard section of the Toolbox to the
leftmost cell in the second row.
20. In the Properties window, click the Text property and then type Home
21. In the Properties window, expand the Font property, click the Names
property, and then type Verdana
22. Drag a Hyperlink control from the Standard section of the Toolbox to the
second cell in the second row.
23. In the Properties window, click the Text property and then type Contact Us
24. In the Properties window, click the NavigateUrl property and then type
Contact.aspx
25. In the Properties window, expand the Font property, click the Names
property, and then type Verdana
26. Drag an Image control from the Standard section of the Toolbox to the
leftmost cell in the third row of the table.
27. In the Properties window, click the ImageUrl property and then type
AdvWorksSideBar.gif
28. Click the second cell in the third row. In the Properties window, click the
VAlign property and then type top in the combo box.
29. Type Welcome to Adventure-Works.com and then select the text you just
typed.
30. On the Formatting toolbar, click Heading 4 <H4> in the Block Format
drop-down list.
 Unit 1 Lab Answer Key: Creating a Web Application 3

31. On the Formatting toolbar, click Verdana in the Font Name drop-down
list.
32. Drag an Image control from the Standard section of the Toolbox to the
rightmost cell in the third row of the table.
33. In the Properties window, click the (ID) property and then type BikeImage
34. Drag a Label control from the Standard section of the Toolbox to the
fourth row of the table.
35. In the Properties window, click the Text property and then type Copyright
Adventure Works 2005

In the Resource Toolkit, see the resource “How to: Create a Simple Web Page
in Visual Web Developer.”

 Task 3: Add and design a new Contact.aspx Web page

1. On the Website menu, click Add New Item.
2. In the Templates pane, click Web Form.
3. In the Name text box, type Contact.aspx. Clear the Place code in separate
file check box and then click Add.
4. Click the Default.aspx tab above the Design window and then select the
table.
5. On the Edit menu, click Copy.
6. Click the Contact.aspx tab above the Design window, and then on the View
menu, click Designer.
7. On the Edit menu, click Paste.
8. On the Web form, select the text Welcome to Adventure-Works.com and
then press DELETE.
9. Drag a Label control from the Standard section of the Toolbox to the
second cell in the third row of the table.
10. In the Properties window, click the (ID) property and then type
ContactDetails
11. In the Properties window, click the Text property and then type
Contact us at: <a href='mailto:info@Adventure-Works.com'>
info@Adventure-Works.com</a>
12. On the Web form, click the Contact Us hyperlink and then press DELETE.
13. Drag a Label control from the Standard section of the Toolbox to the
second cell in the second row of the table.
14. In the Properties window, click the Text property and then type Contact Us
15. In the Properties window, expand the Font property, click the Names
property, and then type Verdana
16. On the Web form, click the Home label and then press DELETE.
17. Drag a Hyperlink control from the Standard section of the Toolbox to the
leftmost cell in the second row.
18. In the Properties window, click the Text property and then type Home
19. In the Properties window, click the NavigateUrl property and then type
Default.aspx
Unit 1 Lab Answer Key: Creating a Web Application

20. In the Properties window, expand the Font property, click the Names
property, and then type Verdana
21. On the Web form, click the image control in the rightmost cell of the third
row and then press DELETE.
22. Drag a Button control from the Standard section of the Toolbox to the
rightmost cell in the third row.
23. In the Properties window, click the Text property and then type Show More
Contact Details

In the Resource Toolkit, see the resource “How to: Create a Simple Web Page
in Visual Web Developer.”

 Task 4: Implement default event handling

1. Double-click the Show More Contact Details button on the Contact.aspx
Web form.
An event procedure for the Click event of the button is created.
2. With the cursor placed inside the event procedure, on the Edit menu, click
Insert File As Text.
3. In the Files of type list, click Text Files (*.txt).
 If you are working with Visual Basic, browse to E:\Labfiles\Starter\VB
and then click VB_ButtonClick.txt.
 If you are working with Visual C#, browse to E:\Labfiles\Starter\CS and
then click CS_ButtonClick.txt.
4. Click Open.
5. Click the Default.aspx tab above the Design window.
6. Double-click the form (outside of the table).
An event procedure for the Page_Load event of the form is created.

In the Resource Toolkit, see the resource “ASP.NET Web Page Code
Model.”

7. With the cursor placed inside the Page_Load event procedure, on the Edit
menu, click Insert File As Text.
8. In the Files of type list, click Text Files (*.txt).
 If you are working with Visual Basic, browse to E:\Labfiles\Starter\VB
and then click VB_PageLoad.txt.
 If you are working with Visual C#, browse to E:\Labfiles\Starter\CS,
and then click CS_ PageLoad.txt.
9. Click Open.
The code loads either an image of a red bike or an image of a blue bike
based on a random number generator.

Exercise 2: Configuring and Building a Web Application

 Task 1: Build and run the Web application
1. Click the Default.aspx tab above the Design window.
 Unit 1 Lab Answer Key: Creating a Web Application 5

2. On the Website menu, click Set As Start Page and then press F5.
3. In the Debugging Not Enabled message box, click Run without
debugging and then click OK.
Microsoft Internet Explorer will open, displaying the Web page.
4. Note the color of the bike image. Click the Contact Us hyperlink, and then
click Show More Contact Details to show the contact details. Click Hide
Contact Details. Click the Home hyperlink to return to the home page.
5. Close Internet Explorer.

In the Resource Toolkit, see the resource “How to: Build a Web Application.”

 Task 2: Manage the default web.config file for the Web server
1. On the Start menu, point to All Programs and then point to Microsoft
Visual Studio 2005.
2. On the Microsoft Visual Studio 2005 menu, right-click Microsoft Visual
Studio 2005 and then click Run as.
3. Select The following user option and then type Administrator in the User
name text box.
4. Type Pa$$w0rd in the Password text box and then click OK.
5. If you are prompted to choose the default environment settings for
Microsoft Visual Studio® 2005, click General Development Settings, and
then click Start Visual Studio.
6. On the File menu, point to Open and then click File.
7. Browse to
C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\CONFIG, and then
double-click web.config.
8. Locate the <system.web> element and then type
<customErrors mode="On" /> as a child element.
9. On the File menu, click Save web.config.
10. Switch to the first instance of Visual Studio 2005.
11. Click the Contact.aspx tab above the Design window.
12. Making sure the cursor is not inside the <script> element, on the View
menu, click Designer.
13. Double-click the form background (outside of the table).
An event procedure for the Page_Load event of the page is created.
14. With the cursor inside the event procedure, on the Edit menu, click Insert
File As Text.
15. In the Files of type list, click Text Files (*.txt).
 If you are working with Visual Basic, browse to E:\Labfiles\Starter\VB
and then click VB_Exception.txt.
 If you are working with Visual C#, browse to E:\Labfiles\Starter\CS and
then click CS_ Exception.txt.
16. Click Open.
Unit 1 Lab Answer Key: Creating a Web Application

This code intentionally causes a run-time error by generating an exception.

17. Press CTRL+F5 to start the application without debugging.
18. Click the Contact Us hyperlink.
The generic Run-time Error page appears. This page does not contain any
information about the specific error that occurred.
19. Close Internet Explorer.

In the Resource Toolkit, see the resource “<customErrors> Element.”

 Task 3: Add and manage the web.config file for the Web application
1. In the Solution Explorer window, if Visual Studio 2005 has added a file
called web.config, double-click it and proceed to step 4. If it hasn’t, proceed
to step 2.
2. On the Website menu, click Add New Item.
3. In the Templates pane, click the Web Configuration File item and then
click Add.
A new Web.config file will be added to your project and will appear in
Solution Explorer and the Design window.
4. Locate the <system.web> element, and then type
<customErrors mode="Off" /> as a child element.
5. Press CTRL+F5 to run the application.
6. Click the Contact Us hyperlink.
The Test Error page appears. This page contains information about the
specific code that caused the error.
7. Close Internet Explorer.

In the Resource Toolkit, see the resource “<customErrors> Element.”

 Task 4: Enable debugging with Visual Studio 2005

1. Press F5 to run the application. In the Debugging Not Enabled message
box, click Modify the Web.config file to enable debugging and then click
OK.
2. Click the Contact Us hyperlink.
A run-time error occurs and the debugger starts. The line that has caused the
run-time error is highlighted. You can step through the code and determine
the cause of the problem.
3. On the Debug menu, click Stop Debugging.

In the Resource Toolkit, see the resource “<compilation> Element.”