65.9K
CodeProject 正在变化。 阅读更多。
Home

AJAX for Beginners (Part 1) - 理解 ASP.NET AJAX 服务器控件

Rahul Rajat Singh
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.75/5 (81投票s)

2012 年 6 月 11 日

CPOL

8分钟阅读

viewsIcon

360503

downloadIcon

8545

从初学者的角度理解 ASP.NET AJAX 服务器控件

这个迷你系列共有三篇文章

介绍 

本文讨论了开发人员在其网站中实现 AJAX 功能的各种方法。此外，本文还详细讨论了 ASP.NET AJAX 服务器控件及其用法。

背景

桌面应用程序和 Web 应用程序之间有一个主要的区别，那就是 Web 应用程序的无状态性。网站在客户端运行，并以无状态的方式与服务器通信。因此，用户在其浏览器上执行的每个操作都必须传播回 Web 服务器，以确定该操作的结果。由于需要回发到服务器，Web 应用程序在用户界面和功能方面很难达到高响应度（这是桌面应用程序可以轻松实现的）。

AJAX，即 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种可以在客户端和服务器之间进行通信而无需回发的技朧。避免回发的优势在于对用户的响应更快，浏览器中的页面不会改变/刷新/发布，因此用户可以在数据发送到服务器的同时继续使用它，并且诸如按键之类的用户操作也可以传达给服务器以提供更有意义的结果（例如：自动建议），即增强了 Web 应用程序的整体可用性。

AJAX 是一组符合 W3C 标准的技术，它们促进了客户端和服务器之间的这种异步通信。作为一名 ASP.NET 开发人员，我们可以通过以下方式将 AJAX 集成到我们的 Web 应用程序中：

  • JavaScript 中的 XMLHTTPRequest 对象 - 实现 AJAX 功能的 W3C 标准方法。
  • 使用 jQuery AJAX - jQuery AJAX 提供了一个使用 XMLHTTPRequest 的封装，使开发人员的生活更轻松。
  • 使用 Microsoft AJAX 库 - 这是一个 JavaScript 框架，可以简化 ASP.NET 开发人员使用 AJAX 的工作。
  • AJAX 控件工具包 - 一组可与 ASP.NET 结合使用的控件，用于集成 AJAX 功能。
  • ASP.NET AJAX 服务器控件 - 这些控件提供了在 ASP.NET 页面上实现 AJAX 功能的基本构建块。

那么，作为一名 ASP.NET 开发人员，为什么应该学习使用 AJAX 呢？最简单的原因是 AJAX 将提高网站的整体可用性。将 AJAX 功能集成到网站中的主要好处包括：

  • 部分页面更新 - 只更新需要更新的页面部分，而不是整个页面。
  • 更快的用户响应 - 由于只有一部分数据在客户端和服务器之间传输，因此结果会很快显示。
  • 增强的用户界面 - 使用 AJAX，可以实现类似桌面应用程序的用户界面，包含进度指示器和计时器。
  • 增强的功能 - 使用 AJAX，可以实现自动完成等功能。

本文主要关注 **ASP.NET AJAX 服务器控件**。实现 AJAX 的其他技术值得单独写一篇文章（我将在稍后发布），但目前，我们将重点放在 ASP.NET AJAX 服务器控件上。

Using the Code

ASP.NET AJAX 服务器控件主要提供部分页面更新、更新进度指示和基于计时器的频繁更新的功能。此外，它还负责生成执行这些功能所需的所有 JavaScript。因此，有了这些控件，开发人员就不需要编写任何 JavaScript 来实现 AJAX。

ASP.NET 为实现 AJAX 功能提供的控件包括：

  1. ScriptManager
  2. ScriptManagerProxy
  3. UpdatePanel
  4. UpdateProgress
  5. 定时器

让我们逐一尝试理解这些控件，并尝试通过示例来查看如何使用它们来实现 AJAX 功能。

ScriptManager

ScriptManager 控件是一个页面上的非可视化组件。每个需要实现 AJAX 功能的页面都需要此控件。ScriptManager 控件的主要功能是在页面呈现时将 Microsoft AJAX 框架代码推送到客户端。这个控件可以被认为是负责编写客户端所需 JavaScript 以实现 AJAX 功能的代理。

需要 AJAX 功能的页面上应该只有一个 ScriptManager 控件。让我们创建一个网页并向其中添加一个 ScriptManager 控件。

<asp:ScriptManager ID="ScriptManager1" runat="server" />

ScriptManagerProxy

我们已经看到，需要 AJAX 功能的页面上需要 ScriptManager 控件。我们也知道页面上应该只有一个 ScriptManager 控件。现在考虑一种情况，有一个主页面和一个内容页面，并且两者都需要 AJAX 功能。还有一种情况，假设我们有一个 UserControl 需要 AJAX，并且必须将其添加到已实现 AJAX 的页面上。由于页面上只能有一个 ScriptManager，因此在这些情况下添加 ScriptManager 控件将导致页面上有两个 ScriptManager 控件。因此，为了处理这种情况，可以使用 ScriptManagerProxy 控件。

