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

更新:2007 年 11 月

本演练向您演示如何使用专门设计用于数据访问的控件创建一个简单的数据绑定页。

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

  • 连接到 Microsoft Visual Web Developer Web 开发工具中的 Microsoft SQL Server 数据库。

  • 使用拖放式编辑创建无需编写代码即可在页中使用的数据访问元素。

  • 使用 SqlDataSource 控件管理数据访问和绑定。

  • 使用 GridView 控件显示数据。

  • 配置 GridView 控件以允许排序和分页。

  • 创建一个只显示选定记录的筛选查询。

先决条件

为了完成本演练,您需要:

  • 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 版本。若要下载当前 MDAC 版本,请参见“Data Access and Storage Developer Center”(数据访问和存储开发人员中心)

创建网站

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

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在“文件”菜单上单击“新建网站”。

    出现“新建网站”对话框。

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

  4. 在最右边的“位置”框中输入要保存网站网页的文件夹的名称。

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

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

  6. 单击“确定”。

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

添加显示数据的 GridView 控件

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

  • 到数据源(如数据库)的连接。

    在下面的过程中,您将创建一个到 SQL Server Northwind 数据库的连接。

  • 该页上的一个数据源控件,该控件执行查询并管理查询结果。

  • 该页上的一个用于实际显示数据的控件。

    在下面的过程中,您将通过 GridView 控件显示数据。GridView 控件将从 SqlDataSource 控件中获取其数据。

可以单独地将这三个元素添加到网站中。但通过使用 GridView 控件对数据显示进行可视化处理,然后使用向导创建连接和数据源控件,更容易着手一些。下面的过程解释如何创建在该页上显示数据所必需的所有这三个元素。

添加并配置用于显示数据的 GridView 控件

  1. 在 Visual Web Developer 中,切换到“设计”视图。

  2. 从“工具箱”的“数据”文件夹中,将 GridView 控件拖动到页面上。

  3. 如果未显示“GridView 任务”快捷菜单,则右击 GridView 控件,然后单击“显示智能标记”。

  4. 在“GridView 任务”菜单上的“选择数据源”列表中,单击“<新建数据源>”。

    出现“数据源配置”对话框。

    数据源配置向导

  5. 单击“数据库”。

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

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

  6. 单击“确定”。

    随即会显示“配置数据源”向导,其中显示了一个可在其中选择连接的页面。

    “选择连接”对话框

  7. 单击“新建连接”。

  8. 在“选择数据源”对话框的“数据源”下,单击“Microsoft SQL Server”,然后单击“继续”。

    出现“添加连接”对话框。

  9. 在“服务器名”框中,输入要使用的 SQL Server 的名称。

    “添加连接”对话框

  10. 对于登录凭据,选择与 SQL Server 数据库访问方式相应的选项(集成安全性或具体的 ID 和密码)并输入用户名和密码(如果需要)。

  11. 单击“选择或输入数据库名”,然后输入“Northwind”。

  12. 单击“测试连接”,并在确定该连接生效后单击“确定”。

    随即会显示“配置数据源 - <DataSourceName>”向导,其中填充了连接信息。

  13. 单击“下一步”。

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

    1. 比将连接字符串存储在页面中更安全。

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

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

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

  15. 在“指定来自表或视图的列”下的“名称”列表中,单击“Customers”。

  16. 在“列”下,选择“CustomerID”、“CompanyName”和“City”复选框。

    该向导随即会出现,并在该页底部的框中显示正在创建的 SQL 语句。

    “配置 Select 语句”窗格

    说明:

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

  17. 单击“下一步”。

  18. 单击“测试查询”以确保正在获取的是所需数据。

  19. 单击“完成”。

    该向导随即会关闭,您将返回到页面上。通过运行该向导,完成了下列两项任务:

    如果查看 SqlDataSource 控件的属性,可以看到该向导已为 ConnectionStringSelectQuery 属性创建了相应的属性值。

    说明:

    可以很容易更改 GridView 控件的外观。在“设计”视图中,右击 GridView 控件,然后单击“显示智能标记”。在“GridView 任务”菜单上,单击“自动套用格式”,然后应用一个主题。

测试页面

现在可以运行页面。

