介绍

在前一章中，我们学习了如何在两页上显示主/从信息。在“主”页面上，我们使用Repeater显示类别。每个类别的名称都是链接到“发件人”页面的超链接。使用页面中的两列数据列表显示所选类别下的产品。在本章中，我们仍将使用单个页面，类别列表将显示在左侧，类别名称将通过链接按钮显示。单击回发的其中一个页面，相关产品将显示在右侧的两列数据列表中。除了名称之外，左侧的中继器还显示了与该类别相关联的产品总数。(见图1)

图1:类别中的名称和产品总数显示在左侧。

第一步：在页面的左侧显示一个Repeater。

在本章中，我们将在左侧显示类别，在右侧显示相关产品。可以使用标准的HTML元素或CSS来定位网页的内容。到目前为止，我们都用CSS来定位。在母版页和网站导航一章中，当我们使用绝对定位创建导航时，我们指定了导航列表和内容之间的明确距离。当然，CSS也可以用来调整两个元素的位置。

打开“数据列表重复过滤”文件夹下的CategoriesAndProducts.aspx页面，添加一个Repeater并设置数据列表。类别和类别产品的标识。然后转到源代码视图，将它们放入div元素中。也就是说，在Repeater之后添加一个closed /div，在DataList之前添加一个starting div。现在，您的代码应该如下所示：

div ASP : Repeater ID=' categories ' runat=' server '/ASP : Repeater/div ASP 3360 DataList ID=' Category Products ' runat=' server '/ASP 3360 DataList/div我们需要使用float属性将Repeater放在DataList的左边，如下代码所示：

div repeater/div data list/div float : left将第一个div放在第二个div的左边。Width和padding-right指定第一个div的宽度以及div内容和右边框之间的距离。有关浮动元素的更多信息，请参考浮动basic。我们将在Styles.css中创建一个新的CSS类，命名为Floatleft(而不是直接设置为p的样式):左浮动{ float:宽度：33%；填充-右： 10px；}然后我们将div style='float:left '替换为div class='FloatLeft '。完成以上操作后，切换到设计视图。您应该看到Repeater已经在DataList的左侧(两个控件都是灰色的，因为还没有配置数据源或模板)。

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

在第二步骤：中，获得与每个类别相关联的产品总数。

完成样式设置后，现在让我们将类别数据绑定到Repeater。如图1所示，除了类别名称，我们还需要显示与之相关的产品总数。要获取这些信息，我们可以：

在ASP.NET的代码页中获取这些信息。根据给定的categoryID，我们可以通过ProductsBLL类的getproductbycategoryid(categoryID)方法得到关联产品的总数。该方法返回一个ProductsDataTable对象，其Count属性表示我们需要知道的信息。我们可以为Repeater创建一个ItemDataBound事件处理程序，当每个类别都绑定到Repeater时调用这个方法，然后输出总数。

更新数据集中的类别数据表，并添加产品数量列。我们可以更新CategoriesDataTable的getcategories()方法来包含这个信息或者保留这个方法，然后创建一个名为GetCategories和numberofproducts()的新方法。

让我们来看看这两种方法。第一个更容易写，因为我们不需要更新DAL。但是它需要更多的数据库连接。在ItemDataBound事件处理程序中调用getproductbycategoryid(categoryid)方法会添加另一个数据库连接(这在每个类别绑定中都将发生一次)。此时，将有N 1个对数据库的请求(N是Repeater中显示的类别总数)。在第二种方法中，从GetCategories()(或getcategoriesandnumberofproducts())方法返回产品的总数，因此数据库只能被请求一次。

获取项目数据绑定事件处理程序中的产品总数。

在不修改DAL的情况下，获取ItemDataBound事件处理程序中的产品总数。只需要直接修改CategoriesAndProducts.aspx页面。通过中继器的智能标记添加名为类别数据源的新对象数据源。使用CategoriesBLL类的GetCategories()方法对其进行配置。

图3:配置对象数据源。

中继器中的每个类别都是可点击的，点击后，类别产品数据列表将显示这些相关产品。我们可以将每个类别设置为超链接，将其链接到此页面(CategoriesAndProducts.aspx)，并通过querystring为CategoryID赋值。这种方法的优点是特定类别的产品可以被编入索引和书签进行搜索。