当内容页面具有包含 ScriptManager 控件的主页面时，应在内容页面上使用 ScriptManagerProxy。当包含 UserControl 的页面已经具有 ScriptManager 控件时，也可以在 UserControl 内部使用它。

UpdatePanel

这是一个容器控件，包含其他 ASP.NET 控件。此控件定义了一个能够进行部分页面更新的区域。我们可以在 UpdatePanel 中添加各种服务器控件，这些 UpdatePanel 中的控件将与服务器通信，而不管页面的回发。

让我们在页面上添加一个 UpdatePanel 并在其中添加一些服务器控件。我们将尝试在此 UpdatePanel 中执行一些算术运算，并尝试在不回发的情况下获得结果。添加控件后，页面的设计视图将显示为：

asp.net ajax server control article image

现在让我们处理按钮点击事件并在其中执行算术运算。

protected void btnCalculate_Click(object sender, EventArgs e)
{
    try
    {
        int a = Convert.ToInt32(txtA.Text);
        int b = Convert.ToInt32(txtB.Text);

        int sum = a + b;
        int difference = a - b;
        int multiplication = a * b;

        Label1.Text = string.Format("Sum = {0}", sum);
        Label2.Text = string.Format("Difference = {0}", difference);
        Label3.Text = string.Format("Multiplication = {0}", multiplication);
    }
    catch (Exception ex)
    {
        //pokemon exception handling            
    }
}

现在，由于所有控件都在 UpdatePanel 控件内，点击按钮不会导致回发，而是会异步调用服务器端函数并为我们提供结果。当我们在浏览器中运行页面时：

asp.net ajax server control article image

请注意，点击按钮不会导致回发，而是异步提供结果。我们可以使用 UpdatePanel 的 UpdateMode 属性和设置 Trigger 来控制部分页面更新。

UpdateProgress

我们刚才处理的场景即时显示了结果，但想象一下服务器端处理异步事件需要一些时间的场景。如果操作耗时，那么我们可以使用 UpdatePanel 内的 UpdateProgress 控件来向用户提供反馈。

让我们在页面上再添加一个 UpdatePanel 来执行相同的任务，但这次我们将使服务器端功能花费更多时间（通过使用 sleep）。我们将添加一个简单的 UpdateProgress 控件，以使用户意识到页面当前正在执行某些处理。让我们看看这个 UpdatePanel 和 UpdateProgress 控件的设计视图。

asp.net ajax server control article image

让我们处理按钮点击的服务器端事件，但这次，让我们在这里添加一些延迟。

protected void btnCalculate2_Click(object sender, EventArgs e)
{
    try
    {
        //Lets pretend that we are doiing something time consuming
        System.Threading.Thread.Sleep(3000);
        int a = Convert.ToInt32(txtA2.Text);
        int b = Convert.ToInt32(txtB2.Text);

        int sum = a + b;
        int difference = a - b;
        int multiplication = a * b;

        Label4.Text = string.Format("Sum = {0}", sum);
        Label5.Text = string.Format("Difference = {0}", difference);
        Label6.Text = string.Format("Multiplication = {0}", multiplication);
    }
    catch (Exception ex)
    {
        //pokemon exception handling            
    }
}

现在，当我们运行页面并点击按钮时，将显示 updateProgress 消息。

asp.net ajax server control article image

我们还可以在 updateProgress 控件中添加图像和动画 GIF，以提供更友好的用户反馈。

定时器

在某些情况下，我们可能希望在一段时间后更新页面的特定部分，而无需用户操作。为了实现这一点，我们可以使用 Timer 控件。让我们向页面添加一个计时器控件，并每 5 秒显示一次服务器时间。页面的设计视图将显示为：

asp.net ajax server control article image

现在让我们处理 timer_tick 事件。由于控件位于 UpdatePanel 内，因此时间将在每 5 秒后更新，而不会引起任何回发。让我们看看计时器事件的服务器端代码，然后运行页面并查看每 5 秒变化的时间。

protected void Timer1_Tick(object sender, EventArgs e)
{
    Label8.Text = DateTime.Now.ToString();
}

asp.net ajax server control article image

关注点

本文试图理解什么是 AJAX 以及它可能有什么用。在 ASP.NET 应用程序中有多种实现 AJAX 的方法。本文只触及了 ASP.NET AJAX 服务器控件的基础知识。每个服务器控件都有许多我们尚未讨论的配置选项和属性。理解这些控件为我们在网站中实现 AJAX 功能提供了一种方式。我可能会在单独的文章中讨论实现 AJAX 的其他方法，以便 ASP.NET 开发人员能够学到他们需要了解的关于 AJAX 的所有知识以及如何以更好的方式实现它。

历史

  • 2012 年 6 月 11 日：初版
© . All rights reserved.