演练：创建支持 AJAX 的数据应用程序

更新：2007 年 11 月

本演练介绍如何创建支持 AJAX 的 Web 应用程序，以用作待办事项列表或任务列表。它将帮助您创建一个基本的用户界面，以供创建、管理和删除列表以及显示这些列表中的项时使用。所有插入、更新、删除、排序和分页操作都在使用 AJAX 的 UpdatePanel 控件内执行。

使用 UpdatePanel 控件可以在页面上实现异步回发。默认情况下，ASP.NET 会在发生回发时刷新整个页面。但是，在使用 UpdatePanel 控件创建异步回发时，将只更改 UpdatePanel 控件内部的页面元素。这样，页面不仅看起来更具动态效果，而且执行速度也更快，因而可提供更为丰富的用户体验。

本演练阐释以下任务：

• 创建 SQL 数据库和添加数据。

• 向页面中添加 LinqDataSource 控件。

• 添加“LINQ to SQL 类”文件。

• 使用 ListView 控件显示、编辑和删除数据。

• 通过语言集成查询 (LINQ) 用 LinqDataSource 控件连接至数据库。有关更多信息，请参见语言集成查询 (LINQ)。

• 使用 UpdatePanel 控件向页面中添加 AJAX 功能。

先决条件

若要完成此演练，需要以下组件：

• Microsoft Visual Studio 2008 或 Visual Web Developer 2008 速成版。有关下载信息，请参见 Visual Studio Development Center（Visual Studio 开发中心）网站。

• 在计算机上安装 SQL Server Express Edition。如果已经安装了 SQL Server，则可以改用 SQL Server，但必须对某些过程进行小的调整。

创建网站

在本部分演练中，您将创建一个网站并为其添加页。在下一节中，您将连接至一个数据库。如果已经创建了网站（例如，通过按照演练：在 Visual Web Developer 中创建基本网页中介绍的步骤创建），则可以在本演练中使用该网站。否则，按照下面的步骤创建一个新的网站。

创建新的文件系统网站

1. 在 Visual Web Developer 的“文件”菜单上，单击“新建网站”。

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

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

3. 在“位置”框中，单击“文件系统”，然后键入要用于保存网站页面的文件夹的名称。

4. 在“语言”列表中，单击“Visual Basic”或“Visual C#”，然后单击“确定”。

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

   Visual Web Developer 将创建该文件夹以及名为 Default.aspx 的新页。

创建新的 SQL Server 数据库

现在您已拥有一个网站，下一步是在“服务器资源管理器”中创建数据库并添加对该数据库的引用（在 Visual Web Developer 2008 速成版中，“服务器资源管理器”名为“数据库资源管理器”）。在向“服务器资源管理器”中添加数据库时，可以使用 Visual Studio 添加表、存储过程、视图等。此外，您还可以查看表数据或创建自己的查询，此操作可手动完成，也可以使用“查询生成器”窗口以图形方式完成。

向项目中添加数据库

1. 在“解决方案资源管理器”中，右击网站名称，然后单击“添加新项”。

   显示“添加新项”对话框。

2. 选择“SQL 数据库”，将数据库命名为“Tasks.mdf”，然后单击“确定”。

3. 当 Visual Studio 询问是否应将该数据库存储在 App_Data 文件夹中时，请单击“是”。

为数据库创建架构和示例数据

您可以使用数据库设计和编辑功能为存储任务项的新表创建架构。

为数据库创建架构和示例数据

1. 在“解决方案资源管理器”中打开“App_Data”文件夹，然后双击“Tasks.mdf”。

   Tasks 数据库的目录树层次结构将显示在“服务器资源管理器”（或“数据库资源管理器”）中。

2. 右击“表”文件夹，然后单击“添加新表”。

3. 在数据库表编辑器中，创建以下表列：

   列名	数据类型	属性
   taskId	int	“允许为 Null”：“否”
   taskName	nvarchar(50)	“允许为 Null”：“否”
   dateCreated	datetime	“允许为 Null”：“否”
   isComplete	bit	“允许为 Null”：“否”

4. 右击 taskid 所在的行，然后单击“设置主键”。

5. 保持 taskid 行的选中状态不变，并在“列属性”选项卡中打开“标识规范”部分，然后将“(是标识)”设置为“是”。

6. 保存该表并将其命名为“TasksList”。

7. 在“服务器资源管理器”中右击该表，然后单击“显示表数据”。

   将显示一个窗口，您可以在其中查看和添加数据。

