三十五：使用Repeater和DataList单页面实现主从报表选编.docx

在ASP.NET 2.0中操作数据之三十五：使用Repeater和DataList单页面实现主/从报表 作者：heker2007 字体：[ HYPERLINK javascript:turnbig() 增加? HYPERLINK javascript:turnsmall() 减小] 类型：转载 时间：2016-05-10 HYPERLINK /article/83881.htm \l comments ?我要评论 前面已经介绍了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。现在你的代码看起来应该和下面差不多：  HYPERLINK /article/83881.htm ? 1 2 3 4 5 6 7 8div ?asp:Repeater ID=Categories runat=server ?/asp:Repeater /div div ?asp:DataList ID=CategoryProducts runat=server ?/asp:DataList /div我们需要使用float属性来将Repeater放到DataList左边，见下面代码：  HYPERLINK /article/83881.htm ? 1 2 3 4 5 6div ?Repeater /div div ?DataList /div　　float:left 将第一个div放到第二个的左边。width和padding-right指定了第一个div的宽和div内容和右边框的距离。更多的floating元素信息请参考Floatutorial.我们在Styles.css里创建一个新的CSS类，名为Floatleft（而不是直接在p的样式里设置）：  HYPERLINK /article/83881.htm ? 1 2 3 4 5 6.FloatLeft { ?float: left; ?width: 33%; ?padding-right: 10px; }　　然后我们用div class=FloatLeft将div style=float:left替换掉。完成以上所讲的内容后，切换到设计视图。你应该看到Repeater已经在DataList左边了（由于还没有配置数据源或模板，这两个控件都是灰的）。 图 2: 调整完位置后的页面 第二步: 获取每个Category关联的Products总数 　　完成了样式设置后，我们现在来将category数据绑定到Repeater。如图1所示，除了category名字外，我们需要显示和它关联的product总数，为了获取这个信息我们可以： 　　在ASP.NET page的code-behind 里获取这个信息. 根据给定的categoryID我们可以通过ProductsBLL类的GetProductsByCategoryID(categoryID)方法来获取关联的product总数。这个方法返回一个ProductsDataTable对象，它的Count属