演练：使用 DataList Web 服务器控件显示并格式化数据

更新：2007 年 11 月

网页中的一个常见任务就是显示数据，该任务实际上就是创建数据报表。在本演练中，您将使用 DataList 控件，该控件使您可以为显示在 ASP.NET 网页上的记录创建任意形式的布局。

通过此演练，您将学会如何执行以下任务：

• 添加一个 DataList 控件并使用模板对该 DataList 控件所显示的数据进行布局。

• 将 DataList 控件绑定到数据源。

• 向 DataList 控件添加一个子数据控件及一些代码以用主/详细关系显示数据。

先决条件

若要完成本演练，您需要：

• Microsoft Visual Web Developer (Visual Studio)。

• SQL Server Northwind 数据库的访问权限。有关下载和安装 SQL Server 示例数据库 Northwind 的信息，请参见位于 Microsoft SQL Server 网站上的“Installing Sample Databases”（安装示例数据库）。

  说明：
  如果需要有关如何登录到运行 SQL Server 的计算机的信息，请与服务器管理员联系。

• Microsoft 数据访问组件 (MDAC) 2.7 版或更高版本。

  如果使用的是 Microsoft Windows XP 或 Windows Server 2003，那么您已经有了 MDAC 2.7。但是，如果使用 Microsoft Windows 2000，您可能需要升级您计算机上已经安装的 MDAC。有关更多信息，请参见 MSDN Library 中的“Microsoft Data Access Components (MDAC) Installation”（Microsoft 数据访问组件 (MDAC) 安装）。

创建网站

按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

1. 打开 Visual Web Developer。

2. 在**“文件”菜单上单击“新建”，然后单击“网站”。如果您使用的是 Visual Web Developer 速成版，则在“文件”菜单上单击“新建网站”**。

   显示**“新建网站”**对话框。

3. 在**“Visual Studio 已安装的模板”下选择“ASP.NET 网站”**。

4. 在**“位置”框中选择“文件系统”**，然后输入要保存网站网页的文件夹的名称。

   例如，键入文件夹名“C:\WebSites\FormatDataList”。

5. 在**“语言”**列表中，单击您想使用的编程语言。

   您选择的编程语言将是网站的默认语言，但您可以为每个页分别设置编程语言。

6. 单击**“确定”**。

   Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

添加 DataList 控件

在本演练的第一部分中，您将添加一个 DataList 控件，然后配置它的数据源。

添加并配置 DataList 控件以用网格显示数据

1. 切换到“设计”视图。

2. 在**“工具箱”中，从“数据”组中将“DataList”**控件拖到页上。

3. 右击**“DataList”控件，然后单击“显示智能标记”**。

4. 在**“DataList 任务”菜单上的“选择数据源”列表中，单击“新建数据源”**。

   出现**“配置数据源”**向导。

5. 单击**“数据库”**。

   此选项指定要从支持 SQL 语句的数据库中获取数据。（此类数据库包括 SQL Server 和其他与 OLE-DB 兼容的数据库。）

6. 在**“为数据源指定 ID”框中，将显示默认的数据源控件名称（“SqlDataSource1”**）。可以保留此名称。

7. 单击**“确定”**。

   **“配置数据源”**向导随即会显示一个可在其中创建连接的页。

8. 单击**“新建连接”**。

   • 如果出现**“选择数据源”页，则在“数据源”列表中选择将要使用的数据源类型。对于此演练，数据源类型为“Microsoft SQL Server”。在“数据提供程序”列表中单击“用于 SQL Server 的 .NET Framework 数据提供程序”，然后单击“继续”**。

   出现**“添加连接”**页。

9. 在**“添加连接”页上的“服务器名”**文本框中，键入运行 SQL Server 数据库的计算机的名称。

10. 在登录凭据中，选择可用于访问运行 SQL Server 数据库的计算机的选项（集成安全性或特定的 ID 和密码），并在需要时输入一个用户名和密码。

11. 选择**“保存密码”**复选框。

12. 单击**“选择或输入数据库名称”**按钮，然后输入“Northwind”。

13. 单击**“测试连接”，并在确定该连接生效后单击“确定”**。

    随即会显示**“配置数据源”**向导并在其中显示所填写的连接信息。

14. 单击**“下一步”**。

    该**“配置数据源”**向导显示一页，从该页中您可以选择将连接字符串存储到配置文件中。将连接字符串存储在配置文件中有两个优点：

    • 比将它存储在页面中更安全。

    • 可以在多个页中重复使用同一连接字符串。

15. 确保选中**“是，将此连接另存为”复选框，然后单击“下一步”**。可以保留默认连接字符串。

    该**“配置数据源”**向导显示一页，从该页中您可以指定要从数据库中获取的数据。

16. 确保选中了**“指定来自表或视图的列”**。

17. 在**“名称”列表中单击“类别”**。

