1. Open Catalog.aspx in Source View. You need to add two labels, named catalogTitleLabel and catalogDescriptionLabel, to the content part of the page. Feel free to use Design View to add them the way you like. Alternatively, use Source View to add the following HTML code, which also contains the mentioned labels:
8213592a117456a340854d18cee57603
<%@ Page Language="C#" MasterPageFile="~/BalloonShop.master"
AutoEventWireup="true" CodeFile="Catalog.aspx.cs" Inherits="Catalog"
Title="BalloonShop - The Product Catalog" %>
<asp:Content ID="content" ContentPlaceHolderID="contentPlaceHolder"
Runat="Server">
<asp:Label ID="catalogTitleLabel" CssClass="CatalogTitle"
Runat="server" />
<br />
<asp:Label ID="catalogDescriptionLabel" CssClass="CatalogDescription"
Runat="server" />
<br />
[Place List of Products Here]
</asp:Content>
2. Open Default.aspx in Source View and edit the content placeholder like this:
<asp:Content ID="content" ContentPlaceHolderID="contentPlaceHolder"
Runat="server">
<span class="CatalogTitle">Welcome to BalloonShop! </span>
<br />
<span class="CatalogDescription">This week we have a special price for these fantastic products: </span>
<br />
[Place List of Products Here]
</asp:Content>
3. Add the following styles to BalloonShop.css:
.CatalogTitle {
color: red;
font-family: 'Trebuchet MS', Comic Sans MS, Arial;
font-size: 24px;
font-weight: bold;
}
.CatalogDescription {
color: Black;
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
}
4. It’s time to write the code that populates the two labels with data from the database. Add the following code to the Catalog class, in Catalog.aspx.cs:
public partial class Catalog : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
PopulateControls();
}
// Fill the page with data private void PopulateControls() {
// Retrieve DepartmentID from the query string
string departmentId = Request.QueryString["DepartmentID"];
// Retrieve CategoryID from the query string
string categoryId = Request.QueryString["CategoryID"];
// If browsing a category...
if (categoryId != null) {
// Retrieve category details and display them
CategoryDetails cd = CatalogAccess.GetCategoryDetails(categoryId);
catalogTitleLabel.Text = cd.Name;
catalogDescriptionLabel.Text = cd.Description;
// Set the title of the page
this.Title = BalloonShopConfiguration.SiteName + " : Category : " + cd.Name;
}
// If browsing a department...
else if (departmentId != null) {
// Retrieve department details and display them DepartmentDetails dd =
CatalogAccess.GetDepartmentDetails(departmentId);
catalogTitleLabel.Text = dd.Name;
catalogDescriptionLabel.Text = dd.Description;
// Set the title of the page
this.Title = BalloonShopConfiguration.SiteName + " : Department : " + dd.Name;
} } }
5. Execute the project and click one of the departments. You should get something like Figure 4-19. Then do the same test for categories.
Figure 4-19. Displaying category and department details
How It Works: Displaying Department and Category Data
BalloonShop started looking almost like a real web site, didn’t it? In this exercise you started by adding some controls to Catalog.aspx that display the name and description of the selected department or category. You also added some text to Default.aspx that gets displayed on the main page of your catalog. Both Catalog.aspx and Default.aspx contain the [Place list of products here] text; you’ll replace this text with the actual list of products in the next section.
The work of displaying department and category data is done in the PopulateControls method in
Catalog.aspx.cs. To determine whether the visitor is browsing a department or a category, the method needs to check out the values of CategoryID and DepartmentID in the query string, so it saves the values of these parameters as local variables:
// Retrieve DepartmentID from the query string
string departmentId = Request.QueryString["DepartmentID"];
// Retrieve CategoryID from the query string
string categoryId = Request.QueryString["CategoryID"];
Next it determines whether a value has been supplied for CategoryID; if it hasn’t, CategoryID will be NULL.
Otherwise, if CategoryId has a value, its details are obtained using the CatalogAccess.GetCategoryDetails method of the business tier. These details come packed as a CategoryDetails object:
// If browsing a category...
if (categoryId != null) {
// Retrieve category details and display them
CategoryDetails cd = CatalogAccess.GetCategoryDetails(categoryId);
catalogTitleLabel.Text = cd.Name;
catalogDescriptionLabel.Text = cd.Description;
}
If CategoryId is NULL, you could assume the visitor is browsing a department and display the department’s data (Catalog.aspx is loaded only if the visitor has clicked on a department or a category). However, for safety, you do an extra check on DepartmentId’s value, and if it’s not NULL, loads its data from the business tier:
// If browsing a department...
else if (departmentId != null) {
// Retrieve department details and display them
DepartmentDetails dd = CatalogAccess.GetDepartmentDetails(departmentId);
catalogTitleLabel.Text = dd.Name;
catalogDescriptionLabel.Text = dd.Description;
}