Step 9: Display Products in a Hierarchical Format

  • Article

To display products in your catalog in a hierarchical format, you use the product drill-down method.

In this step you will create DataLists, a Web User Control. Using DataBindings properties, you will dynamically populate the Control and display it on the default page. You will implement code on three separate pages to handle the display of your catalog data. Your site will match the pages up with the levels as the following hierarchy:

Level Category Page Description
1 High-level Default.aspx Displays a text-only header.
2 Subcategories Default.aspx Lists subcategories expanded under their parent (the high-level category) on the default page.
3 Product Listing ProductListing.aspx Lists products from a given category on a custom ASP DataList.
4 Product Detail ProductDetail.aspx Displays detailed information about the product and the product variants.

Ee824676.note(en-US,CS.20).gifNote

  • In this step you will be adding label and DataList objects on to a Web User Control page. These objects are automatically arranged along the left-hand side in flow-layout mode. The Web form objects should be placed one above the other, alternating with first the label and then the DataList. The DataList should be slightly indented using a couple of spaces at the beginning of the line. You will be using it as a menu/navigation aid off of the default page, and the text values on the labels will be set programmatically later in this step.

In this step you will do the following:

  1. Add controls to display categories.
  2. Create DataList item templates.
  3. Create hyperlinks for the DataList items.
  4. Populate controls from Commerce Server data.
  5. Add the Web User control to the Default page.

To add controls to display categories

To create DataList item templates

To create hyperlinks for the DataList items

To populate controls from Commerce Server data

To add the Web User control to the Default page

To add controls to display categories

  1. Click Start, point to Programs, point to Microsoft Visual Studio .NET, and then click Microsoft Visual Studio .NET.

  2. In the Microsoft Development Environment [design] – Start Page screen, click Open Project.

  3. In the Open Project dialog box, select the NorthwindTraders project, and then click Open.

  4. In the NorthwindTraders – Microsoft Visual C# .NET [design] – Default.aspx window, in the Solution Explorer - NorthwindTraders window, right-click NorthwindTraders, point to Add, and then click Add Web User Control.

  5. In the Add New Item - NorthwindTraders dialog box, in the Name box, type _Menu.ascx, and then click Open.

  6. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, click View on the toolbar, and then click Toolbox.

  7. In the Toolbox window, in the Web Forms section, drag and drop a Label object onto the form.

  8. In the Properties window, make sure the object you just created is selected, and then in the ID box, type sidingTypeLabel.

  9. In the Toolbox window, in the Web Forms, drag and drop the DataList object onto the form.

  10. Make sure the DataList object is indented under the previous label object.

  11. In the Properties window, make sure the object you just created is selected, and then in the ID box, type sidingTypeDataList.

  12. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, click View on the toolbar, and then click Toolbox.

  13. In the Toolbox window, in the Web Forms, drag and drop a Label object onto the form.

  14. In the Properties window, make sure the object you just created is selected, and then in the ID box, type sidingMainFreeLabel.

  15. In the Toolbox window, in the Web Forms, drag and drop DataList object onto the form.

  16. Make sure the DataList object is indented under the previous label object.

  17. In the Properties window, make sure the object you just created is selected, and then in the ID box, type sidingMainFreeDataList.

  18. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, click View on the toolbar, and then click Toolbox.

  19. In the Toolbox window, in the Web Forms section, drag and drop a Label object onto the form.

  20. In the Properties window, make sure the object you just created is selected, and then in the ID box, type electricLabel.

  21. In the Toolbox window, in the Web Forms, drag and drop a DataList object onto the form.

  22. Make sure that the DataList object is indented under the previous label object.

  23. In the Properties window, make sure the object you just created is selected, and then in the ID box, type electricDataList.

    Ee824676.note(en-US,CS.20).gifNotes

    • The item-template is a pre-arranged set of controls used to display content for a given row in a dataset. For example, you can display a product with a picture right next to it. For each DataList object, you add a Hyper-Link to each of the DataList.

Now you will populate the DataList controls with the item-template content that will be displayed to the user.