18. 在**“列”下，选择“CategoryID”和“CategoryName”**复选框。

    **“配置数据源”**向导随即会在该页底部的框中显示正在创建的 SQL 语句。

    说明：
    “配置数据源”向导允许您指定选择条件（WHERE 子句）和其他 SQL 查询选项。在本部分演练中，您将创建一个不带选择或排序选项的简单语句。

19. 单击**“下一步”**。

20. 单击**“测试查询”**以确保您获取的是所需数据。

21. 单击**“完成”**。

    “配置数据源”向导随即会关闭，并且您将返回到“SqlDataSource”控件。如果查看“SqlDataSource”控件的属性，可以发现“配置数据源”向导已为 ConnectionString 和 SelectQuery 属性创建了相应的属性值。即使 Visual Web Developer 中的“属性”显示了完整的连接字符串，也只在页中保存连接字符串标识符（在本例中，该标识符为“NorthwindConnectionString”）。

设置 DataList 控件布局的格式

此时，页上已包含了一个 DataList 控件，该控件为 Categories 表中的信息使用默认布局。DataList 控件的优点是可以为数据创建任意格式的布局。在本部分中，您将使用一个模板并将用文本和控件对该模板进行配置以自定义数据显示。

设置 DataList 控件布局的格式

1. 右击**“DataList”控件，单击“编辑模板”，然后单击“项模板”**。

   **“DataList”**控件将切换到模板编辑模式并显示下列这些模板的模板框：

   • “ItemTemplate”，该模板包含默认情况下显示在**“DataList”**控件中的文本和控件。

   • AlternatingItemTemplate，该模板是一个可选模板，可在其中创建用于其他每条数据记录的布局。通常，AlternatingItemTemplate 属性类似于 ItemTemplate 属性，但 AlternatingItemTemplate 属性使用其他背景颜色创建带状效果。

   • SelectedItemTemplate，该模板为通过使用按钮单击或其他操作显式选择的数据记录定义布局。此模板的典型用法是提供数据记录的展开视图或用作主/详细关系的主记录。必须编写代码，才能支持将记录置于选定模式中。（在本演练中不用这么做。有关更多信息，请参见如何：允许用户选择 DataList Web 服务器控件中的项和演练：在 Visual Studio 中创建主/详细信息网页。）

   • EditItemTemplate，该模板为数据记录的编辑模式定义布局。通常，EditItemTemplate 属性包含用户可在其中修改数据记录的可编辑控件，如 TextBox 和 CheckBox 控件。必须编写代码，才能将记录置于编辑模式并在完成编辑时保存该记录。（在本演练中不用这么做。有关如何编写用于编辑记录的代码的信息，请参见如何：允许用户编辑 DataList Web 服务器控件中的项。）

   默认情况下，Visual Web Developer 使用数据源中每个数据列的数据绑定 Label 控件来填充项模板。此外，Visual Web Developer 还为用作标题的每个标签生成静态文本。

2. 拖动右侧尺寸柄以扩宽**“DataList”**控件，使其占据大部分页宽。

3. 编辑项模板以重新排列 Label 控件，并创建一个新标题以便该模板内容类似于下面的代码示例。

   Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
   

4. 单击**“CategoryNameLabel”控件。在“属性”中，展开“字体”节点，然后将“粗体”**设置为 true。

5. 在“设计”视图中的**“DataList”控件上，右击标题栏，单击“编辑模板”，然后单击“分隔符模板”**。

   分隔符模板使您可以指定在各数据记录之间显示哪些文本或哪些其他元素。

6. 从**“工具箱”的“HTML”组中，将一个“水平标尺”**元素拖到分隔符模板中。

7. 在**“DataList”控件上，右击标题栏，然后单击“结束模板编辑”**。

测试 DataList 控件

现在可以测试已创建的布局。

测试 DataList 控件

• 按 Ctrl+F5 运行该页。

  该页显示一个类别名称和 ID 的列表，并且每条记录之间用一条线隔开。

在 DataList 控件中显示相关信息

您当前所使用的 DataList 控件使用前面定义的自定义布局显示各条 Category 记录。只是略微更改了默认布局，就可以看到通过使用模板，可以排列文本和控件，设置内容的格式，并可以用其他方式修改数据记录显示。

布局可以包含当前记录以及相关记录。在本部分演练中，您将对布局进行更改，以便每一行显示一个类别及属于该类别的产品。实际上，就是在 DataList 控件的每一行中显示一个主/详细关系。您将需要编写一小段代码来实现此方案。

在 DataList 控件中显示相关信息

1. 右击**“DataList”控件，单击“编辑模板”，然后单击“项模板”**。

2. 从**“工具箱”的“标准”组中，将一个“BulletedList”控件拖到项模板上，然后将该“BulletedList”**控件放在类别信息下。

   **“BulletedList”**控件可以显示数据，每个项目符号项表示一个数据列。

3. 右击**“BulletedList”控件，然后单击“显示智能标记”**。

4. 单击**“选择数据源”**。

   您将创建另一个数据源控件来读取相关记录。

5. 在**“选择数据源”对话框的“选择数据源”列表中，单击“新建数据源”**。

6. 单击**“数据库”**。

