iLab Overview

Scenario/Summary

In this iLab, you create a master page for our bookstore website and then modify the checkout and order confirm pages from last week’s lab to use the master page.

Deliverables

NOTE
Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.

(See the Syllabus section “Due Dates for Assignments & Exams” for due dates.)

The deliverables for this week’s lab are the following:

pgCheckOut.aspx
pgCheckOut.aspx.cs
pgConfirm.aspx
pgConfirm.aspx.cs
Web460Store.master
Web460Store.master.cs
web.config
Please zip and submit the entire web project folder to the assignment Dropbox.
Required Software

Visual Studio 2012

Set up the Visual Studio development environment and test the web server on your machine. More information on how you can get the most recent version of VS is found in Course Home.

Access the software at https://lab.devry.edu.STEP A: Create a New Web Site Project

In this step, we set up a new project and copy the files from the Week 1 iLab into it. This allows us to begin our lab this week where we left off last week and to add common elements to both pages.

To start this week’s project, create a new Empty Web Application project.

Copy the four files from last week’s iLab into the folder for this new project. Be careful not to move the files. We want to work on a copy of last week’s lab and leave the original untouched. The website folder should have the following files:

pgCheckOut.aspx
pgCheckOut.aspx.cs
pgConfirm.aspx
pgConfirm.aspx.cs
web.config
web.Debug.config ( optional: it depends on the version of Visual Studio you are using)
Set pgCheckOut.aspx as the start page and test your application. It should perform just as it did last week.

STEP B: Create a Master Page

In this step, we add a master page to our project.

Right-click on the name of your project and select Add => Add New Item …

Select Master Page as the type of item to add. Be sure that Place code in separate file. is checked.

Name the master page Web460Store.master and click OK to create the maser page for our site.

STEP C: Design Your Master Page

Our master page contains elements that we want common to all pages on our website, such as the header, the footer, and two side-by-side content areas. We mark areas that content pages can fill with the ContentPlaceHolder tag.

We also want a Label control that our content pages can modify to display messages directed to the user. Making the Label accessible to content pages requires editing the C# code for the master page, which we do in the next step.

View the source for Web460Store.master. We first set the title and a content area in the head of the master page. Make any changes necessary to the tag so that it matches the code below:

Next we create the page template in the of the master page. We use a table to assist with the layout. The first row of the table is the header for our page, displaying the company name and motto. It also contains the Label we will use to send messages to the user. The second table row has two content areas side by side for the website pages to place content and additional controls. The last row of the table is the page footer.

Edit the of your master page so that it looks like the following block of code:
STEP D: Expose the Label Control to Content Pages

In this step, we modify the C# code file for our master page, Web460Store.master.cs, to modify text displayed on the Label controls.

We need to establish set properties for the Label lblUserFeedback so that our content pages can change the message displayed to the user. Add the following method to the class Web460Store:
STEP E: Modify pgCheckOut to Use Our Master Page

In this step, we modify pgCheckOut.aspx to use the master page we created earlier. Since the master page contains , , and