使用 DataList 控件每行显示多个记录31

简介

我们在前面两个教程中见到的例子已经把每一条记录从它的数据源中输出为单行 HTML 表格中的一列。然而这是默认的 DataList 控件行为，定制 DataList 控件，将数据源条目显示在多行多列的表格中是非常容易的。甚至还能够将所有的数据条目显示在一个单行多列的 DataList 控件中。

我们可以通过RepeatColumns 和 RepeatDirection 属性来定制DataList 控件的输出，其中 RepeatColumns 和 RepeatDirection 这两个属性分别表示要输出显示多少列和这些条数是垂直输出还是水平输出。图 1 这个例子图示了用一个三列的表格显示产品信息的 DataList 控件。

图1 ：DataList 控件每行显示了三个产品

每行显示多个数据源条目，DataList 控件可以更有效的利用水平屏幕空间。在本教程中，我们将会探究这两个 DataList 属性。

步骤1：在DataList 控件中显示产品信息

在详细探讨RepeatColumns 和 RepeatDirection 属性之前，让我们先在我们的页面（这个页面使用单列多行的表格输出产品信息）上创建一个DataList 控件。例如，使用下列标示文字显示产品的名称、类别和价格：

<h4>Product Name</h4> Available in the Category Name store for Price

在前面的例子中我们已经知道了如何为DataList 控件绑定数据，所以我们将会快速完成这些步骤。开始先打开 DataList RepeaterBasics 文件夹中的 RepeatColumnAndDirection.aspx 页面，然后从工具箱中拖拉一个 DataList 控件到设计器。在 DataList 控件的智能选项卡上选择创建一个新的对象数据源 ( ObjectDataSource )，配置数据源以便能够从 ProductsBLL 类的 GetProducts 方法中取得它的数据，接着从向导的 INSERT （插入）、 UPDATE （更新）和 DELETE （删除）选项卡中选择 ( None ) 选项。

创建新的对象数据源，并将数据源绑定到 DataList 空间之后，Visual Studio 会自动创建一个ItemTemplate ，它会显示每一个产品数据域的名称和值。调整 ItemTemplate — 可以直接通过声明标记或 DataList 控件的智能标记中的编辑模板来调整 — 所以它使用上面所示的标示文字，将产品名称、类别名称和价格文本替换成了标签控件，这些控件可以使用相应的数据绑定语句为它们的 Text 属性赋值 。更新 ItemTemplate 之后，您的页面的声明标记字看起来应该和以下代码类似：

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID" 
    DataSourceID="ObjectDataSource1" EnableViewState="False"> 
    <ItemTemplate> 
        <h4> 
            <asp:Label runat="server" ID="ProductNameLabel" 
                Text='<%# Eval("ProductName") %>'></asp:Label> 
        </h4> 
        Available in the 
            <asp:Label runat="server" ID="CategoryNameLabel" 
                Text='<%# Eval("CategoryName") %>' /> 
        store for 
            <asp:Label runat="server" ID="UnitPriceLabel" 
                Text='<%# Eval("UnitPrice", "{0:C}") %>' /> 
    </ItemTemplate> 
</asp:DataList> 
 
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
    OldValuesParameterFormatString="original_{0}" 
    SelectMethod="GetProducts" TypeName="ProductsBLL"> 
</asp:ObjectDataSource>

注意已经为 UnitPrice 在 Eval 数据绑定语句中包含了一个格式化标识符，可以将返回的数值格式化为货币—Eval("UnitPrice", "{0:C}") 。

花点时间在浏览器中访问我们的页面，如图2 所示，DataList 控件输出表现为一个单列多行的产品列表。

图2 ：默认情况下，DataList 控件输出表现为一个单列多行的表格

步骤2 ： 更改 DataList 控件的输出方向

默认情况下，DataList 控件输出的条目是垂直的单列多行表格，只需更改DataList 控件的 RepeatDirection 属性 就可以很容易的更改这个默认行为。RepeatDirection 属性这两个数值之一：水平或垂直（默认情况）。

通过将RepeatDirection 属性从垂直更改为水平，DataList 控件会将它的记录按单行输出，并每个数据源条目创建一列。为了描述这个效果，请点击设计器中的 DataList 控件，接着在属性窗口中将 RepeatDirection  属性从垂直更改为水平。一完成这个操作，设计器就会调整 DataList 控件的输出，并创建一个单行多列的界面（请参见图 3 ）。

图3 ：RepeatDirection 属性规定了 DataList 控件条目的输出方向

当显示少量数据时，一个单行多列的表格可能是一种最大化屏幕实际显示区域的理想的方法，然而对于量数据来说，一个单行需要众多列，这样就不能将这些众多的条目适当的输出到屏幕上，而是一直显示到屏幕的右边。图 4 显示了用单行 DataList 控件输出的产品。因为有很多产品（超过 80 个），所以用户不得不一直向右移动滚动条来查看每一个产品的信息。

图4 ：对于相当大的数据源，单列的DataList 控件需要水平的滚动条

步骤3 ：多行多列的表格显示数据

要创建一个多行多列的 DataList ，我们需要设置 RepeatColumns 属性 将其设置为需要显示的列数值。默认情况下 RepeatColumns 的属性值赋值为 0 ，这时 DataList 控件会将所有的条目以单行或单列的方式显示（是按单行还是单列取决与 RepeatDirection 的属性值）。

在我们的例子中，我们在表格的每行中显示三个产品。所以，要将RepeatColumns 的属性值赋值为3 ，赋值完成之后花点时间在浏览器中查看一下结果。如图 5 所示那样，这些产品的信息现在列在一个三列多行的表格中。

图5 ：每行显示三个产品

RepeatDirection 属性影响DataList 控件中的条目是如何输出的。图5 所示的是将 RepeatDirection 属性设置为水平时的输出结果。注意前三个产品 — Chai 、Chang 和 Aniseed Syrup — 是按从左到右从上往下输出的。接下来的三个产品（从 Chef Anton’s Cajun Seasoning 开始）在前三个产品的下一行输出。然而将 RepeatDirection 的属性改回垂直，这些产品会按照从上往下，从左往右的顺序输出，如图 6 所示：

图6 ：该图中产品按垂直方式输出

在输出结果表格中显示的行的数量取决与绑定到DataList 控件的总的记录数量。正好行的数量是整个数据源条目的总数量除以 RepeatColumns 的属性值。因为产品表格中当前包含 84 个产品，用 84 除以 3 ，正好是 28 行。如果数据源中条目总数不能整除 RepeatColumns 的属性值，那么在表格的最后一行或最后一列会有空白单元格。如果将 RepeatDirection 设置为垂直，那么最后一列会有空白单元；如果设置为水平，那么最后一行会有空白单元。

小结

DataList 控件默认按单列多行的表格列出它的所有条目，这是通过单个TemplateField 域来仿效 GridView 控件的输出。如果这个默认的输出方式可以接受，那我们就可以通过每行显示多个数据源条目来最大化屏幕的实际显示区域。这一步操作只需将 DataList 控件的 RepeatColumns 属性值设置为每行需要显示的列数即可。另外， DataList 控件的 RepeatDirection 属性是用来指示这个多行多列表格中的内容是按水平方式输出—— 从左到右，从上往下，还是按垂直方式输出 —— 从上往下，从左往右。

快乐编程！