WEB460 Lab 2 of 7: Creating and Using Master Pages

$ 12

WEB460 Lab 2 of 7: Creating and Using Master Pages

Scenario/Summary
In this Lab, 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
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.

Lab Steps
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 Lab 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.
1. To start this week’s project, create a new Empty Web Application project.
2. Copy the four files from last week’s Lab 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)
3. 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.
1. Right-click on the name of your project and select Add => Add New Item …
2. Select Master Page as the type of item to add. Be sure that Place code in separate file. is checked.
3. 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.
1. 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 <head> tag so that it matches the code below:
<head runat=”server”>
<title>WEB460 Book Store</title>
<asp:ContentPlaceHolder id=”HeadPlaceHolder” runat=”server”>
</asp:ContentPlaceHolder>
</head>
2. Next we create the page template in the <body> 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 <body> of your master page so that it looks like the following block of code:
<body>
<form id=”form1″ runat=”server”>
<table style=”padding: 10px; border: 1px solid black;”>
<tr style=”background-color:lightcyan; text-align: center;”>
<td colspan=”2″>
<!– page header –>
<h1>WEB 460 Book Store</h1>
<h2>Providing you 100% more than 360 degrees</h2>
<!– Label for content pages to display user message –>
<strong><span style=”color:red;”>
<asp:Label ID=”lblUserFeedBack” Runat=”server”>Welcome Traveler!</asp:Label>
</span></strong>
</td>
</tr>
<tr style=”vertical-align: top;”>
<td>
<!– Left content area –>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ Runat=”server”>
</asp:ContentPlaceHolder>
</td>
<td>
<!– right content area –>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder2″ Runat=”server”>
</asp:ContentPlaceHolder>
</td>
</tr>
<tr style=”background-color:lightgrey; text-align: center;”>
<td colspan=”2″>
<!– page footer –>
Copyright DeVry University<br />
<strong>User’s GUID:
<asp:Label ID=”lblGUID” Runat=”server” /></strong>
</td>
</tr>
</table>
</form>
</body>

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.
1. 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:
public Label UserFeedBack
{
get { return lblUserFeedBack; }
set { lblUserFeedBack = value; }
}
2. To provide a tool we can use for security in the future, we want to display the user GUID (globally unique identifier) for this page call. We only want to generate the GUID the first time the page is loaded (not on postback). We can accomplish this by adding the following code to the master page’s Page_Load method:
if (!Page.IsPostBack)
{
lblGUID.Text = System.Guid.NewGuid().ToString();
}

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 <head>, <body>, and <form> tags, we do not need those in our content page, so we will be removing them as part of this step. We also must map the content on this page to the ContentPlaceHolder controls on the master page.
1. We begin by adding MasterPageFile=”~/Web460Store.master” to the page directive to indicate that this page references our master page:
<%@ Page Language=”C#” AutoEventWireup=”true” MasterPageFile=”~/Web460Store.master” CodeFile=”pgCheckOut.aspx.cs” Inherits=”pgCheckOut” %>
2. So we have access controls the master page has exposed to us, such as the Label for user feedback. We need to add the following directive next:
<%@ MasterType VirtualPath =”~/Web460Store.master” %>
3. We can then remove the <!DOCTYPE>, <html>, and <head> tags because we will be using the ones defined in the master page. Also remove the <body> and <form> tags, but leave the content.
4. Next we map the body content to the two ContentPlaceHolder controls on the master page. The customer name, address, and phone number should be in the left content area (ContentPlaceHolder1) and the credit card information in the right content area ( ContentPlaceholder2 ). We bracket the content for each with an ASP.NET Content control.
5. Before the Label control for the customer’s first name, place the line:
<asp:Content ID=”ContentArea1″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”>
6. Just after the line for the phone number TextBox control, close the first content area with the line:
</asp:Content>
7. On the next line, we begin the second content area the same way as the first begins:
<asp:Content ID=”ContentArea2″ ContentPlaceHolderID=”ContentPlaceHolder2″ Runat=”Server”>
8. We close the second content area at the end of the file, after the submit button:
</asp:Content>
At this point, the pgCheckOut.aspx design view should look similar to the following:

STEP F: Update the Master Page User Feedback Label
On pgCheckOut.aspx we want the user to enter billing information. We can modify the master page Label lblUserFeedback by updating the master page’s UserFeedBack property we setup earlier. So this happens when the page is loaded, making the Page_Load method in pgCheckOut.aspx.cs look like this:
protected void Page_Load(object sender, EventArgs e)
{
Master.UserFeedBack.Text = “Please enter billing information.”;
}

