1. Create a new Web User Control in the UserControls folder. In Solution Explorer, right-click the UserControls folder, and then choose Add New Item. Select the Web User Control template, and set CategoriesList.ascx (or simply CategoriesList) as its name. Make sure Place code in separate file is checked and click Add.
2. Set the properties on the DataList object as shown in Table 4-3.
Table 4-3. Setting the DataList Properties
Property Name Value
(ID) list
Width 200px
CssClass CategoryListContent
HeaderStyle-CssClass CategoryListHead
3. Switch to Design View, right-click the DataList, and select Edit Template ➤ Header and Footer Templates. Type Choose a Category in the Header template.
4. Right-click the DataList and select Edit Template ➤ Item Templates. Add a HyperLink control from the Standard tab of the toolbox to the ItemTemplate. Set the Text property of the HyperLink to an empty string.
5. Switch to Source View. The code auto-generated by Visual Studio for the hyperlink should look like this:
<asp:DataList ID="list" runat="server" CssClass="CategoryListContent"
Width="200px">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"></asp:HyperLink>
</ItemTemplate>
<HeaderTemplate>
Choose a Category </HeaderTemplate>
<HeaderStyle CssClass="CategoryListHead" />
</asp:DataList>
6. Modify the code of the <ItemTemplate> element like this:
<ItemTemplate>
»
<asp:HyperLink ID="HyperLink1"
Runat="server"
NavigateUrl='<%# "../Catalog.aspx?DepartmentID=" + Request.QueryString["DepartmentID"] +
"&CategoryID=" + Eval("CategoryID") %>' Text='<%# Eval("Name") %>'
ToolTip='<%# Eval("Description") %>'
CssClass='<%# Eval("CategoryID").ToString() ==
Request.QueryString["CategoryID"] ?
"CategorySelected" : "CategoryUnselected" %>'>>
</asp:HyperLink>
«
</ItemTemplate>
7. Add a Label control after the DataList with no text. When the categories list is populated with data, you’ll set the text of this label to <br/> for cosmetic reasons.
<asp:Label ID="brLabel" runat="server" Text="" />
Switching to Design View should reveal a window such as the one in Figure 4-17.
Figure 4-17. CategoriesList.ascx in Design View
8. Add the following styles to BalloonShop.css:
.CategoryListHead {
border-right: #ea6d00 1px solid;
border-top: #ea6d00 1px solid;
border-left: #ea6d00 1px solid;
border-bottom: #ea6d00 1px solid;
background-color: #ef8d0e;
font-family: Verdana, Arial;
font-weight: bold;
font-size: 10pt;
color: #f5f5dc;
text-align: center;
}
.CategoryListContent {
border-right: #ea6d00 1px solid;
border-top: #ea6d00 1px solid;
border-left: #ea6d00 1px solid;
border-bottom: #ea6d00 1px solid;
background-color: #f8c78c;
text-align: center;
}
a.CategoryUnselected {
font-family: Verdana, Arial;
font-weight: bold;
font-size: 9pt;
color: #cd853f;
line-height: 25px;
padding-right: 5px;
padding-left: 5px;
text-decoration: none }
a.CategoryUnselected:hover {
color: #d2691e;
padding-right: 5px;
padding-left: 5px }
a.CategorySelected {
font-family: Verdana, Arial;
font-weight: bold;
font-size: 9pt;
color: #a0522d;
line-height: 25px;
padding-right: 5px;
padding-left: 5px;
text-decoration: none }
9. Now open the code-behind file of the user control (CategoriesList.ascx.cs) and modify the Page_Load event handler like this:
protected void Page_Load(object sender, EventArgs e) {
// Obtain the ID of the selected department
string departmentId = Request.QueryString["DepartmentID"];
// Continue only if DepartmentID exists in the query string if (departmentId != null)
{
// Catalog.GetCategoriesInDepartment returns a DataTable
// object containing category data, which is displayed by the DataList list.DataSource =
CatalogAccess.GetCategoriesInDepartment(departmentId);
// Needed to bind the data bound controls to the data source list.DataBind();
// Make space for the next control brLabel.Text = "<br />";
} }
10. Open BalloonShop.master in Design View. Drag CategoriesList.ascx from Solution Explorer and drop it near the text that reads “List of Categories.” Delete the text so that only the user control is there.
11. Execute the project, select a department, and then select a category. You should see something like Figure 4-18.
Figure 4-18. BalloonShop with a brand new list of categories
How It Works: The CategoriesList User Control
The important detail to know about CategoriesList is what happens when you click a category link: Catalog.aspx is reloaded, but this time, CategoryID is appended to the query string. In some of the other controls you’ll create, you’ll check for CategoryID in the query string—when it’s present, this indicates that the visitor is browsing a category.
CategoriesList works like DepartmentsList, they are both used in the Master Page, and they both get loaded at the same time. However, when CategoriesList gets loaded and its Page_Load function executes, the code checks to determine whether a department was selected:
void Page_Load(object sender, EventArgs e) {
// Obtain the ID of the selected department
string departmentId = Request.QueryString["DepartmentID"];
// Continue only if DepartmentID exists in the query string if (departmentId != null)
{ ...
...
...
If the DataList isn’t populated with data, it doesn’t show at all. This is important, because if the visitor is on the main page and a department was not selected, no categories should show up.
On the other hand, if a department was selected, the business tier GetCategoriesInDeparment method of the CatalogAccess class is called to obtain the list of categories in that department:
// Continue only if DepartmentID exists in the query string if (departmentId != null)
{
// Catalog.GetCategoriesInDepartment returns a DataTable object // containing category data, which is displayed by the DataList list.DataSource =
CatalogAccess.GetCategoriesInDepartment(departmentId);
// Needed to bind the data bound controls to the data source list.DataBind();
// Make space for the next control brLabel.Text = "<br />";
}
■Note A final note about CategoriesList.ascx is that you’re free to use it in other pages or even for other user controls. For example, you might want to add CategoriesList inside the SelectedItemTemplate element of the DataList in the DepartmentsList instead of placing in directly on the Master Page. Feel free to experiment and see how easy it is to change the look of the web site with just a few clicks!