ASP.NET 2.0数据教程之三十五:使用Repeater和DataList实现的主/从报表

返回“ASP.NET 2.0数据教程目录”

导言

在前面一章里我们学习了如何用两个页分别显示主/从信息。在 “主”页里我们用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>。现在你的代码看起来应该和下面差不多：

ASP.NET

<div>
<asp:Repeater ID="Categories" runat="server">
</asp:Repeater>
</div>
<div>
<asp:DataList ID="CategoryProducts" runat="server">
</asp:DataList>
</div>

我们需要使用float属性来将Repeater放到 DataList左边，见下面代码：

ASP.NET

<div style="float: left; width: 33%; padding-right: 10px;">
Repeater
</div>
<div>
DataList
</div>

float:left 将第一个<div>放到第二个的 左边。width和padding-right指定了第一个<div>的宽和<div>内容 和右边框的距离。更多的floating元素信息请参考Floatutorial.

我们在 Styles.css里创建一个新的CSS类，名为Floatleft（而不是直接在<p>的样 式里设置）：

CSS

.FloatLeft
{
float: left;
width: 33%;
padding-right: 10px;
}

然 后我们用<div class="FloatLeft">将<div style="float:left">替换掉。

完成以上所讲的内容后，切 换到设计视图。你应该看到Repeater已经在DataList左边了（由于还没有配置数 据源或模板，这两个控件都是灰的）。

图 2: 调整完位置后的页面

第二步: 获取每个Category关联的 Products总数

With the Repeater and DataList’s surrounding markup complete, we’re ready to bind the category data to the Repeater control. However, as the bulleted list of categories in Figure 1 shows, in addition to each category’s name we also need to display the number of products associated with the category. To access this information we can either:

完成了样式设置后，我们现在来将 category数据绑定到Repeater。如图1所示，除了category名字外，我们需要显示 和它关联的product总数，为了获取这个信息我们可以：

在ASP.NET page 的code-behind 里获取这个信息. 根据给定的categoryID我们可以通过 ProductsBLL类的GetProductsByCategoryID(categoryID)方法来获取关联的 product总数。这个方法返回一个ProductsDataTable对象，它的Count属性表示了 我们

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!