演练：创建支持 AJAX 的网站

项目
08/18/2008

更新：2007 年 11 月

本演练创建一个基本的 ASP.NET 网站，其中包含一个阐释 Visual Studio 附带的 ASP.NET AJAX 库的某些功能的网页。您将生成一个应用程序，以便显示 AdventureWorks 示例数据库中的雇员数据页。该应用程序使用 UpdatePanel 控件仅刷新页面中发生更改的部分，而不会发生页面闪烁，页面闪烁是伴随回发发生的。这种更新方式称为“部分页更新”。示例应用程序还使用 UpdateProgress 控件在处理部分页更新时显示状态消息。

先决条件

若要在您自己的开发环境中实现这些过程，您需要：

Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 速成版。
AdventureWorks 示例数据库。您可以从 Microsoft 下载中心下载并安装 AdventureWorks 数据库。（搜索“SQL Server 2005 示例和示例数据库（2006 年 12 月）”）。

创建网站

如果已经在 Visual Web Developer 中创建了一个网站（例如，按照演练：在 Visual Web Developer 中创建基本网页中的步骤），则可以使用该网站并转到下一节创建母版页。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

打开 Visual Web Developer。
在“文件”菜单上单击“新建网站”。

出现“新建网站”对话框。
在“Visual Studio 已安装的模板”下单击“ASP.NET 网站”。
在“位置”框中输入要保存网站网页的文件夹的名称。

例如，键入文件夹名“C:\WebSites”。
在“语言”列表中，单击您想使用的编程语言。
单击“确定”。

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

向 ASP.NET 网页添加 UpdatePanel 控件

创建一个网站之后，再创建一个包括 UpdatePanel 控件的 ASP.NET 网页。在将 UpdatePanel 控件添加到页面上之前，必须添加一个 ScriptManager 控件。UpdatePanel 控件依赖于 ScriptManager 控件来管理部分页更新。

创建新的 ASP.NET 网页

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

显示“添加新项”对话框。
在“Visual Studio 已安装的模板”下，选择“Web 窗体”。
将新网页命名为“Employees.aspx”，然后清除“将代码放在单独的文件中”复选框。
选择要使用的语言。
单击“添加”。
切换到“设计”视图。
在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件以将其添加到页上。
将 UpdatePanel 控件从工具箱拖放到 ScriptManager 控件的下方。

向 UpdatePanel 控件添加内容

UpdatePanel _控件执行部分页更新，并标识独立于页面其余部分进行更新的内容。在演练的此部分中，将添加一个数据绑定控件以显示 AdventureWorks 数据库中的数据。

向 UpdatePanel 控件添加内容

从工具箱的“数据”选项卡中，将一个 GridView 控件拖动到 UpdatePanel 控件的可编辑区域中。
在“GridView 任务”菜单中单击“自动套用格式”。
在“自动套用格式”面板中的“选择方案”下，选择“colorful”，然后单击“确定”。
在“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”。

显示“数据源配置”向导。
在“应用程序从哪里获取数据”下，选择“数据库”，然后单击“确定”。
在“配置数据源”向导中，对于“选择您的数据连接”步骤，配置与 AdventureWorks 数据库的连接，然后单击“下一步”。
对于“配置 Select 语句”步骤，选择“指定自定义 SQL 语句或存储过程”，再单击“下一步”。
在“定义自定义语句或存储过程”步骤的“SELECT”选项卡中，输入下列 SQL 语句：
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
单击“下一步”。
单击“完成”。
在“GridView 任务”菜单上，选中“启用分页”复选框。
保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

请注意，当选择不同的数据页时不会出现页面闪烁。原因是每次选择时，页都不执行回发和整页更新。

向页添加 UpdateProgress 控件

UpdateProgress 控件在请求 UpdatePanel 控件的新内容时显示状态消息。

向页添加 UpdateProgress 控件

从工具箱的“AJAX Extensions”选项卡中，将 UpdateProgress 控件拖动到页上，并将其放置在 UpdatePanel 控件的下方。
选择 UpdateProgress 控件，并在“属性”窗口中将 AssociatedUpdatePanelID 属性设置为“UpdatePanel1”。

这会将 UpdateProgress 控件和先前添加的 UpdatePanel 控件相关联。
在 UpdateProgress 控件的可编辑区域中，键入“获取雇员...”.
保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

如果在页面运行 SQL 查询和返回数据时出现延迟，则 UpdateProgress 控件将显示您输入到 UpdateProgress 控件中的消息。

向示例应用程序中添加延迟

如果应用程序快速更新每页数据，则您可能看不到页上的 UpdateProgress 控件的内容。UpdateProgress 控件支持 DisplayAfter 属性，该属性使您可以在显示该控件之前设置延迟。这可阻止当更新过快时，浏览器中发生控件闪烁。默认情况下，延迟设置为 500 毫秒（0.5 秒），这意味着如果更新的时间少于半秒，则将不会显示 UpdateProgress 控件。

在开发环境中，可以向应用程序添加人为延迟，从而确保 UpdateProgress 控件按预期方式工作。这是一个可选步骤，并且仅用于测试应用程序。

向示例应用程序添加延迟

在 UpdatePanel 控件内选择 GridView 控件。
在“属性”窗口中单击“事件”按钮。
双击 PageIndexChanged 事件以创建事件处理程序。

在 PageIndexChanged 事件处理程序中添加以下代码，人为地创建三秒钟的延迟：

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

说明：
出于本演练的需要，PageIndexChanged 事件的处理程序有意引入了延迟。在实际应用中，您不会引入延迟。相反，延迟是由服务器通信量或需要花很长时间处理的服务器代码造成的，例如长时间运行的数据库查询。