7. 在**“为数据源指定 ID”**框中，键入“bulletedListDataSource”。

   虽然通常可以保留数据源的默认名称，但在本例中向数据源指定一个特定的可预知名称十分有用，这样以后可以在代码中引用该名称。

8. 单击**“确定”**。

   出现**“配置数据源”**向导。

9. 在**“应用程序连接数据库应使用哪个数据连接?”列表中，单击在本演练的前面部分创建的连接的名称，然后单击“下一步”**。

   **“配置数据源”**向导随即会显示一个可在其中创建 SQL 语句的页。

10. 在**“指定来自表或视图的列”下的“名称”框中，单击“Products”**。

11. 在**“列”框中，选择“ProductName”**框。

    **“BulletedList”**控件将只显示一个列。

12. 单击**“WHERE”**按钮。

    即会出现**“添加 WHERE 子句”**对话框。

13. 在**“列”列表中单击“CategoryID”**。

14. 在**“运算符”列表中单击“=”**。

15. 在**“源”列表中单击“无”**。

    这表示**“CategoryID”**列的值将不通过变量提供。

16. 依次单击**“添加”、“确定”、“下一步”，然后单击“完成”**。

    测试该查询是否将不使用变量。

17. 在**“选择要在 BulletedList 中显示的数据字段”列表中，单击“ProductName”。单击“确定”**。

18. 在**“DataList”控件中，右击标题栏，然后单击“结束模板编辑”**。

编写用于设置类别 ID 的代码

为 bulletedListDataSource 控件创建的 SQL 语句类似于下面的代码：

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

在运行时，DataList 控件显示类别记录列表，该列表包含类别名称和类别 ID。在上一部分中，您已添加了将显示每个类别的所有产品的 BulletedList 控件。在显示每条类别记录时，DataList 控件使用上述查询执行获取该类别产品的查询。

对于所显示的每条记录，必须为该查询提供类别 ID。可通过编写一小段代码来实现此功能，该代码从当前所显示的记录获取类别 ID，然后在 bulletedListDataSource 控件中将类别 ID 作为一个参数传递给该查询。

编写用于设置类别 ID 的代码

1. 单击**“DataList”控件，然后在工具栏上的“属性”中单击“事件”**。

2. 双击**“ItemDataBound”**以便为该事件创建一个事件处理程序。

3. 将下面的代码复制到处理程序中。

   If e.Item.ItemType = ListItemType.Item Or _
       e.Item.ItemType = ListItemType.AlternatingItem Then
     Dim ds As SqlDataSource
     ds = CType(e.Item.FindControl("bulletedListDataSource"), _
         SqlDataSource)
     Dim categoryID As String
     categoryID = DataBinder.Eval(e.Item.DataItem, _
         "categoryid").ToString()
     ds.SelectParameters("CategoryID").DefaultValue = _
         categoryID
   End If
   

   if (e.Item.ItemType == ListItemType.Item ||
       e.Item.ItemType == ListItemType.AlternatingItem)
   {
     SqlDataSource ds;
     ds = e.Item.FindControl("bulletedListDataSource")
         as SqlDataSource;
     ds.SelectParameters["CategoryID"].DefaultValue =
         DataBinder.Eval(e.Item.DataItem,
         "categoryid").ToString();
   }
   

   将为所显示的每条数据记录引发 ItemDataBound 事件，从而允许您读取或修改数据。这段代码执行下面的操作：

   1. 检查在绑定**“ItemTemplate”或“AlternatingItemTemplate”对象（不是“SeparatorTemplate”**对象或其他类型的模板）时是否发生了该事件。

   2. 使用 FindControl 方法获取对在每个项模板中创建的 SqlDataSource 控件实例的引用。

   3. 通过计算当前 DataItem 属性获取 CategoryID 数据列的值。

   4. 设置参数化查询的 CategoryID 变量，方法是在 SelectParameters 集合中设置该变量的 DefaultValue 属性。

测试代码

现在可以测试该代码。

测试用于设置类别 ID 的代码

• 按 Ctrl+F5 运行该页。

  **“DataList”**控件显示了每条类别记录，并且还针对每条记录在项目符号列表中显示了属于该类别的产品。

后续步骤

本演练阐释了一个使用 DataList Web 服务器控件显示数据和设置数据格式的简单而完整的方案。您可以使用本演练中所阐释的技术和控件创建更复杂的由数据驱动的页和应用程序。例如，您可能希望：

• 编写使用户可以在 DataList Web 服务器控件中选择项的代码。有关更多信息，请参见如何：允许用户选择 DataList Web 服务器控件中的项。

• 为主/详细关系创建一条主记录。有关更多信息，请参见演练：在 Visual Studio 中创建主/详细信息网页。

• 了解如何在数据应用程序中使用输出缓存来提高性能。有关更多信息，请参见演练：使用输出缓存增强网站性能。

请参见

任务

如何：允许用户选择 DataList Web 服务器控件中的项

演练：在 Visual Studio 中创建主/详细信息网页

参考

DataList