创建您的第一个 ASP.NET AJAX 1.0 应用程序

Michael O'Brien / InnerWorkings

2.00/5 (1投票)

2007年2月5日

CPOL

7分钟阅读

92561

本文介绍了如何使用 Microsoft 的 ASP.NET AJAX 扩展来为现有的 ASP.NET 网页启用 AJAX。该框架提供的 UpdatePanel 控件通过定义您希望独立更新的页面区域，无需进行完整的页面重新加载，从而使 AJAX 编程变得非常容易。

从 InnerWorkings 下载免费的 ASP.NET AJAX Drill

引言

在过去一年左右的时间里，AJAX 以闪电般的速度席卷了 Web 开发界。AJAX 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的缩写，它是一种构建动态 Web 应用程序的方法，使应用程序的行为不像我们习惯的静态网页，而更像桌面应用程序。

AJAX 的核心是 XmlHttpRequest 对象，该对象最初由 Microsoft 设计，用于提供 Exchange Web Access 富含 Outlook 风格的界面。网页上的 JavaScript 可以使用 XmlHttpRequest 的一个实例向生成页面的 Web 服务器发送请求，然后利用响应更新页面的一部分，而无需浏览器重新加载所有内容。这可以使应用程序更快——与传输和渲染整个页面相比，浏览器只需获取更新当前页面所需的内容。

尽管支持 AJAX 风格的 Web 应用程序的技术已经存在多年，但在引入能够处理额外复杂性（更不用说跨浏览器差异）的框架之前，它们并未被广泛使用。Microsoft 的 ASP.NET AJAX framework 是最新的框架之一，它刚刚发布了 1.0 版本，此前曾以代号“Atlas”进行了一年的预发布。

本文将介绍如何使用 Microsoft 的 ASP.NET AJAX 扩展为现有的 ASP.NET 网页启用 AJAX。该框架提供的 UpdatePanel 控件通过定义您希望独立更新的页面区域，使 AJAX 编程变得非常容易，无需进行完整的页面重新加载。

一旦您掌握了基础知识，您将使用 InnerWorkings 的编码挑战，它提供了一个示例 AJAX 启用的 bug 跟踪网站，以帮助您真正理解如何使用 AJAX 扩展。

什么是 Microsoft ASP.NET AJAX？

Microsoft ASP.NET AJAX 是一个免费框架，旨在更轻松地使用 ASP.NET 编写现代 AJAX 风格的应用程序。该框架包含两部分——一个跨浏览器 JavaScript 库和一套服务器端 ASP.NET 控件。JavaScript 库不仅能启用 AJAX 应用程序，还提供了面向对象的 JavaScript 扩展，使编写需要处理大量浏览器数据的复杂应用程序更加容易。在服务器端，一套新的和增强的 ASP.NET 控件使得通过简单地将控件添加到页面即可编写 AJAX 应用程序成为可能，就像非 AJAX 应用程序一样。实际上，您无需编写一行 JavaScript 即可创建功能齐全的 AJAX 应用程序。

除了 ASP.NET AJAX 本身，还有另外两个可供下载的选项可以为您的站点添加 AJAX 功能。 AJAX Futures CTP（社区技术预览）是一系列新功能，将在未来添加到主要的 AJAX Extensions 框架中。 AJAX Control Toolkit 包含预先编写的组件，如可在页面上拖动的面板和评分控件，允许用户提交反馈。

什么是 InnerWorkings 开发者编码挑战？

InnerWorkings 开发者编码挑战是 Visual Studio 中的一个代码示例，其中缺少几个关键部分。每个挑战都包含精选的参考链接，这些链接专门选择以便您轻松找到如何填补空白、完成示例应用程序并同时学习新技术。完成后，InnerWorkings Developer 会自动检查您的代码，这样您就可以确保您已正确解决了挑战，并且真正理解了您所学到的内容。

编码挑战旨在让您深入了解您想了解的技术的核心，重点关注最重要、最实用的功能。由于一切都已为您设置好，您可以直接开始编码。

InnerWorkings Developer 拥有数百个挑战库，涵盖从 ASP.NET 到 Windows Communication Foundation 的各种主题。有关更多信息，请查看我们的目录。

UpdatePanel 如何工作？

UpdatePanel 旨在以最简单的方式为您的网站启用 AJAX，重点关注 AJAX 最重要的功能：将更新限制在页面内的某个区域，而不是要求完全刷新。尽管它完全改变了浏览器请求的方式，但 UpdatePanel 的编写方式使得您的页面可以正常执行，这意味着您无需重写任何控件或服务器端逻辑。

