使用 DataList 控件每行显示多条记录 (C#)

2025-04-30

在本简短教程中，我们将探讨如何通过其 RepeatColumns 和 RepeatDirection 属性自定义 DataList 的布局。

介绍

过去两个教程中看到的 DataList 示例已将其数据源中的每个记录呈现为单列 HTML <table>中的一行。虽然这是默认的 DataList 行为，但自定义 DataList 显示非常简单，以便数据源项分布在多列多行表中。此外，可以让所有数据源项显示在单行多列 DataList 中。

我们可以通过 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，以便快速完成这些步骤。首先打开 RepeatColumnAndDirection.aspx 文件夹中的 DataListRepeaterBasics 页面，然后将 DataList 从工具箱拖动到设计器。从 DataList 的智能标记中，选择创建新的 ObjectDataSource 并将其配置为从 ProductsBLL 类 s GetProducts 方法拉取其数据，从向导的 INSERT、UPDATE 和 DELETE 选项卡中选择“无”选项。

创建新的 ObjectDataSource 并将其绑定到 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>

请注意，我在数据绑定语法Eval中包含UnitPrice格式说明符，将返回的值的格式设置为货币 -Eval("UnitPrice", "{0:C}").

花点时间在浏览器中访问页面。如图 2 所示，DataList 呈现为单列多行产品表。

图 2：默认情况下，DataList 呈现为单列多行表（单击可查看全尺寸图像）

步骤 2：更改 DataList 的布局方向

虽然 DataList 的默认行为是在单列多行表中垂直布局其项，但可以通过 DataList 的属性RepeatDirection轻松更改此行为。该 RepeatDirection 属性可以接受两个可能值之一： Horizontal 或 Vertical （默认值）。

通过将属性从RepeatDirection更改为 VerticalHorizontal，DataList 在单个行中呈现其记录，为每个数据源项创建一列。若要说明此效果，请单击设计器中的 DataList，然后在“属性”窗口中，将 RepeatDirection 属性从 Vertical 更改为 Horizontal。这样做后，设计器立即调整 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 属性设置为 Horizontal 时的结果。请注意，前三种产品柴茶、昌茶和八角糖浆是从左到右、从上到下排列的。接下来的三种产品（从厨师安东的卡津调味料开始）排成一排，出现在前三个产品的下方。但是，将 RepeatDirection 属性改回 Vertical，将这些产品从上到下、从左到右布局，如图 6 所示。

图 6：此处，产品垂直布局（单击可查看全尺寸图像）

生成的表中显示的行数取决于绑定到 DataList 的总记录数。确切地说，它是数据源项总数的上限值，除以 RepeatColumns 属性值。 Products由于该表当前有 84 个产品，因为可以被 3 整除，所以有 28 行。如果数据源中的项数和 RepeatColumns 属性值不可整除，则最后一行或列将具有空白单元格。 RepeatDirection如果设置为 Vertical，则最后一列将包含空单元格;如果是RepeatDirectionHorizontal，则最后一行将包含空单元格。

概要

默认情况下，DataList 在单列多行表中列出其项，该表使用单个 TemplateField 模拟 GridView 的布局。虽然此默认布局是可接受的，但可以通过显示每行多个数据源项来最大化屏幕空间。只需将 DataList s RepeatColumns 属性设置为每行显示的列数即可完成此作。此外，DataList s RepeatDirection 属性可用于指示多列、多行表的内容应从左到右水平布局、从上到下还是从上到下、从左到右垂直布局。

关于作者

斯科特·米切尔，七本 ASP/ASP.NET 书籍的作者和 4GuysFromRolla.com 的创始人，自1998年以来一直在与Microsoft Web 技术合作。斯科特担任独立顾问、教练和作家。他的最新书是 Sams Teach Yourself ASP.NET 2.0 in 24 Hours。可以通过 mitchell@4GuysFromRolla.com 联系到他。

特别感谢

本教程系列由许多有用的审阅者审阅。本教程的主要审阅者是 John Suru。有兴趣查看即将发布的 MSDN 文章？如果是这样，请给我发个消息。mitchell@4GuysFromRolla.com

上一步下一步

通过