示例 AJAX 应用程序

  • 项目

更新：2007 年 11 月

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

在本教程中，您将生成一个应用程序，该应用程序可显示 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 网站

  1. 启动 Visual Studio。

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

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

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

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

向 ASP.NET 网页添加 UpdatePanel 控件

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

创建新的 ASP.NET 网页

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

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

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

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

  4. 选择要使用的语言。

  5. 单击**“添加”**。

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

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

    UpdatePanel 教程

  8. 从工具箱拖动 UpdatePanel 控件，将其放置到 ScriptManager 控件下。

    UpdatePanel 教程

向 UpdatePanel 控件添加内容

UpdatePanel 控件执行部分页更新，并标识独立于页面其余部分进行更新的内容。在本部分教程中，您将要添加显示 AdventureWorks 数据库中的数据的数据绑定控件。

向 UpdatePanel 控件添加内容

  1. 从工具箱的**“数据”**选项卡中，将一个 GridView 控件拖动到 UpdatePanel 控件的可编辑区域。

  2. 在**“GridView 任务”菜单中单击“自动套用格式”**。

  3. 在**“自动套用格式”面板中的“选择方案”下，选择“Colorful”，然后单击“确定”**。

  4. 在**“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”**。

    此时将显示**“数据源配置”**向导。

  5. 在**“应用程序从哪里获取数据”下，选择“数据库”，然后单击“确定”**。

  6. 在**“配置数据源”向导中，对于“选择数据连接”步骤，配置到 AdventureWorks 数据库的连接，然后单击“下一步”**。

  7. 对于**“配置 Select 语句”步骤，选择“指定自定义 SQL 语句或存储过程”，然后单击“下一步”**。

  8. 在**“定义自定义语句或存储过程”步骤的“SELECT”**选项卡中，输入下列 SQL 语句：

    SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName

  9. 单击**“下一步”**。

  10. 单击**“完成”**。

  11. 在**“GridView 任务”菜单中，选择“启用分页”**复选框。

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

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

向页添加 UpdateProgress 控件

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

向页添加 UpdateProgress 控件

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

  2. 选择 UpdateProgress 控件，并在“属性”窗口中将 AssociatedUpdatePanelID 属性设置为“UpdatePanel1”。

    这会将 UpdateProgress 控件和之前添加的 UpdatePanel 控件关联起来。

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

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

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

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

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

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

向示例应用程序添加延迟

  1. 在 UpdatePanel 控件内部，选择 GridView 控件。

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

  3. 双击 PageIndexChanged 事件以创建事件处理程序。

  4. 在 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);
    Bb398890.alert_note(zh-cn,VS.90).gif说明：

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

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

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

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    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
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

请参见

任务

UpdatePanel 控件简介

UpdateProgress 控件介绍

概念

ASP.NET AJAX 概述

添加 AJAX 和客户端功能

UpdatePanel 控件概述

UpdateProgress 控件概述