我们也可以将每个类别设置为LinkButton，我们在本章中使用这种方法。链接按钮看起来像一个超链接，但是当单击时，它将产生回发。数据列表的对象数据源将被刷新，以显示与所选类别相关联的产品。本章使用超链接更合理。但是，在其他情况下最好使用链接按钮。即便如此，我们在这里也使用链接按钮。正如我们将看到的，使用链接按钮会带来一些使用超链接时无法应对的挑战。因此，我们可以更好地学习它，以备将来使用。

注意：如果用HyperLink或a代替LinkButton再练习一遍这一章，最好。

以下标记语言属于Repeater和ObjectDataSource。请注意，Repeater的模板将每个项目表示为LinkButton。

asp3360 Repeater ID=' Categories ' runat=' server ' data source ID=' Categories data source ' header template ul/header template item template lias p : link button runat=' server ' ID=' viewccategory '/Li/item template FooterTemplate/ul/FooterTemplate/asp3360 objectdata source ID=' Categories data source ' runat=' server ' oldvaluesparametertformatstring=' origin _ { 0 } select method='在第三步中，我们将为ItemCommand事件创建一个事件处理程序，其中我们将更新DataList的ObjectDataSource的SeleceParameters集合。如果视图状态被禁用，将不会触发中继器的项目命令。有关具体原因和更多信息，请参见ASP.NET问题及其解决方案的疑难解答。

具有标识视图类别的链接按钮没有设置文本属性。如果我们只需要显示类别名称，我们可以直接通过绑定语法进行设置，如下所示：

ASP : link button runat=' server ' id=' view category ' text=' % # eval(' category name ')% '/但是，我们这里需要显示的是类别的名称和proudct的总数。请参见以下代码：

受保护的void Categories _ ItemDataBound(对象发送方，RepeaterItemEventArgs e){ //请确保我们正在处理数据项.如果(例如项目。项目类型==列表项目类型.项目| e .项目。项目类型==列表项目类型.AlternatingItem) { //引用绑定到此重复北风项目的类别当前实例。类别流类别=(北风。类别流()(系统。数据行视图)。划；//确定此类别中有多少产品NorthwindTableAdapters .产品tableadapter产品API=新的northwindstableadapters .producttableadapter()；int productCount=productsAPI .GetProductsByCategoryID(类别CategoryID).计数；//引用视图类别链接按钮并设置其文本属性链接按钮视图类别=(链接按钮)e.Item.FindControl('视图类别');视图类别文本=字符串。格式(“{0} ({1:N0})”，类别CategoryName，ProductCount)；}}我们首先要确保我们处理的是数据项（项目类型为项目或替代项目)然后引用刚刚绑定到当前重复项目的类别现在。然后调用GetCategoriesByProductID(categoryID)方法，通过数数属性获取返回的记录条数。最后将模板列里的查看类别链接按钮的文本属性设为类别名称（产品类别编号).

注意：我们也可以在ASP .网页的代码隐藏里写一个格式化功能，接收类别名称和分类编号的值，返回类别名称和产品总数的连接字符串。然后将结果直接赋给链接按钮的文本属性，而不需要处理项绑定事件事件。更多的格式化功能信息参考在显示数据表格（一种控件)控件中使用列和格式化数据列表和中继器的数据。添加完事件处理程序后，在浏览器里看看页面。见图4。

图4: 显示每个种类的名字和制品总数

更新分类数据表和分类统计数据来包含每个种类的产品总数除了在每个种类绑定到中继器时获取产品总数外，我们还可以修改木豆里分类数据表和分类算法适应器来包含这个信息。我们在分类数据表里加一列。打开App_Code/DAL/Northwind.xsd，右键点数据表，选择添加/列。见图5.

图5: 为类别数据源增加一个新列

这样会添加一个名为第一列的列，你可以很方便的修改它的名字。将它重命名为产品数量。然后我们需要配置这列的属性。点这个列，来到属性窗口。将数据类型从系统。线修改为系统。国际号码32 .将只读的属性设为没错。见图6.

图6: 设置新列的属性

现在分类数据表里已经包含了产品数量列，但它的值还没有设置。我们可以修改GetCategories()方法，当每次获取种类信息的时候返回它的信息。在这里由于只是本章用到了这个数据，我们来创建一个新的名为获取类别和产品数量().右键点类别可调整的，选择新查询。会出现表适配器查询配置向导。选择结构化查询语言语句。