当浏览器加载 AJAX 框架时，会向页面上的每个表单元素添加一个 JavaScript onsubmit 处理程序。当表单提交时，处理程序会检查这是否应该是一个“部分更新”——由 update panel 处理的更新。如果是，它会收集正在发送到服务器的所有数据，重新打包，然后发送，而不是作为常规浏览器请求，而是使用 XmlHttpRequest 对象发送。在浏览器中，onsubmit 处理程序现在返回 false，有效地告诉浏览器取消完整的页面刷新。同时，请求已到达您的 Web 服务器，看起来就像一个普通请求，但有一个区别：一个额外的 HTTP 标头让 AJAX 基础结构知道这是一个部分更新。

页面正常执行，输出被收集准备发送到浏览器。但在发送之前，又一个 AJAX 魔术发生了。所有不需要为 UpdatePanel 使用的东西都被剥离，并发送了一些额外的数据（包括未包含在 UpdatePanel 中的控件的更新的隐藏字段和 ViewState）。

当这些数据返回到浏览器时，JavaScript 库会更新所有内容，包括 UpdatePanel 的内容，以及所有额外的数据。如果您的 ASP.NET 页面更新了页面标题甚至页面的 CSS 样式，所有这些都会自动更新。

使用 UpdatePanel

尽管有所有这些自动支持，但使用 UpdatePanel 却非常简单。有一些小的安装工作——一旦安装了 AJAX 扩展，只需要在您的 web.config 文件中添加几处粘贴即可。（添加这些的最简单方法是复制应该安装到 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\web.config 或类似位置的示例配置文件，具体取决于您安装扩展的位置。）之后，您可以通过在网页中添加两个标签来为您的网站启用 AJAX：一个 ScriptManager 和一个 UpdatePanel 本身。

ScriptManager 控件管理 AJAX JavaScript 库，并编写 <script> 标签以告知浏览器需要下载什么。这个过程大部分是自动的，尽管您也可以配置该控件以包含您自己的脚本，或生成用于调用服务器上托管的 Web 服务的 JavaScript。要将 ScriptManager 添加到您的页面，只需在页面内的任何服务器端表单中添加一个 ScriptManager 标签即可。

<form runat="server">
    <asp:ScriptManager runat="server" />
    <!-- rest of form continues… -->
</form>

UpdatePanel 用于定义页面中应在不完全刷新页面的情况下更新的部分。要使用默认功能，只需将您想启用 AJAX 的页面部分括在一对匹配的 UpdatePanel 和 ContentTemplate 标签中。在下面的示例中，SubmitButton 和 ResponseLabel 标签位于 UpdatePanel 内——当单击 SubmitButton 时，消息会出现，而页面不会刷新。要查看页面在不使用 AJAX 的情况下如何更新，您可以注释掉 UpdatePanel 和 ContentTemplate 标签，保留 Button 和 Label 标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Ajax test page</title>
</head>
<body>
    <form id="AjaxTestForm" runat="server">
    <asp:ScriptManager runat="server" />
    <p>
    What's your name?<br />
    <asp:TextBox ID="NameText" runat="server" />
    </p>
    <p>
    When's your birthday?<br />
    <asp:TextBox ID="BirthdayText" runat="server" /><br />
    </p>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Button ID="SubmitButton" runat="server" Text="Submit" 
                        OnClick="SubmitButton_Click" /><br />
            <asp:Label ID="ResponseLabel" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>

    <script runat="server" language="csharp">
    private void SubmitButton_Click(object sender, EventArgs e)
    {
        DateTime birthday = DateTime.Parse(BirthdayText.Text);
        if (birthday.Date < DateTime.Today.Date)
        ResponseLabel.Text =
               string.Format("Sorry {0}, looks like I missed your birthday!",
                          NameText.Text);
        else if (birthday.Date > DateTime.Today.Date)
            ResponseLabel.Text = 
               string.Format("Thanks {0}, I'll put that date in my diary!", 
                             NameText.Text);
        else
            ResponseLabel.Text = string.Format("Happy Birthday {0}!", 
                                               NameText.Text);
    }
    </script>
</body>
</html>

试一试

正如您所见，将 UpdatePanel 添加到现有页面再简单不过了，但 AJAX 扩展的功能远不止 UpdatePanel。如果您想了解可能实现的功能，一个很好的起点是 ASP.NET AJAX showcase。

接下来，从 InnerWorkings 下载免费的 ASP.NET AJAX Drill，并在实际应用程序中了解如何使用 UpdatePanel。一旦您解决了其中包含的挑战，您就知道了可以开始在下一个项目中使用 AJAX 了。