对页进行测试

  1. 按 Ctrl+F5 运行该页。

    该页显示在浏览器中。GridView 控件显示了 Customers 表中的所有数据行。

  2. 关闭浏览器。

添加排序和分页

您无需编写任何代码就可以将排序和分页添加到 GridView 控件中。

添加排序和分页

  1. 在“设计”视图中,右击 GridView 控件,然后单击“显示智能标记”。

  2. 在“GridView 任务”快捷菜单上,选择“启用排序”复选框。

    GridView 控件中的列标题更改为链接。

  3. 在“GridView 任务”菜单上,选择“启用分页”复选框。

    随即会向 GridView 控件添加带有页码链接的页脚。

  4. (可选)使用“属性”将 PageSize 属性值从 10 更改为较小的页大小。

  5. 按 Ctrl+F5 运行该页。

    您将能够通过单击某一列标题按该列的内容排序。如果数据源中所包含的记录数大于 GridView 控件的页大小,您将可以使用 GridView 控件底部的页导航链接在各页之间移动。

  6. 关闭浏览器。

添加筛选

通常,您希望在页上仅显示选定的数据。在本部分演练中,您将修改 SqlDataSource 控件的查询以便用户可以选择特定城市的客户记录。

首先,您将使用一个 TextBox 控件创建一个文本框,用户可以在该文本框中键入城市名称。然后,您将更改查询以包含参数化筛选(WHERE 子句)。在该过程中,您将为 SqlDataSource 控件创建一个参数元素。该参数元素确定 SqlDataSource 控件将如何为其参数化查询(即从该文本框)获取值。

在完成这一部分演练后,该页在“设计”视图中应类似于下面的形式。

设计视图中的“数据筛选”页

添加用于指定城市的文本框

  1. 从“工具箱”的“标准”组中,将一个 TextBox 控件和一个 Button 控件拖到该页上。

    Button 控件只用于将该页发布到服务器。无需为该控件编写任何代码。

  2. TextBox 控件的“属性”中,将“ID”设置为“textCity”。

  3. 如果需要,在该文本框之前键入“城市”或类似的文本以用作标题。

  4. Button 控件的“属性”中,将“文本”设置为“提交”。

现在可以修改查询以包含筛选器。

用参数化筛选器修改查询

  1. 右击 SqlDataSource 控件,然后单击“显示智能标记”。

  2. 在“SqlDataSource 任务”菜单上单击“配置数据源”。

    随即会显示“配置数据源 - <数据源名称>”向导。

  3. 单击“下一步”。

    该向导显示当前为 SqlDataSource 控件配置的 SQL 命令。

  4. 单击“WHERE”。

    出现“添加 WHERE 子句”页。

  5. 在“列”列表中单击“City”。

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

  7. 在“源”列表中单击“控件”。

  8. 在“参数属性”下的“控件 ID”列表中,单击“textCity”。

    “添加 Where 子句”对话框

    上述五个步骤指定查询将从前面过程中添加的 TextBox 控件中获取搜索到的“城市”值。

  9. 单击“添加”。

    创建的 WHERE 子句将显示在该页底部的框中。

  10. 单击“确定”关闭“添加 WHERE 子句”页。

  11. 在“配置数据源 - <数据源名称>”向导中单击“下一步”。

  12. 在“测试查询”页上,单击“测试查询”。

    该向导将出现,并显示“参数值编辑器”页面,该页将提示您输入一个用在 WHERE 子句中的值。

  13. 在“值”框中,键入 London,然后单击“确定”。

    随即会显示伦敦的客户记录。

  14. 单击“完成”关闭向导。

现在可以测试筛选。

测试筛选

  1. 按 Ctrl+F5 运行该页。

  2. 在文本框中,键入“伦敦”,然后单击“提交”。

    随即会在 GridView 控件中显示来自城市伦敦的客户列表。

  3. 尝试输入其他城市,如“布宜诺斯艾利斯”和“柏林”。

后续步骤

数据访问是许多 Web 应用程序的重要部分,本演练只提供了可对网页中的数据执行的一小部分功能。您可能希望体验数据访问的其他功能。例如,您可能希望执行下列操作:

请参见

概念

数据源控件概述