演练:使用 ListView Web 服务器控件对数据进行显示、分页和排序

更新:2007 年 11 月

在本演练中,将使用 ListView 控件,在该控件中,可以以用模板定义的格式来显示数据源的数据。通过使用模板,可以完全控制数据在控件中的布局和外观。ListView 控件自动支持编辑、插入和删除操作,以及排序和分页功能。

本演练演示以下任务:

  • 使用 ListView 控件显示数据库的数据。

  • ListView 控件添加分页功能。

  • ListView 控件添加排序功能。

先决条件

若要完成本演练,您需要:

  • Visual Studio 2008 或 Visual Web Developer 2008 速成版。

  • SQL Server Express Edition。如果已经安装了 SQL Server,则可以改用 SQL Server,但必须对部分过程进行一些小调整。

  • 安装在您计算机上的 AdventureWorks 数据库。有关如何下载和安装 SQL Server 示例 AdventureWorks 数据库的信息,请参见 Microsoft SQL Server 网站上的 Installing Sample Databases for Express Editions(安装示例数据库)。

  • 有权访问 AdventureWorks 数据库的 SQL Server 帐户的用户名和密码。

创建网站

如果已经创建了一个网站(例如通过完成演练:在 Visual Web Developer 中创建基本网页),则可以使用该网站并转到下一节。否则,按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Studio 2008 或 Visual Web Developer 2008 速成版。

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

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

  3. 在“Visual Studio 已安装的模板”下单击“ASP.NET 网站”。

  4. 在第一个“位置”框中,选择“文件系统”,在第二个框中,输入用于保存网站页面的文件夹的名称。

    例如,输入文件夹名称“C:\WebSites\DisplayData”。

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

  6. 单击“确定”。

    Visual Studio 创建该文件夹和名为 Default.aspx 的新页面。

在 ListView 控件中对显示数据和按页查看数据

若要在 ASP.NET 网页上显示数据,需要下列元素:

  • 与数据源(如数据库)的连接。在下面的过程中,将创建一个到 SQL Server AdventureWorks 数据库的连接。

  • 该页上一个用于与数据源(数据库)进行交互以读写数据的数据源控件。在本演练中,将使用 SqlDataSource 控件与 SQL Server AdventureWorks 数据库进行交互。

  • 该页上一个用于显示数据的控件。在下面的过程中,将在 ListView 控件中显示数据,该控件从 SqlDataSource 控件获取其数据。

在 ListView 控件中显示数据和按页查看数据

  1. 如果网站上没有 App_Data 文件夹,则在“解决方案资源管理器”中右击项目,单击“添加 ASP.NET 文件夹”,然后单击“App_Data”。

  2. 在“解决方案资源管理器”中,右击 App_Data 文件夹,然后单击“添加现有项”。

    显示“添加现有项”对话框。

  3. 输入 AdventureWorks 数据库文件 (AdventureWorks_Data.mdf) 的位置。

    默认情况下,.mdf 文件的安装路径为 C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf。

    说明:

    此过程将创建项目中的数据库文件的副本。数据库文件过大。如果创建数据库副本不太实际,可以使用其他方法(例如直接附加数据库文件)连接到数据库。不过,本演练不介绍此操作过程。

  4. 打开或切换到 Default.aspx 文件。

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

  6. 从“工具箱”的“数据”选项卡中,将 ListView 控件拖到页面上。

    ListView 控件

  7. 在“常规 ListView 任务”菜单上的“选择数据源”下拉列表中,单击“<新建数据源...>”。

    显示“数据源配置”向导。

  8. 单击“数据库”。

    这指定您希望从支持 SQL 语句的数据库(包括 SQL Server 和其他 OLE-DB 兼容的数据库)获取数据。

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

    数据源配置向导

  10. 单击“确定”。

    显示“配置数据源”向导。

  11. 在“应用程序连接数据库应使用哪个数据连接?”下面的列表中,选择“AdventureWorks_Data.mdf”。

  12. 单击“下一步”。

    向导显示一页,在该页中可以指定将连接字符串存储在配置文件中。将连接字符串存储在配置文件中有两个优点:

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

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

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

    该向导显示一页,从该页中您可以指定要从数据库中检索的数据。

  14. 选择“指定自定义 SQL 语句或存储过程”选项。

    配置 Select 语句

    说明:

    通常,会使用“指定来自表或视图的列”选项。但是,由于 AdventureWorks 数据库具有架构名称,因此在本演练中,将创建自定义 SQL 语句。

  15. 单击“下一步”。

  16. 在“定义自定义语句或存储过程”页面中,输入以下 SQL 查询,该查询从“AdventureWorks”数据库中检索联系人数据。

    SELECT  ContactID, FirstName, LastName, EmailAddress
    FROM    Person.Contact
    

    此外,也可以单击“查询生成器”,使用“查询生成器”窗口创建查询,然后使用“执行查询”按钮对其进行验证。

    说明:

    在该向导中,可以指定选择条件(Where 子句)和其他 SQL 查询选项。在本演练中,将创建一个不带选择或排序条件的简单语句。

  17. 单击“下一步”。

  18. 单击“测试查询”确保要检索的正是所需的数据。

  19. 单击“完成”。

    该向导创建 SqlDataSource 控件并将其添加到页面。先前添加的 ListView 控件绑定到 SqlDataSource 控件。

    如果查看 SqlDataSource 控件的属性,则会看到该向导已为 ConnectionStringSelectCommand 属性创建了值。

  20. 右击 ListView 控件,单击“显示智能标记”。

  21. 在“常规 ListView 任务”菜单上单击“配置 ListView”。

    显示“配置 ListView”对话框。

  22. 选择“启用分页”。

    说明:

    可能还希望选择一个不同的样式,以便可以更加轻松地查看数据。若要执行此操作,请在“选择样式”下选择一种样式(如“彩色型”)。

    向导根据查询中的列,为 ListView 控件创建模板。通过编辑包含布局元素、控件和绑定表达式的模板,可以自定义布局。

    配置 ListView

  23. 单击“确定”。

    ListView 控件