STEP G: Modify pgConfirm to Use the Site Master Page
In this step, we transform the confirmation page pgConfirm to use the website master page in a similar way to how we modified pgCheckOut.
First, modify pgConfirm.aspx:
1. Remove unneeded HTML tags and modify the page directives as necessary.
2. The left content area should contain the customer’s name and address.
3. The right content area should contain the customer credit card information and the Submit Order button.
4. Remove the status label lblStatus because we will use the master page’s user feedback Label.
Then, because we removed lblStatus, we need to modify pgConfirm.aspx.cs:
5. When the page first loads, it should display the user feedback message:
Please confirm your billing information.
6. After the user presses the Submit Order button, the user feedback should be:
Your order has been submitted for processing.
7. If there is an exception thrown by PreviousPage.IsCrossPagePostBack, it should display the message:
Sorry, there was an error processing your request.
When the application is rTuonpning, pgConfirm should appear similar to the following:

STEP H: Finalize Your Lab
1. Save your work!
2. Test it!
3. Make changes as appropriate until it works.
4. Remember to add comments for each step being performed.

992 in stock

Description

WEB460 Lab 2 of 7: Creating and Using Master Pages

Scenario/Summary
In this Lab, 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
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.

Lab Steps
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 Lab 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.
1. To start this week’s project, create a new Empty Web Application project.
2. Copy the four files from last week’s Lab 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)
3. 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.
1. Right-click on the name of your project and select Add => Add New Item …
2. Select Master Page as the type of item to add. Be sure that Place code in separate file. is checked.
3. 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.
1. 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:

WEB460 Book Store



2. 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:

WEB 460 Book Store

Providing you 100% more than 360 degrees



Welcome Traveler!






Copyright DeVry University

User’s GUID:

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.
1. 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:
public Label UserFeedBack
{
get { return lblUserFeedBack; }
set { lblUserFeedBack = value; }
}
2. To provide a tool we can use for security in the future, we want to display the user GUID (globally unique identifier) for this page call. We only want to generate the GUID the first time the page is loaded (not on postback). We can accomplish this by adding the following code to the master page’s Page_Load method:
if (!Page.IsPostBack)
{
lblGUID.Text = System.Guid.NewGuid().ToString();
}

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

tags, we do not need those in our content page, so we will be removing them as part of this step. We also must map the content on this page to the ContentPlaceHolder controls on the master page.
1. We begin by adding MasterPageFile=”~/Web460Store.master” to the page directive to indicate that this page references our master page:
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Web460Store.master" CodeFile="pgCheckOut.aspx.cs" Inherits="pgCheckOut" %>
2. So we have access controls the master page has exposed to us, such as the Label for user feedback. We need to add the following directive next:
<%@ MasterType VirtualPath ="~/Web460Store.master" %>
3. We can then remove the , , and tags because we will be using the ones defined in the master page. Also remove the and

tags, but leave the content.
4. Next we map the body content to the two ContentPlaceHolder controls on the master page. The customer name, address, and phone number should be in the left content area (ContentPlaceHolder1) and the credit card information in the right content area ( ContentPlaceholder2 ). We bracket the content for each with an ASP.NET Content control.
5. Before the Label control for the customer’s first name, place the line:

6. Just after the line for the phone number TextBox control, close the first content area with the line:

7. On the next line, we begin the second content area the same way as the first begins:

8. We close the second content area at the end of the file, after the submit button:

At this point, the pgCheckOut.aspx design view should look similar to the following:

STEP F: Update the Master Page User Feedback Label
On pgCheckOut.aspx we want the user to enter billing information. We can modify the master page Label lblUserFeedback by updating the master page’s UserFeedBack property we setup earlier. So this happens when the page is loaded, making the Page_Load method in pgCheckOut.aspx.cs look like this:
protected void Page_Load(object sender, EventArgs e)
{
Master.UserFeedBack.Text = “Please enter billing information.”;
}

STEP G: Modify pgConfirm to Use the Site Master Page
In this step, we transform the confirmation page pgConfirm to use the website master page in a similar way to how we modified pgCheckOut.
First, modify pgConfirm.aspx:
1. Remove unneeded HTML tags and modify the page directives as necessary.
2. The left content area should contain the customer’s name and address.
3. The right content area should contain the customer credit card information and the Submit Order button.
4. Remove the status label lblStatus because we will use the master page’s user feedback Label.
Then, because we removed lblStatus, we need to modify pgConfirm.aspx.cs:
5. When the page first loads, it should display the user feedback message:
Please confirm your billing information.
6. After the user presses the Submit Order button, the user feedback should be:
Your order has been submitted for processing.
7. If there is an exception thrown by PreviousPage.IsCrossPagePostBack, it should display the message:
Sorry, there was an error processing your request.
When the application is rTuonpning, pgConfirm should appear similar to the following:

STEP H: Finalize Your Lab
1. Save your work!
2. Test it!
3. Make changes as appropriate until it works.
4. Remember to add comments for each step being performed.

Reviews

There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.