To create DataList item templates

  1. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, right-click the sidingTypeDataList, select Edit Template, and then click Item Templates.
  2. Click View on the toolbar, and then click Toolbox.
  3. In the Toolbox window, in the Web Forms, drag and drop a Hyperlink object onto the Item Template section of the DataList control.
  4. In the Properties window, make sure the control you just created is selected, and then in the ID box, type sidingTypeLink.
  5. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.
  6. In the Commerce Server Databinding Expression Builder (NorthwindTraders) dialog box, do the following:
    Use this To do this
    Data Source Make sure that the Catalog System is selected.
    Data Source Tree View Expand Catalog System, expand Category definitions, expand Common Properties, and then select Display Name.
    Formatted Form Select this option to get the DataBinder.Eval(), or formatted form of the expression.
    Edit Expression Select this option to edit the Formatted Form of the expression.

    Delete the characters "<,%,#, and >" from the expression so that it looks like: DataBinder.Eval(Container.DataItem, "DisplayName")
  7. Click Copy and then click Close.
  8. Click the HyperLink control in the Item Templates section.
  9. In the Properties window, select the Databindings box, and then click the ellipsis [...] button**.**
  10. In the sidingTypeLink Databindings dialog box, do the following:
    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this option to indicate that you want to edit the DataBinding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    Right-click on editing box, and then click Paste to create the following expression: DataBinder.Eval(Container.DataItem, "DisplayName").
  11. Click OK.
  12. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.
  13. In the Commerce Server Databinding Expression Builder (NorthwindTraders) dialog box, do the following:
    Use this To do this
    Data Source Make sure that Catalog System is selected.
    Data Source tree view Expand Catalog System, expand Category definitions, expand Common Properties, and then select Category Name.
    Formatted Form Select this option to get the DataBinder.Eval() expression, or the formatted form of the expression.
    Edit Expression Select this option to edit the Formatted Form of the expression, and then do the following:
    • Delete the characters "<,%,#, and >" from the expression so that it looks like: DataBinder.Eval(Container.DataItem, "CategoryName").
    • In the expression, after CategoryName, but before the parenthesis, add a comma ",", and then add the following text: "ProductList.aspx?CategoryID={0}" (Be sure to include the quotation marks.)

    • The expression should look like the following:

      DataBinder.Eval(Container.DataItem, "CategoryName", "ProductList.aspx?CategoryID={0}")
  14. Click Copy and then click Close.
  15. Click the HyperLink control in the Item Templates section.
  16. In the Properties window, select the Databindings check box, and then click the ellipsis [...] button.
  17. In the sidingTypeLink Databindings dialog box, do the following:
    Use this To do this
    href Select this item from the Bindable Properties list.
    Custom binding expression Select this option to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    Right-click the editing box, and then click Paste to get the following expression: DataBinder.Eval(Container.DataItem, "CategoryName", "ProductList.aspx?CategoryID={0}").
  18. Click OK.
  19. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, right-click the sidingTypeDataList, and then click End Template Editing.

Now you will add HyperLink controls and use Databinding expressions for both sidingMaingFreeDataList and electricDataList.