在继续之前,可以测试 ListView 控件。

测试 ListView 控件

  1. 按 Ctrl+F5 运行该页。

    显示 ListView 控件,其中有“ContactID”、“FirstName”、“LastName”和“EmailAddress”列。

  2. 在页面底部单击“第一页”、“上一页”、“下一页”和“最后一页”按钮,可按页查看数据。

  3. 完成后,关闭浏览器。

向 ListView 控件添加排序功能

现在,将向 ListView 控件添加排序功能。通过向 ListView 控件添加一个按钮并配置该按钮,可以提供此功能。

向 ListView 控件添加排序功能

  1. 在 Default.aspx 文件中,右击 ListView 控件,然后单击“显示智能标记”。

  2. 在“常规 ListView 任务”菜单上的“当前视图”列表中,选择一个视图来编辑 LayoutTemplate 模板(如“ItemTemplate”)。

    说明:

    没有专用于编辑 LayoutTemplate 模板的视图。除“Runtime View”和“EmptyDataTemplate”之外,在“当前视图”列表中的任一视图中,都可以编辑此模板。

  3. 从“工具箱”的“标准”选项卡中,将两个 Button 控件拖到控件的底部,即分页控件所在的位置。

  4. 在“属性”窗口中,按照以下方式更改按钮的属性:

    • 将第一个按钮的 Text 属性设置为“按名排序”,将 CommandName 属性设置为“排序”,将 CommandArgument 设置为“FirstName”。

    • 将第二个按钮的 Text 属性设置为“按姓排序”,将 CommandName 属性设置为“排序”,将 CommandArgument 设置为“LastName”。

    将按钮的 CommandArgument 属性设置为一个排序表达式。对于数据库数据,这通常是某个列的名称。

  5. 保存页。

现在,可以再次测试该页。

测试排序

  1. 按 Ctrl+F5 运行该页。

  2. 单击“按名排序”和“按姓排序”按钮,以不同的方式对数据进行排序。

  3. 反复单击按钮可以在升序和降序排序顺序之间切换。

后续步骤

在本演练中,通过使用为 ListView 控件提供的布局之一,对数据记录进行显示、分页和排序,演示了该控件的基本使用步骤。您可能希望体验 ListView 控件的其他功能,研究不同的使用场合。例如,您可能希望编辑、删除和插入记录。有关更多信息,请参见演练:使用 ListView Web 服务器控件修改数据

请参见

任务

如何:在使用数据源控件时保证连接字符串的安全

演练:网页中的基本数据访问

概念

ListView Web 服务器控件概述