Step 10: Implement Product Drill-down

  • Article

After you have implemented product category drill-down functionality, you add the product drill-down functionality to display the product hierarchy to users on your Web site.

In this step you will create a Web Form and DataList items with bindings to retrieve dynamic data from the Commerce Server catalog database.

  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 Form.

  5. In the Add new Item - NorthwindTraders dialog box, in the Name box, type ProductList.aspx, and then click Open.

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

  7. In the Toolbox window, in the Web Forms, 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 categoryNameLabel.

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

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

  11. Right-click productDataList, select Edit Template, and then click Item Templates.

  12. Click View on the toolbar, and then click Toolbox.

  13. In the Toolbox window, in the Web Forms, drag and drop an Image object onto the Item Template section of the DataList control.

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

  15. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.

  16. 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 Catalogs, expand BuildingMaterials1033, and then select Image.
    Formatted Form Select this option to get the expression DataBinder.Eval(), 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,"Image").

  17. Click Copy and then click Close.

  18. Click the Image object in the Item Templates section.

  19. In the Properties window, select the Databindings box, and then click the ellipsis [...] button.

  20. In the productLink Databindings dialog box, do the following:

    Use this To do this
    ImageUrl 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,"Image").

  21. Click OK.

  22. Click the Image object in the Item Templates section.

  23. In the Properties window, do the following:

    Use this To do this
    Height Type 63.
    Width Type 47.

  24. Click View on the toolbar, and then click Toolbox.

  25. In the Toolbox window, in the Web Forms, drag and drop a Hyperlink object onto the Item Template section of the DataList control.

  26. In the Properties window, make sure you the control you just created is selected, and then in the ID box, type productLink.

  27. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.

  28. 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 Catalogs, expand BuildingMaterials1033, and then select Name.
    Formatted Form Select this option to get the expression DataBinder.Eval(), 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, "Name").

  29. Click Copy and then click Close.

  30. Click the HyperLink control in the Item Templates section.

  31. In the Properties window, select the Databindings box, and then click the ellipsis [...] button.

  32. In the productLink 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 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, "Name").

  33. Click OK.

  34. Click Project on the toolbar, point to Commerce Server Project, and then click Databinding Expression Builder.

  35. 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 Catalogs, expand BuildingMaterials1033, and then select ProductID.
    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, "ProductID").
    • In the expression, after CategoryName, but before the parenthesis, add a comma ",", and add the following text: "ProductDetail.aspx?ProductID={0}" (Be sure to include the quotation marks.)
    • The expression should look like the following:

    DataBinder.Eval(Container.DataItem, "ProductID"," ProductDetail.aspx?ProductID={0}").

  36. Click Copy and then click Close.

  37. Click the HyperLink control in the Item Templates section.

  38. In the Properties window, select the Databindings box, and then click the ellipsis [...] button.

  39. In the productLink 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, "ProductID"," ProductDetail.aspx?ProductID={0}").

  40. Click OK.

  41. In the NorthwindTraders – Microsoft Visual C# .NET [design] – ProductList.aspx window, right-click productDataList, and then click End Template Editing.

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

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

  42. In the NorthwindTraders – Microsoft Visual C# .NET [design] – ProductList.aspx.cs window, in the using section, add the following code:

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

  43. 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.  
   string catName = Request.Params["CategoryID"];

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

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

   // Now, let's go find the products that are part of the category 
   // we are currently trying to browse and initiate a databind.
   ds = catalog.GetCategory(catName).GetProducts();
   productDataList.DataSource = ds;
   productDataList.DataBind();
}

You should now have a product list, and can test the drill-down functionality.

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

  • On the ProductList.aspx page, you must have a parameter indicating the category to be displayed.
  • Leave the starting page set to the Default.aspx.

Copyright © 2005 Microsoft Corporation.
All rights reserved.