在前面一章里我们学习了如何用两个页分别显示主/从信息。在“主”页里我们用Repeater来显示category。每个category的name都是一个链到“从”页的hyperlink。在从页里用一个两列的DataList显示选中的category下的product。本章我们将还是使用单页，在左边显示category列表，category的名字用LinkButton显示。点击其中一个时页面postback，在右边以两列的DataList显示出相关的product。除了名字外，左边的Repeater还会显示与该category相关联的product总数。（见图1）
图 1: Category的 Name 和 Product总数显示在左边
第一步: 在页面左部显示一个Repeater
本章我们将在左边显示category，右表显示它关联的product。web页的内容可以使用标准HTML元素或者CSS来定位。到目前为止我们都是使用CSS来定位。在母板页和站点导航 一章里我们使用绝对定位来创建导航时，为导航列表和内容之间指定了明确的距离。当然CSS也可以用来对两个元素的位置进行调整。
打开DataListRepeaterFiltering文件夹下的CategoriesAndProducts.aspx页，添加一个Repeater和DataList.ID分别设置为Categories和CategoryProducts。然后到源视图里将它们分别放到<div>元素里。也就是说在Repeater后面加一个闭合的</div>，在DataList前加一个开始的<div>。现在你的代码看起来应该和下面差不多：
<div> <asp:Repeater runat="server"> </asp:Repeater> </div> <div> <asp:DataList runat="server"> </asp:DataList> </div>
我们需要使用float属性来将Repeater放到DataList左边，见下面代码：
<div> Repeater </div> <div> DataList </div>
float:left 将第一个<div>放到第二个的左边。width和padding-right指定了第一个<div>的宽和<div>内容和右边框的距离。更多的floating元素信息请参考Floatutorial.我们在Styles.css里创建一个新的CSS类，名为Floatleft（而不是直接在<p>的样式里设置）：
.FloatLeft { float: left; width: 33%; padding-right: 10px; }
然后我们用<div>将<div>替换掉。
完成以上所讲的内容后，切换到设计视图。你应该看到Repeater已经在DataList左边了（由于还没有配置数据源或模板，这两个控件都是灰的）。
图 2: 调整完位置后的页面
第二步: 获取每个Category关联的Products总数
完成了样式设置后，我们现在来将category数据绑定到Repeater。如图1所示，除了category名字外，我们需要显示和它关联的product总数，为了获取这个信息我们可以：
在ASP.NET page的code-behind 里获取这个信息. 根据给定的categoryID我们可以通过ProductsBLL类的GetProductsByCategoryID(categoryID)方法来获取关联的product总数。这个方法返回一个ProductsDataTable对象，它的Count属性表示了我们需要知道的信息。我们可以为Repeater创建一个ItemDataBound event handler，在每个category绑定到Repeater时调用这个方法然后将总数输出。
在DataSet里更新CategoriesDataTable 添加一个NumberOfProducts列. 我们可以更新CategoriesDataTable的GetCategories()方法来包含这个信息或者保留这个方法，再创建一个新的名为GetCategoriesAndNumberOfProducts()方法。
我们来看看这两种方法。第一种写起来更简单，因为我们不需要更新DAL。但是它需要和数据库更多的连接。在ItemDataBound event handler里调用GetProductsByCategoryID(categoryID)方法又增加了一次数据库连接（这在每个category绑定时会发生一次）。这时一共会有N+1次对数据库的请求（N为Repeater里显示的category的总数）。而第二种方法product总数从GetCategories()(或GetCategoriesAndNumberOfProducts())方法返回，这样只请求一次数据库就可以了。
在ItemDataBound Event Handler里获取Products总数
在ItemDataBound event handler里获取product总数不需要修改DAL。只需要直接修改CategoriesAndProducts.aspx页。通过Repeater的智能标签添加一个新的名为CategoriesDataSource的ObjectDataSource。使用CategoriesBLL类的GetCategories()方法配置它。
图 3: 配置 ObjectDataSource