Completing a Simple Storefront with LINQ - Building the Product Browse Page
(Page 3 of 4 )
It's finally time to build the product browse page. Add a page called Browse.aspx. As before, be sure to select MasterPage.master as the master page.
The plan is to create two ListBox controls and a ListView control. The first ListBox control will contain the top-level categories. When the user selects a top-level category (for example, Bikes), the second ListBox control will become populated with the appropriate subcategory (for example, Mountain Bikes). Then, when the user selects a subcategory, the ListView will become populated with products in that category.
We'll start with the the top-level category ListBox, but we need a way to populate it. We could work in the code-behind file as we did before, but there is an easier solution here: LinqDataSource. We can drop it right onto the page and set the appropriate properties declaratively. To get the top-level categories, we simply need to get all the categories that have a null ParentProductCategoryID, which makes sense, since they are themselves parent categories. Querying with a LinqDataSource isn't hard at all. Place this into the Browse.aspx page (inside of the Content control, of course):
<asp:LinqDataSource ID="CategorySource"
ContextTypeName="AdventureWorksDataContext"
TableName="ProductCategories" Where="ParentProductCategoryID = null" runat="server">
</asp:LinqDataSource>
As you can see, it's not hard at all to use LinqDataSource. We simply specify the name of the data context, the name of the table, and the condition of the Where clause. Hooking this up to a ListBox control isn't difficult either:
<asp:ListBox ID="CategoryList" DataSourceID="CategorySource"
DataTextField="Name"
DataValueField="ProductCategoryID" AutoPostBack="true"
runat="server">
</asp:ListBox>
Note how the control automatically posts back.
Now we need to create a second LinqDataSource and a second ListBox. The process is much the same as before, with one important difference: we need to get the value of CategoryList and work it into our query. We need to retrieve all of the ProductCategory entries whose ParentProductCategoryIDs match the value of CategoryList. LinqDataSource actually provides a neat way to do this: WhereParameters. We can automatically generate a Where clause based on, among other things, the value of a control. Here's how it's done:
<asp:LinqDataSource ID="SubcategorySource"
ContextTypeName="AdventureWorksDataContext"
TableName="ProductCategories" AutoGenerateWhereClause="true"
runat="server">
<WhereParameters>
<asp:ControlParameter ControlID="CategoryList"
Name="ParentProductCategoryID"
DefaultValue="-1" Type="Int32" />
</WhereParameters>
</asp:LinqDataSource>
Notice how we have DefaultValue set to -1. This way, if nothing is selected in CategoryList, nothing will be in the second ListBox. Also, take note of how AutoGenerateWhereClause is set to true. This is necessary! Otherwise, all WhereParameters will be ignored.
Now we need to wire SubcategorySource. This works the same way as before:
<asp:ListBox ID="SubcategoryList"
DataSourceID="SubcategorySource"
DataTextField="Name" DataValueField="ProductCategoryID"
AutoPostBack="true" runat="server">
</asp:ListBox>
Try the page out now. Selecting a top-level category should populate the second ListBox with the appropriate subcategories.
Next: Building the Product Browse Page, Continued >>
More .NET Articles
More By Peyton McCullough