To create hyperlinks for the DataList items

  1. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, right-click the sidingMainFreeDataList, select Edit Template, and then click Item Templates.
  2. Click View on the toolbar, and then click Toolbox.
  3. In the Toolbox window, in the Web Forms, drag and drop a Hyperlink object onto the Item Template section of the DataList control.
  4. In the Properties window, make sure the control you just created is selected, and then in the ID box, type sidingMainFreeLink.
  5. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.
  6. In the Commerce Server Databinding Expression Builder (NorthwindTraders) dialog box, do the following:
    Use this To do this
    Data Source Make sure that the Catalog System is selected.
    Data Source Tree View Expand Catalog System, expand Category definitions, expand Common Properties, and then select Display Name.
    Formatted Form Select this option to get the DataBinder.Eval() expression, or the formatted form of the expression.
    Edit Expression Select this option to edit the Formatted Form of the expression.

    Delete the characters "<,%,#, and >" from the expression so that it looks like: DataBinder.Eval(Container.DataItem, "DisplayName")
  7. Click Copy and then click Close.
  8. Click the HyperLink control in the Item Templates section.
  9. In the Properties window, select the Databindings box, and then click the ellipsis [...] button.
  10. In the sidingMainFreeLink Databindings dialog box, do the following:
    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    Right-click the editing box, and then click Paste to get the following expression: DataBinder.Eval(Container.DataItem, "DisplayName").
  11. Click OK.
  12. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.
  13. In the Commerce Server Databinding Expression Builder (NorthwindTraders) dialog box, do the following:
    Use this To do this
    Data Source Make sure that the Catalog System is selected.
    Data Source tree view Expand Catalog System, expand Category definitions, expand Common Properties, and then select Category Name.
    Formatted Form Select this option to get the DataBinder.Eval() expression, or the formatted form of the expression.
    Edit Expression Select this option to edit the Formatted Form of the expression, and then do the following:
    • Delete the characters "<,%,#, and >" from the expression so that it looks like: DataBinder.Eval(Container.DataItem, "CategoryName").
    • In the expression, after CategoryName, but before the parenthesis, add a comma ",", and add the following text: "ProductList.aspx?CategoryID={0}" (Be sure to include the quotation marks.)

    • The expression should look like the following:

      DataBinder.Eval(Container.DataItem, "CategoryName", "ProductList.aspx?CategoryID={0}").
  14. Click Copy and then click Close.
  15. Click the HyperLink control in the Item Templates section.
  16. In the Properties window, select the Databindings box, and then click the ellipsis [...] button.
  17. In the sidingMainFreeLink Databindings dialog box, do the following:
    Use this To do this
    href Select this item from the Bindable Properties list.
    Custom binding expression Select this option to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    Right-click the editing box, and then click Paste to get the following expression: DataBinder.Eval(Container.DataItem, "CategoryName", "ProductList.aspx?CategoryID={0}").
  18. Click OK.
  19. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, right-click sidingMainFreeDataList, and then click End Template Editing.
  20. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, right-click electricDataList, select Edit Template, and then click Item Templates.
  21. Click View on the toolbar, and then click Toolbox.
  22. In the Toolbox window, in the Web Forms, drag and drop a Hyperlink object onto the Item Template section of the DataList control.
  23. In the Properties window, make sure the control you just created is selected, and then in the ID box, type electricLink.
  24. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.
  25. In the Commerce Server Databinding Expression Builder (NorthwindTraders) dialog box, do the following:
    Use this To do this
    Data Source Make sure that the Catalog System is selected.
    Data Source Tree View Expand Catalog System, expand Category definitions, expand Common Properties, and then select Display Name.
    Formatted Form Select this option to get the DataBinder.Eval() expression, or the formatted form of the expression.
    Edit Expression Select this option to edit the Formatted Form of the expression.

    Delete the characters "<,%,#, and >" from the expression so that it looks like: DataBinder.Eval(Container.DataItem, "DisplayName")
  26. Click Copy and then click Close.
  27. Click the HyperLink control in the Item Templates section.
  28. In the Properties window, select the Databindings box, and then click the ellipsis [...] button.
  29. In the electricLink Databindings dialog box, do the following:
    Use this To do this
    Text Select this item option from the Bindable Properties list.
    Custom binding expression Select this to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    Right-click the editing box, and then click Paste to get the following expression: DataBinder.Eval(Container.DataItem, "DisplayName").
  30. Click OK.
  31. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.
  32. In the Commerce Server Databinding Expression Builder (NorthwindTraders) dialog box, do the following:
    Use this To do this
    Data Source Make sure that the Catalog System is selected.
    Data Source Tree View Expand Catalog System, expand Category definitions, expand Common Properties, and then select Category Name.
    Formatted Form Select this option to get the DataBinder.Eval() expression, or the formatted form of the expression.
    Edit Expression Select this option to edit the Formatted Form of the expression, and then do the following:
    • Delete the characters "<,%,#, and >" from the expression so that it looks like: DataBinder.Eval(Container.DataItem, "CategoryName").
    • In the expression, after CategoryName, but before the parenthesis, add a comma ",", and add the following text: "ProductList.aspx?CategoryID={0}" (Be sure to include the quotations marks.)

    • The expression should look like the following:

      DataBinder.Eval(Container.DataItem, "CategoryName", "ProductList.aspx?CategoryID={0}").
  33. Click Copy and then click Close.
  34. Click the HyperLink control in the Item Templates section.
  35. In the Properties window, select the Databindings box, and then click the ellipsis [...] button.
  36. In the electricLink Databindings dialog box, do the following:
    Use this To do this
    href Select this item from the Bindable Properties list.
    Custom binding expression Select this option edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    Right-click the editing box, and then click Paste to get the following expression: DataBinder.Eval(Container.DataItem, "CategoryName", "ProductList.aspx?CategoryID={0}").
  37. Click OK.
  38. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, right-click electricDataList, and then click End Template Editing.

