ajax 应用程序来,示例 AJAX 应用程序

示例 AJAX 应用程序

10/22/2014

本文内容

更新：2007 年 11 月

本教程创建使用 ASP.NET 的 AJAX 功能的基本示例应用程序。您可以了解到有关 ASP.NET 的 AJAX 功能的更多信息，将知道这些功能旨在解决哪些技术问题，以及以下介绍性文档将涉及哪些重要的 AJAX 组件：

ASP.NET AJAX Overview

在本教程中，您将生成一个应用程序，该应用程序可显示 AdventureWorks 示例数据库中的员工数据页。该应用程序使用 UpdatePanel 控件仅刷新页面中发生更改的部分，而不会发生页面闪烁，页面闪烁是伴随回发发生的。这称为“部分页更新”。该示例应用程序还使用 UpdateProgress 控件，在进行部分页更新时显示状态消息。

先决条件

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

Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 速成版。

一个支持 AJAX 的 ASP.NET 网站。

AdventureWorks 示例数据库。您可以从 Microsoft 下载中心下载并安装 AdventureWorks 数据库。(搜索“SQL Server 2005 示例和示例数据库(2006 年 12 月)”)。

创建 ASP.NET 网站

您在默认情况下支持 AJAX 功能的 ASP.NET 中创建的网站。

创建支持 AJAX 的 ASP.NET 网站

启动 Visual Studio。

在**“文件”菜单中，单击“新建网站”**。

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

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

输入位置和语言，然后单击**“确定”**。

向 ASP.NET 网页添加 UpdatePanel 控件

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

创建新的 ASP.NET 网页

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

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

在**“Visual Studio 已安装的模板”下选择“Web 窗体”**。

将新网页命名为“Employees.aspx”，然后清除**“将代码放在单独的文件中”**复选框。

选择要使用的语言。

单击**“添加”**。

切换到“设计”视图。

在工具箱的**“AJAX Extensions”**选项卡中，双击 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 控件

从工具箱的**“AJAX Extensions”**选项卡，将 UpdateProgress 控件拖到页面上，并将其放在 UpdatePanel 控件下。

在 UpdateProgress 控件的可编辑区域中，键入“获取雇员...”.

保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

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

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

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

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

向示例应用程序添加延迟

在“属性”窗口中，单击**“事件”**按钮。

在 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 事件的处理程序有意引入了延迟。在实际应用中，您不会引入延迟。相反，延迟是由服务器通信或需要花费很长时间处理的服务器代码造成的，例如长时间运行的数据库查询。

保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

现在，由于您向新页数据中移入了一个三秒延迟，因此您将会看到 UpdateProgress 控件。

Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)

'Include three second delay for example only.

System.Threading.Thread.Sleep(3000)

End Sub

Untitled Page

ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">

SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">

Getting employees...

protected void GridView1_PageIndexChanged(object sender, EventArgs e)

{

//Include three second delay for example only.

System.Threading.Thread.Sleep(3000);

}

Untitled Page

ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">

SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">

Getting employees...

请参见

任务

概念