图7: 选择结构化查询语言语句

图8: SQL语句返回行数

下一步需要我们写结构化查询语言语句。下面的语句返回每个种类的类别名称，类别名称，描述和相关产品的总数：

选择类别名称、类别名称、描述、(从产品中选择计数(*)其中类别名称=c。类别名称)作为c类产品的编号

图9: 使用的结构化查询语言语句

注意计算产品总数的子查询的别名为产品数量。它和分类数据表的产品数量列关联。最后一步是写方法的名字。分别为填充数据表和返回数据表命名为产品数量和获取类别和产品数量.

图10: 为新的表适配器的方法命名

现在木豆已经修改完了。由于我们所有展现层，BLL，DAL是逐层调用，所以我们需要在类别基地址定位连接类的添加相应的获取类别和产品数量方法。

[系统。组件模型组件模型。DataObjectMethodType。选择，假)]公共北风CategoriesDataTable get categoriesandnumber of productions(){ 0返回适配器get categories and number of products()；}完成木豆和基地址定位连接后，我们来将数据绑定到类别中继器。如果在'在项目数据绑定事件处理程序里获取制品总数'那部分里你已经为中继器创建了ObjectDataSource，删掉它，然后去掉中继器的数据源属性，同样去掉项绑定事件事件。中继器现在回到了初始状态，添加一个名为类别数据源的对象数据源.使用类别基地址定位连接类的getcategoriesandnumber of products()方法来配置它。见图11.

图11: 配置对象数据源

然后修改ItemTemplate，使用数据绑定语法来将类别名称和产品数量字段绑定到链接按钮的文本属性。完整的标记语言如下：

asp3360中继器ID=' Categories ' runat=' server '数据源ID=' Categories data source '标题模板ul/标题模板项模板lias p :链接按钮runat=' server ' ID=' viewcacogory ' Text=' % # String .格式(“{0} ({1:N0})”、_ Eval('CategoryName ')、Eval('产品数量')%”//Li/项目模板页脚模板/ul/页脚模板/ASP : repeateras : object data source ID=' categoriesdata source ' runat=' server ' oldvaluesparametertformatstring=' original _ { 0 } ' select method=' getcategoriesandnumber of products ' type name=' CategoriesBLL使用这种方法的页面看起来和前面一种方法一样（见图4).

第三步： 显示选中的种类关联的制品

现在种类和产品总数的部分已经完成。中继器将每个种类显示为链接按钮，当点击时产生回发，这时我们需要将那些关联的产品在类别产品数据列表里显示出来。

现在我们面临的一个挑战是如何将特定种类下的产品在数据列表里显示出拉一。在使用显示数据表格（一种控件)和详细视图实现的主/从报表一章里我们学习了创建一个网格视图，当选择它的一行时将'从'信息在本页的控件基础里显示出来。显示数据表格（一种控件)的对象数据源用ProductsBLL的GetProducts()返回产品信息。而控件基础的对象数据源用getProductByProductID(ProductID)返回选中的产品信息。商品编号参数通过网格视图的选择的值属性来提供。不幸的是中继器没有选择的值属性。

注意：这是我们在中继器里使用链接按钮的其中一个挑战。如果我们使用hperlink，可以通过参数来传递类别1 .在我们解决这个问题前，首先将对象数据源绑定到数据列表，然后指定项目模板.从数据列表的智能标签添加一个名为类别产品数据源的ObjectDataSource，并使用ProductsBLL类的getproductbycategoryid(categoryeid)配置它。由于此数据列表只提供只读功能，因此在插入、更新、删除标签里选择没有。

图12: 配置对象数据源

由于getproductbycategoryid(categoryID)方法需要一个输入参数，向导会要求我们指定参数源。我们使用显示数据表格（一种控件)或数据列表列出种类时，可以将参数源设为控件，控件身份设为数据控件的身份证。然而由于中继器没有选择的值属性，所以不能用作参数源。你可以查看控件身份下拉列表，它里面只包含一个控件标识—类别产品（数据列表)。

图13: 配置参数

配置完数据源后，Visual Studio为数据列表自动产生项目模板.用我们前面使用的模板替换默认的项目模板.将数据列表的列数属性设为2.完成这些后，你的代码应该和下面的差不多：

