AJAX 揭秘 - 第三部分 - 使用 Anthem 的 AJAX 颜色选择器

• 下载演示项目 - 44.8 Kb

引言

在我之前的文章中，我深入探讨了使用 XMLHttpRequest 对象在 .NET 应用程序中异步创建、发送、接收和处理 XML 请求的基础知识。现在我已经阐述了在 JavaScript 中创建对象的绝大多数机制，我将（希望）通过向您介绍我认为是 Visual Studio 中最干净、最简单的 AJAX 工具包之一，并向您展示一个快速简单的方法来为您的 ASP.NET 应用程序创建 AJAX 驱动的颜色选择器，从而简化问题。

背景

此示例使用了一个称为 Anthem 的 AJAX 工具包。您可能已经见过这个名字被广泛提及（尤其是在许多 CodeProject 文章中）。Anthem 是一组用于 Visual Studio 的工具，可以极大地简化您的 ASP.NET 应用程序向 AJAX 世界的过渡。只需了解一些 Visual Studio 的知识，以及几乎不需要了解 JavaScript，您就可以通过将所需的控件拖放到网页上并管理代码隐藏来实现 AJAX 控件的功能。

我将在下面详细介绍如何使用 Anthem 工具，但在我们开始之前，您应该确保您已经为您的 Visual Studio 环境安装了最新版本的 Anthem。您可以在 SourceForge 上（免费）下载控件包。Anthem 最初由 Jason Diamond 创建，现在是 SourceForge 上一个活跃的项目。它简洁明了，并且明显是为开发者设计的。不，我不是他们的托。它只是好东西。

入门

从现在开始，我将假定以下几点

• 您已下载 Anthem
• 您已为您的 VS.NET 版本构建了项目
• 您已将控件添加到您的 VS.NET 工具箱中

将控件添加到 VS.NET 工具箱后，它应该看起来像这样

在以后的文章中，我将探讨一些其他控件的用法，但现在，我们只关注 Button 和 Label 控件。

概述

Anthem 的工具会在后端为您处理所有的 JavaScript 和 XMLHttpRequest。您只需将控件拖到网页上，就像处理 ASP.NET 控件一样。主要区别在于，当您双击控件以添加默认事件处理程序时，Anthem 控件会创建一个 回调 函数，而不是 回发 函数。这是 AJAX 的关键，也是控件集的美妙之处在于，事件处理程序看起来与代码隐藏中的标准 C# 函数没有任何区别。

在我的示例中，我创建了一个简单的 HTML 表格，其中包含 48 个单元格（8 x 6）。每个单元格中都有一个 Anthem 按钮，该按钮具有特定的背景颜色。所有这些按钮都在代码中调用相同的回调函数，如下所示

private void palette_Click(object sender, System.EventArgs e)
{
    Button btn = (Button)sender;
    this.btnColor.BackColor = btn.BackColor;
    this.btnColor.UpdateAfterCallBack=true;
    this.lblColor.Text = ColorToHex(btnColor.BackColor);
    this.lblColor.UpdateAfterCallBack=true;
}

代码的第一部分隐式地将 sender 对象转换为 Button 类型，因为我们知道 sender 实际上是一个 Button。现在我们有了 Button 对象（btn），我们将把 btnColor 对象（另一个 Button，它位于 Label 的上方）设置为 sender 对象的背景颜色。现在，您会注意到一些对 Anthem 特别重要的内容

this.btnColor.UpdateAfterCallBack=true;

我们正在让函数知道我们更改了 btnColor 对象的一些属性，并且在回调完成后，它将需要被“更新”。这是确保 btnColor 的新背景颜色实际上会在客户端得到更改和反映的代码。

下一步是用十六进制颜色值更新 lblColor（Label）。您会注意到它调用了 ColorToHex(System.Color) 函数。此函数（以及相关的辅助函数）由 Sandro Todesco 提供，因为据我所知，.NET 中不存在将 System.Color 转换为其十六进制值的单一方法。它为我们完成了繁重的工作，接收一个 System.Color，并返回十六进制值。代码在内部记录了转换代码的来源以及在哪里可以下载示例。在 palette_Click() 函数中，您再次会注意到

this.lblColor.UpdateAfterCallBack=true;

现在 Label 拥有颜色的十六进制值，我们将确保 Label 在回调后更新其文本。

Using the Code

我演示 Anthem 的功能有几个原因。第一，您可能只是想在应用程序中添加一个颜色选择器。但更重要的是，您将更好地了解在 ASP.NET 应用程序中使用 Anthem 的简便性。运行示例时，查看网页的 HTML 源代码（右键单击页面，然后选择“查看源代码”）可能会很有趣。您将看到 Anthem 控件在运行时自动创建的所有 JavaScript 函数。通过这种方式使用 AJAX，使那些不是 JavaScript 大师的人能够使用他们最熟悉的 .NET 语言创建非常复杂的 AJAX 驱动的网站。

祝您编码愉快！