8. 向该表中添加四到五条记录，然后关闭数据库设计器。

   您无需指定 taskid 的值，因为它是自动赋值的标识列。对于 isComplete 字段，必须指定 False 或 True。

创建数据访问控件

在本节中，您将使用 LinqDataSource 控件并创建表示数据库实体的类。在本演练中，该控件和创建的类将用作数据访问层。

LinqDataSource 控件通过 ASP.NET 数据源控件结构向 Web 开发人员公开语言集成查询 (LINQ)。LinqDataSource 控件用于创建在数据库中选择、插入、更新和删除对象的代码。LINQ 将面向对象的编程原则应用于关系数据。LINQ 提供了一种用于在不同类型的数据源中查询和更新数据的统一编程模型，并将数据功能直接扩展到 C# 和 Visual Basic 语言中。有关 LINQ 的更多信息，请参见语言集成查询 (LINQ)。

将 Tasks 数据库映射到 SQL 数据上下文对象

若要创建数据访问层，首先要向项目中添加类型化数据集。

创建 TasksList 表的类

1. 如果网站中还没有 App_Code 文件夹，请在“解决方案资源管理器”中右击网站的名称，再单击“添加 ASP.NET 文件夹”，然后单击“App_Code”。

2. 右击 App_Code 文件夹，然后单击“添加新项”。

3. 在“Visual Studio 已安装的模板”下选择“LINQ to SQL 类”，将该文件重命名为“Tasks.dbml”，然后单击“添加”。

   此时将显示“对象关系设计器”。

4. 在“服务器资源管理器”中，将“TasksList”表拖到“对象关系设计器”窗口中。

5. 保存“Tasks.dbml”文件。

   保存该文件时，Visual Studio 将在“App_Code”文件夹的“Tasks.dbml”下方创建两个文件。第一个文件是 Tasks.dbml.layout。第二个文件是 Tasks.designer.cs 或 Tasks.designer.vb，具体取决于您在创建“Tasks.dbml”文件时所选择的语言。

6. 在“解决方案资源管理器”中，打开 Tasks.designer.cs 或 Tasks.designer.vb 文件。

   请注意，该代码包含名为 TasksDataContext 和 TasksList 的类。TasksDataContext 类表示数据库，TasksList 类则表示数据库表。TasksDataContext 类的无参数构造函数将从 Web.config 文件中读取连接字符串。

7. 打开 Web.config 文件。

   请注意，Tasks.mdf 数据库的连接字符串已添加到 connectionStrings 元素中。

8. 关闭该类文件、“对象关系设计器”窗口以及 Web.config 文件。

创建和配置 LinqDataSource 控件

现在，您已拥有一个数据库表和若干表示数据库实体的类，下面即可在 ASP.NET 网页上使用 LinqDataSource 控件来访问该数据库。

创建和配置 LinqDataSource 控件

1. 打开或切换到 Default.aspx 页。

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

3. 将一个 LinqDataSource 控件拖到页上。

   您可以将 ID 属性保留为 LinqDataSource1。

4. 在“LinqDataSource 任务”智能标记面板中，单击“配置数据源”。

   说明：
   如果没有显示智能标记面板，请右击 LinqDataSource 控件，然后单击“显示智能标记”。

5. 在“请选择上下文对象”列表中，选择 TasksDataContext，然后单击“下一步”。

6. 在“表”列表中，选择“TasksList(表<TasksList>)”[TasksLists(Table<TasksList>)]，然后单击“完成”。

7. 在“LinqDataSource 任务”菜单中，选择“启用删除”、“启用插入”和“启用更新”。

   请注意，您不必为选择数据指定任何数据库命令。

8. 保存页。

使用数据源控件

在本节中，您将向页面添加使用 LINQ to SQL 类文件的控件，以便将数据库表映射到这些类。此外还将使用 LinqDataSource 控件创建基本的数据应用程序。

首先，您要添加一个 ListView 控件来显示 SQL Server 数据库中的数据。接着要添加一个 DropDownList 控件，以筛选 ListView 控件中显示的数据。在本演练后面的部分中，您要将这两个控件放置到 UpdatePanel 控件中，以添加异步回发功能。

使用 ListView 控件显示数据

ListView 控件对于显示重复结构中的数据很有用，它类似于 DataList 和 Repeater 控件。但与这两种控件不同的是，ListView 控件不仅支持编辑、插入和删除操作，还支持排序和分页操作。

首先，您要添加一个 ListView 控件来演示所有这些任务。随后，您将添加一个下拉列表来筛选数据。ListView 控件可设置数据表示形式的格式，并显示可用于编辑和更新内容或插入新内容的按钮。