asp:目录ID='类别产品' runat='服务器' DataKeyField='产品ID ' DataSourceID='类别产品数据源'重复列=' 2 ' EnableViewState=' False '项目模板H5 % # Eval('产品名称')%/H5 p由% # Eval('供应商名称')% br/% # Eval('单价'，' { 0:C } ')提供%/p/项目模板/asp3366目前为止类别产品数据源对象数据源的分类编号参数还没有设置。所以浏览页面时没有任何的产品显示出来。我们现在需要将它设置为中继器中的被点击的种类的类别1 .这里有两个问题，第一是我们如何判断什么时候中继器的模板列被点了。二是哪个被点了。

和按钮，图像按钮一样，链接按钮有一个点击事件和一个命令事件。点击事件仅仅用来说明链接按钮被点击了。有时候我们需要传递更多的信息到事件处理程序里。这样的话，就需要使用链接按钮的按钮和CommandArgument .当链接按钮被点时命令事件激发，事件处理程序会接受按钮和命令参数的值。

当中继器里的模板里激发了一个命令事件时RPE water的那么事件事件被激发。并将被点击的链接按钮（或者纽扣和ImageButton)的按钮和命令参数的值传进来。因此，判断类别链接按钮什么时候被点击了，我们需要：

设置视网膜色素上皮水里的模板列的链接按钮的按钮属性（我使用的列表产品')。设置了值后链接按钮被点后命令事件会激发。

设置链接按钮的命令参数属性为当前项目的类别1 .为中继器的那么事件事件创建一个事件处理程序。在它里面将传入的命令参数值赋给类别产品数据源对象数据源的分类编号参数。

下面是完成了1,2步后的标记。注意分类编号是如何通过绑定语法来赋给命令参数的。

项目模板Li ASP :链接按钮命令名称=' ListProducts ' runat=' server '命令Gument=' % # Eval(' Categoryid ')% ' ID=' viewcacogory ' Text=' % # String .格式(“{0} ({1:N0})”、_ Eval('CategoryName ')、Eval(' number of product ')%”/asp:链接按钮/Li/项目模板由于任何一个按钮，链接按钮或图片按钮的命令事件都会激发那么事件事件，所以无论在任何时候创建那么事件事件处理程序首先都要小心谨慎的检查按钮的值。而由于我们现在只有一个链接按钮，以后我们可能会向中继器添加新的按钮控件，当点被点击时，激发同样的那么事件事件处理程序。因此最好确保检查了命令名，然后根据它的值来进行逻辑处理。

在确保了传入的按钮的值等于列表产品后，事件处理程序将类别产品数据源对象数据源的分类编号的参数设为传入的CommandArgument .对对象数据源的选择参数的修改自动引起数据列表重新绑定到数据源，显示新的选中的种类关联的产品。

受保护的void Categories_ItemCommand(对象源，repeatercommandventargs e){//如果发出的是列表产品命令.如果(字符串。比较（例如，命令名，"列表产品"，true)==0) { //将类别产品数据源对象数据源的类别标识参数//设置为刚刚单击的类别的类别标识（例如，命令名).类别产品数据源.选择参数['CategoryID'].默认值=e.commandargument。ToString()；}}做完这些后，本章就结束了！现在在浏览器里看看你的页面。图14是第一次浏览时的样子。因为还没有种类被选中，所以没有产品显示出来。点击一个类别，比如生产，和它关联的产品以两列的方式显示出来。见图15.

图14:第一次浏览页面时没有产品显示

图15:点击产品类别后，右侧显示相关产品。

摘要

在本章和上一章中，我们了解到主/从表可以分别显示在两页上，也可以一起显示在一页上。如果它们显示在一个页面上，我们需要考虑如何控制它们的外观。在GridView和DetailView实现的主/从报表章节中，我们将在主记录之上显示从记录。在本章中，我们使用CSS在从记录的左侧显示主记录。我们还讨论了当单击Repeater中的LinkButton(或ButtonImageButton)时，如何获取与每个类别相关联的产品数量以及服务器的处理逻辑。

到目前为止，使用DataList和Repeater显示主/从表的工作已经完成。稍后，我们将演示如何在数据列表中添加编辑和删除功能。

编程快乐！