Color Picker ASP.NET AJAX 扩展控件

引言

Color Picker 是一个 ASP.NET AJAX 扩展，可以附加到任何 ASP.NET TextBox 控件。它提供客户端颜色选择功能，用户界面以弹出块的形式呈现。您可以通过单击彩色区域来设置颜色，从而与 Color Picker 进行交互。它构建在 ASP.NET AJAX 和 AJAX Control Toolkit 库之上。

为什么要使用 Color Picker 扩展控件？

为 ASP.NET 找到一个不错的颜色选择器控件并不容易。市面上有很多纯 JavaScript 的颜色选择器控件，但只有少数利用了 ASP.NET 服务器端模型。如果您的要求更严格，并决定使用 ASP.NET AJAX 和 AJAX Control Toolkit，那么找到这样的颜色选择器会更加困难。因此，这项工作的目的是克服这一挑战，并为开发者社区提供一个易于使用的标准开源解决方案。

Color Picker 扩展控件有什么特别之处？

1. Color Picker 构建在 ASP.NET AJAX 和 AJAX Control Toolkit 之上，使其成为使用这些框架的用户的自然选择。
2. Color Picker 不是一个独立的服务器控件，而是标准 TextBox ASP.NET 服务器控件的一个 AJAX 扩展，因此非常易于使用。
3. Color Picker 扩展控件兼容多浏览器：它适用于 IE 6/7、Firefox、Safari 和 Google Chrome，使其完全适用于 Web 2.0 解决方案。
4. Color Picker 与 UpdatePanel 兼容：可以放置在 UpdatePanel 中，使其在客户端和服务器端场景中都很有用。

设计方法

当需要用户输入颜色值时，挑战在于，最终颜色值是一个 6 位十六进制数字，对于普通人来说，很难将这个数字与视觉颜色关联起来。因此，从这个角度来看，我们的需求可以表述为：一种简单、可视化的方式，能够可靠地选择一个 6 位十六进制颜色值并将其提交到 Web 应用程序。

在 ASP.NET 中，基本的输入功能由标准的 TextBox 输入控件提供，因此将 Color Picker 构建为 TextBox 控件的扩展是很自然的。可视化颜色选择，显然应该是客户端功能，以免因繁重的页面刷新而破坏用户体验。拥有 ASP.NET AJAX 和 AJAX Control Toolkit 这样坚实可靠的平台，使得将 Color Picker 构建为 ASP.NET AJAX Control Toolkit 扩展控件变得轻而易举。

此外，采取这种方法还可以将用户输入的多个功能职责分离到不同的控件中，每个控件仅负责整个解决方案的一部分：TextBox 提供基本的输入和提交功能；颜色选择器提供客户端可视化的颜色选择方式；如果我们需要在提交到服务器之前验证值，则有一系列验证控件可供帮助。

项目设置

AJAX 扩展控件的项目可以轻松地从 Visual Studio 2008 附带的“ASP.NET AJAX 控件项目”模板创建，或者使用 AJAX Control Toolkit 中的模板。有关设置环境的更多信息，请参阅 此处。

创建项目后（参见 Visual Studio 解决方案资源管理器窗口的截图），它至少应包含两个文件：{Control}Extender.cs 和 {Control}Behavior.js，其中 {Control} 是控件名称的占位符，在本例中是 ColorPicker。{}Extender.cs 文件包含一个派生自 AjaxControlToolkit.ExtenderControlBase 类的 C# 类，它表示 ASP.NET 页面上可用的 AJAX 服务器扩展控件。{}Behavior.js 文件包含根据 ASP.NET AJAX 框架规则实现客户端功能的 JavaScript 代码。项目的其他文件，如 *.ico、*.css 和 {}Designer.cs，主要用于在 IDE 中装饰扩展控件的使用。

项目中一个非常重要的细节是，所有资源文件（除 C# 代码外的任何内容）在属性窗口中都应将 BuildAction 设置为 Embedded Resource，并且 {}Extender.cs 文件中必须出现相应的 [assembly: WebResource(...)] 属性，以便资源可以在网页上访问。

当然，由于使用了 AJAX Control Toolkit，请不要忘记引用 AjaxControlToolkit.dll。

实现细节

所有工作中最大的部分，包括客户端渲染、事件挂钩、跨浏览器兼容性等，都是由 ASP.NET AJAX 和 AJAX Control Toolkit 框架完成的，所以开发人员唯一需要做的就是实现控件的视觉外观。

颜色选择器的第一个版本 UI 非常简单，实现为一个包含 216 种预定义颜色的表格。它渲染如下：

<table>
    <tbody>
        <tr>
            <td><div> </div></td>...
        </tr>
        ...
    </tbody>
</table>

该表格由 12 行组成，每行包含 18 个单元格。每个单元格包含一个可单击的 div 元素，其背景颜色属性设置为表示的颜色值。表格的大小和外观通过嵌入的 CSS 定义来定义。

使用示例

Color Picker 扩展控件使用起来非常简单。首先，不需要操作 HTML 或 JavaScript 代码：所有操作都在 ASP.NET 页面上通过常规标记完成。

首先，在 ASP.NET 页面或 Web.config 文件中注册 Color Picker 程序集。

页面

<%@ Register TagPrefix="cdt" Assembly="CDT.ColorPickerExtender" Namespace="CDT" %>

Web.config:

<add tagprefix="cdt" namespace="CDT" assembly="CDT.ColorPickerExtender" />

然后，在页面上添加一个 ColorPicker 标签，并为其属性赋值。

   <asp:textbox id="TextBox1" runat="server" columns="7" maxlength="7" />
   <asp:imagebutton id="ImageButton1" runat="server" 
      imageurl="~/Images/icon_colorpicker.gif" />
   <cdt:colorpickerextender id="cpe" runat="server"
         targetcontrolid="TextBox1"
         samplecontrolid="ImageButton1"
         popupbuttonid="ImageButton1" />

完成。您可以从 Color Picker 的 Codeplex 项目的发布页面下载包含 Color Picker 扩展控件本身的可用示例。

未来发展方向

Color Picker 扩展控件的进一步开发方向已经有一些想法。有些人提到希望有不同版本的 UI（不仅仅是预定义颜色的表格，还可以是更具交互性的，例如 Windows 颜色选择器）。另一项功能是引入 SampleDisplayMode，以便能够选择要更改样本元素的颜色类型：背景（如现在），文本颜色，或两者兼有。通过 CSS 可以实现 Color Picker UI 的自定义样式，并且弹出块的动画也是一个不错的选择。欢迎在 Codeplex 上的 Color Picker 项目页面上提出其他建议。

参考文献

Color Picker 扩展控件是一个开源项目，托管在 codeplex.com 上，欢迎大家访问：www.codeplex.com/cpe，下载最新版本，留下评论，发起讨论，建议功能，或报告错误。

您可能还想查看我的博客：blog.turlov.com，以获取关于 Color Picker 扩展控件的未来公告。