向页面中添加 ListView 控件

1. 打开或切换至已添加 LinqDataSource 控件的页面。

2. 从“工具栏”的“数据”选项卡中，将 ListView 控件拖到页面上。

3. 在“ListView 任务”菜单的“选择数据源”列表中，选择 LinqDataSource1。

   这会将 ListView 绑定到本演练前面配置的 LinqDataSource 控件。

4. 在“ListView 任务”智能标记面板中，单击“配置 ListView”。

5. 在“配置 ListView”对话框中，选择“启用编辑”、“启用插入”、“启用删除”和“启用分页”。

6. 单击“确定”。

7. 保存页。

添加 DropDownList 控件以筛选数据

通过创建允许选择要显示的任务的下拉列表，可以筛选 ListView 控件中显示的数据。在此示例中，您将创建一个列表，并在其中显示处于活动状态的任务或已经完成的任务。

通过在 ListView 控件中添加适当的代码可自动生成一个 Where 子句，以仅显示与 DropDownList 控件中的选项匹配的记录。

添加控件以筛选数据

1. 打开或切换到 Default.aspx 页，然后切换到“源”视图。

2. 在 form 元素内的 ListView 控件上方，添加以下标记：

   <span id="filter">
     Current List Filter: 
     <asp:DropDownList ID="DropDownList1" 
       AutoPostBack="true" 
       runat="server">
     <asp:ListItem Text="Active" Value="False" />
     <asp:ListItem Text="Completed" Value="True" />
     </asp:DropDownList>
   </span>
   <hr id="separator" />
   

3. 在 LinqDataSource 控件中，将 AutoGenerateWhereClause 属性设置为 true，如下面的示例所示：

   <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
     ContextTypeName="TasksDataContext" 
     TableName="TasksLists" 
     EnableDelete="True" 
     EnableInsert="True" 
     EnableUpdate="True" 
     AutoGenerateWhereClause="true" >
   

4. 将以下标记作为 Where 参数添加到 LinqDataSource 控件的开始标记和结束标记之间。

   <WhereParameters>
     <asp:ControlParameter 
       Name="isComplete" 
       ControlID="DropDownList1" 
       Type="Boolean" />
   </WhereParameters>
   

5. 保存页。

现在即可测试该页是否会显示所选的数据。

测试页面

1. 按 Ctrl+F5 在浏览器中显示该页。

2. 从下拉列表中选择“Completed”（已完成）。

   如果存在标记为已完成的任务，将只显示这些任务。

向页面中添加 AJAX 功能

在本节中，您将向页面中添加一个 ScriptManager 控件，以启用 ASP.NET 的 AJAX 功能。随后，您将向页面中添加一个 UpdatePanel 控件。利用该控件，无需整页回发即可执行 ListView 控件中的任务。

添加 ScriptManager 控件

若要使用任何 ASP.NET AJAX 功能（例如 UpdatePanel 控件），必须向页面中添加 ScriptManager 控件。

向页面中添加 ScriptManager 控件

1. 打开或切换到 Default.aspx 页，然后切换到“源”视图。

2. 在“工具箱”的“AJAX Extensions”选项卡中双击 ScriptManager 控件，以将其添加到页面的 form 元素内。

将 ListView 控件放置在 UpdatePanel 控件中

在此示例中，您要将 ListView 放置在 UpdatePanel 控件中。更改 ListView 控件将不需要完全回发。

将 ListView 控件放置在 UpdatePanel 控件中

1. 在 Default.aspx 页中，将以下标记直接添加到开始标记 <form> 之后：

   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
   

2. 将以下标记直接添加到结束标记 </form> 之前：

   </ContentTemplate>
   </asp:UpdatePanel>
   

   此代码会将 ListView 控件和 DropDownList 控件放置在 UpdatePanel 控件内。

3. 保存页。

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

测试页面

• 按 Ctrl+F5 在浏览器中查看页面。

  请注意，当您从列表筛选器中选择“Active”（活动）或“Completed”（已完成）时，并不进行完全回发，而 ListView 将显示更新的数据列表且没有半点闪烁。

后续步骤

本演练演示如何向包含 LinqDataSource 控件的页面添加 ListView，以便在数据库中添加、修改和删除任务。随后，您又使用 UpdatePanel 控件添加了 AJAX 功能。

有关如何使用数据库的更多信息，请参见演练：到自定义业务对象的数据绑定和演练：在 Visual Studio 中创建主/详细信息网页等演练。

请参见

概念

LinqDataSource Web 服务器控件概述

ASP.NET AJAX 概述

部分页呈现概述