Ee824676.note(en-US,CS.20).gifNote

  • After you have created DataList controls, you initiate the DataBind control whenever the page is loaded. We will now link the DataLink controls to their respective data in the Page_Load() event handler.

To populate controls from Commerce Server data

  1. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx.cs window, in the using section, add the following code:

    using System.Web.UI; 
using Microsoft.CommerceServer.Runtime;
using Microsoft.CommerceServer.Runtime.Catalog;
using Microsoft.CommerceServer.Runtime.Diagnostics;
using System.Diagnostics;

  2. Add the following code in the Page_Load() event handler to initialize controls on the Web form with their respective data:

    ProductCatalog catalog = CommerceContext.Current.CatalogSystem.GetCatalog("BuildingMaterials1033");
if (!IsPostBack)
{
   // Set category name for lookup.  Note how commerce server builds a
   // path to the category name based upon the Base catalog it comes 
   // from.
   string catName = "SidingType(ResidentialSiding)";

   // Extract the DataSet with the properties for the category in it.
   DataSet ds = catalog.GetCategory(catName).GetCategoryProperties();

   // Extract the category display name.
   sidingTypeLabel.Text = (string)ds.Tables[0].Rows[0]["DisplayName"];

   // Now, configure the sidingTypeDataList so that it will pull
   // the correct fields to populate it and then initiate a bind on it.
   sidingTypeDataList.DataSource = catalog.GetCategory(catName).GetChildCategories();
   sidingTypeDataList.DataBind();

   // Do it again for the MaintenanceFree category header.
   catName = "MaintenanceFree(ResidentialSiding)";
   ds = catalog.GetCategory(catName).GetCategoryProperties();
   sidingMainFreeLabel.Text = (string)ds.Tables[0].Rows[0]["DisplayName"];

   sidingMainFreeDataList.DataSource = catalog.GetCategory(catName).GetChildCategories();
   sidingMainFreeDataList.DataBind();

   // Do it again for the Electrical category header.
   catName = "ElectricProducts(Electrical)";
   ds = catalog.GetCategory(catName).GetCategoryProperties();
   electricLabel.Text = (string)ds.Tables[0].Rows[0]["DisplayName"];

   electricDataList.DataSource = catalog.GetCategory(catName).GetChildCategories();
   electricDataList.DataBind();
}

To add the Web User control to the Default page

  1. In the NorthwindTraders – Microsoft Visual C# .NET [design] – _Menu.ascx window, in the Solution Explorer window, double-click Default.aspx, and then drag and drop the _Menu.ascx page onto the default Web page.
  2. Right-click the Default.aspx page, and then click Set as Start Page.
  3. Click F5 to run your project.

Ee824676.note(en-US,CS.20).gifNotes

  • The links are not functioning currently; we will fix them in the next exercise.
  • If you receive an error about not being able to reformat the page because of a line number, ignore it.

Copyright © 2005 Microsoft Corporation.
All rights reserved.