使用AJAX扩展器自定义控件

AJAX Control Toolbox 中的 AutoComplete 扩展器提供与文本框控件相同的行为，但是它要求开发人员负责制订向用户提供建议的所有逻辑规则。该扩展器会创建一个下拉列表样式的面板，并将其放置在文本框的右下角。您可以根据自己的喜好设置面板的样式和动画效果。下面的代码将 Autocomplete 扩展器与一个文本框相关联：

＜act:AutoCompleteExtender runat="server" ID="AutoComplete1"
　　TargetControlID="TextBox1"　
　　EnableCaching="true"
　　MinimumPrefixLength="1"
　　ServicePath="Suggestions.asmx"
　　ServiceMethod="GetSuggestions" /＞

该扩展器绑定到用于提供列表填充词汇的 Web 服务。MinimumPrefixLength 属性指示控件何时调用该 Web 服务。已键入的文本将用作指定 Web 服务方法的输入。响应结果用于填充下拉列表。还可以启用缓存。这样，在多次键入相同的前缀时只需调用一次 Web 服务就可以了。此外，根据 Web 服务检索其数据的方式，还可以对服务器启用缓存，减少与数据库或其他远程数据存储区之间的额外往返行程。

图 C 列出了 AutoComplete 扩展器支持的所有属性。应注意，除了此处列出的属性，其他扩展器还具有另外的属性。TargetControlID 属性用于获取和设置扩展控件的 ID；Enabled 属性允许以编程方式打开和关闭扩展器的功能，该属性默认情况下设置为 True。还有 BehaviorID 属性，该属性用于设置提供扩展行为的客户端 JavaScript 对象的名称。***，还有两个重要属性：ClientState 和 EnableClientState。ClientState 属性是一个字符串属性，用于保持扩展器的客户端状态。该状态使用隐藏字段保持，字段的名称可以通过 ClientStateFieldID 属性进行设置。EnableClientState 属性是一个布尔属性，用于控制是否启用客户端状态。

FigureCAutoComplete 扩展器属性

#p#

构建自动完成 Web 服务

与 AutoComplete 扩展器组合使用的 Web 服务是一项 ASP.NET AJAX 脚本服务。该服务看起来几乎与常规的 ASP.NET Web 服务没什么两样，只是该服务的类必须用 ScriptService 属性加以修饰。如果您使用的 Web 服务缺少该属性，则对相关 ASMX 端点的每个请求都会导致 HTTP 500 错误。不会向最终用户显示异常界面（扩展器总是妥善地进行降级处理），而且也不会显示带有建议的弹出面板：

[ScriptService]
public class SuggestionService : WebService
{
　 ...
}

请注意，脚本服务不需要 WebService 属性，但仍可使用该属性来提供命名空间信息。

脚本服务类上使用 WebMethod 属性标记的任何公共方法的名称都可以成功地分配给扩展器上的 ServiceMethod 属性。用于提供建议的方法必须具有以下签名：

[WebMethod]
public string[] GetSuggestions(string prefixText, int count)

***个参数是用于生成建议的前缀文本。它与文本框的当前内容相同，其长度不小于 MinimumPrefixLength 属性的值。Count 参数指示要提供的建议数。Count 参数的值来自 CompletionSetCount 属性的值。

如果计划利用上下文关键字（一个字符串属性，用于指示要传递给绑定的 Web 服务的任何页面或用户特定的信息），则应为要使用的任何 Web 服务方法提供重写方法。下面是签名：

public string[]GetSuggestions(
　　string prefixText, int count, string contextKey)
{
　 ...
}

返回值始终以字符串数组形式打包。由于使用了 ScriptService 属性，因此服务器与客户端之间的所有通信都将通过 JavaScript Object Notation (JSON) 字符串进行。

可以利用 Web 服务方法上支持的任何属性来改善服务性能。例如，WebMethod 属性上的 CacheDuration 属性可以强制服务对指定期间内方法调用的响应进行缓存。同样，如果方法的逻辑确实需要会话状态，则您可以启用会话状态。

图 4 显示了针对客户名称提供建议的示例服务，客户名称来自 Northwind 数据库。从性能角度来说，键入少量字符就调用 Web 服务可能听起来并不是一个好主意。但是，有一些因素使得自动完成比您想像的要更实用。AutoComplete 扩展器的客户端缓存基于本地内存，永远不会通过隐藏字段保持。通过使用指定前缀作为关键字，可以将与该前缀关联的完成列表存储到内部数组中。只要在文本框缓冲区中分解出相同的前缀，都会检索该列表。因此，如果用户重复键入相同的前缀，则不会通过网络对后端服务执行任何新的请求。

Figure4建议服务示例

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Services;
[WebService(Namespace = "MsdnMag.Articles")]
[ScriptService]
public class SuggestionService : System.Web.Services.WebService
{
　　[WebMethod]
　　public string[] GetSuggestions(string prefixText, int count)
　　{
　　　　DataView data = GetData();
　　　　data = FilterData(data, prefixText);
　　　　int totalCount = data.Count;
　　　　if (data.Count > count)
　　　　　　totalCount = count;
　　　　string[] suggestions = new string[totalCount];
　　　　int i = 0;
　　　　foreach (DataRowView row in data)
　　　　{
　　　　　　suggestions[i++] = (string) row["companyname"];
　　　　　　if (i >= count)
　　　　　　　　break;
　　　　}
　　　　return suggestions;
　　}
　　private DataView GetData()
　　{
　　　　DataView view =
　　　　　　(DataView)HttpContext.Current.Cache["Suggestions"];
　　　　if (view == null)
　　　　{
　　　　　　SqlDataAdapter adapter = new SqlDataAdapter(
　　　　　　　　"SELECT * FROM customers", "...");
　　　　　　DataTable table = new DataTable();
　　　　　　adapter.Fill(table);
　　　　　　view = table.DefaultView;
　　　　　　HttpContext.Current.Cache["Suggestions"] = view;
　　　　}
　　　　return view;
　　}
　　private DataView FilterData(DataView view, string prefix)
　　{
　　　　view.RowFilter = String.Format("companyname LIKE '{0}%'",
　　　　　　prefix);
　　　　return view;
　　}
}

客户端缓存明显比服务器端缓存更有效，服务器端缓存可减少一些与数据库之间的往返过程，但无法减少与 Web 服务器之间的往返行程。在图 4 显示的代码中，服务加载数据库中的所有客户并在 ASP.NET 缓存中存储该列表。然后，从缓存中检索客户列表并筛选出与前缀匹配的名称。

如前所述，用于提供建议的 Web 服务必须是 ASP.NET AJAX 脚本服务，并通过 JSON 与客户端进行通信。您需要确定 SOAP 客户端是否也可公开访问该服务。ASP.NET AJAX 服务默认情况下具有双重功能：JSON 和 SOAP。通过将以下代码添加到主机应用程序的 web.config 文件，可以关闭 SOAP 客户端：

＜system.web＞
　＜webServices＞
　　＜protocols＞
　　　＜clear /＞
　　＜/protocols＞
　＜/webServices＞
＜/system.web＞

使用 ASP.NET 3.5，还可以通过服务 (SVC) 端点将 AutoComplete 扩展器绑定到 Windows® Communication Foundation (WCF) 服务。该扩展器使用以下 JavaScript 代码来代替调用：

Sys.Net.WebServiceProxy.invoke(
　 this.get_servicePath(),
　 this.get_serviceMethod(),
　 false,
　 params,
　 Function.createDelegate(this, this._onMethodComplete),
　 Function.createDelegate(this, this._onMethodFailed),
　 text);

对于 Microsoft AJAX 客户端库中的 WebServiceProxy 类，关键是指定端点在内容类型请求标题设置为“application/json; charset=utf-8”时可以成功处理请求。若要创建 WCF 服务来提供建议，需要与下面类似的类：

[ServiceContract(Namespace = "MsdnMag.Services")]
[AspNetCompatibilityRequirements(
　　 RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MySuggestionService
{
　　[OperationContract]
　　public string[] GetSuggestions(string prefixText, int count)
　　{
　　　...
　　}
}

此外，还需要一个 SVC 端点，如下所示：

＜%@ ServiceHost Language="C#"　
　　　　　　　　Service="MySuggestionService"
　　　　　　　　CodeBehind="~/App_Code/WcfSuggestions.cs" %＞

若要注册服务，可以使用 webHttpBinding 绑定模型向 web.config 文件的 serviceModel 部分添加显式端点。或者，可以指定 @ServiceHost 指令的 Factory 属性，并使该属性指向以下类：

System.ServiceModel.Activation.WebScriptServiceHostFactory

#p#

设置 AutoComplete 扩展器的样式

AutoComplete 扩展器支持相关样式设置属性，通过这些属性，您可以指定要对控件的样式部分使用的 CSS 类。特别是，可以设置整个弹出区域的样式，包括边框和背景色。还可以对所有项和所选项使用不同设置。没有为可选项提供任何预定义样式。默认情况下，不会选择完成下拉列表中的***个元素。但是，可以使用 FirstRowSelected 属性强制自动选择***项。

完成列表将在经过指定毫秒数后显示。经过的时间通过 CompletionInterval 属性来控制，默认情况下设置为一秒。经过指定的时间后，扩展器将调用服务以获取建议列表。

可以使用 Animations 属性向列表的打开过程添加动作。可以对以下两个事件定义动画：OnShow 和 OnHide。动画通过 Animation 扩展器及其相关框架来执行（参见图 5 中的示例）。

Figure5使用 Animations 属性

＜Animations＞
　　＜OnShow＞
　　　　＜Sequence＞
　　　　　　＜OpacityAction Opacity="0" /＞
　　　　　　＜HideAction Visible="true" /＞
　　　　　　＜Parallel Duration=".4"＞
　　　　　　　　＜FadeIn /＞
　　　　　　＜/Parallel＞
　　　　＜/Sequence＞
　　＜/OnShow＞
　　＜OnHide＞
　　　　＜Parallel Duration=".4"＞
　　　　　　＜FadeOut /＞
　　　　＜/Parallel＞
　　＜/OnHide＞
＜/Animations＞

动画脚本会向完成列表添加淡入和淡出效果。OpacityAction 节点用于设置透明度，HideAction 节点用于显示完成列表以及任何其他视觉效果。***，FadeIn 和 FadeOut 动作执行淡化效果。图 6 显示了一个动态完成列表。

 
图 6运行中的 AutoComplete 扩展器

对列表进行渐进式搜索

是否曾尝试在长长的列表中查找某个特定项，例如，在包含世界上所有国家/地区的列表中查找某个国家/地区的名称？如果您速度足够快地键入一些连续字母，可能会找到所需的国家/地区，但是即使犹豫了几毫秒，那么键入的下一个字母就会成为搜索项的***个字母。ListSearch 扩展器解决了这一限制。请注意，该扩展器仅适用于 ASP.NET Web 和 HTML 控件，不可与 SELECT 或 OPTION 等常规 HTML 元素一起使用。

因此，ListSearch 扩展器的主要优点是：它允许您通过键入字母来搜索列表控件中的项，并防止搜索字符串在几秒钟后丢失；相反，搜索字符串在您按 Esc 或回发至服务器（包括全部或部分回发）之前将一直保留在原处。键入的任何其他字符都将附加到搜索字符串，用于进一步缩小搜索范围。以下介绍如何使用 ListSearch 扩展器：

＜act:ListSearchExtender ID="ListSearchExtender1" runat="server"
　　 TargetControlID="DropDownList1"
　　 PromptCssClass="Prompt" /＞

该扩展器提供了三个主要属性：PromptText、PromptCssClass 和 PromptPosition。所有这些属性都与提示文本有关，提示文本是显示在目标控件周围的字符串，用于提供有关正在搜索的文本的可视化反馈。PromptText 的默认值为“Type to search”。当目标列表控件获得焦点后，此文本通常显示在该控件的上方。PromptCssClass 属性获取并设置要应用于提示消息的 CSS 类的名称。提示文本由用户键入的搜索文本来取代。Esc 和 Del 按钮在此处起着重要作用。Esc 按钮用于清除当前搜索并将列表重置为默认所选项。Del 按钮用于从搜索文本中删除上一次键入的字符，并在列表中更新选择项。此外，Animations 属性的作用与上文 AutoComplete 扩展器部分中讨论的作用相同。

#p#

弹出式上下文菜单

在用户即将执行操作时，为他们提供可以执行哪些操作的选项，这一点非常好。几年前，工具提示就是一项巨大的改进，因为它们提供了有关特定控件角色的弹出式附加信息。动态 HTML 的出现使得 HTML 工具提示成为可能。

如今，HoverMenu 扩展器能够在任意 ASP.NET 服务器控件旁边显示弹出面板。此扩展器最常用的一个用法是，显示由鼠标移动事件而不是右键单击激活的上下文菜单。

当用户将鼠标移动到控件上方时，HoverMenu 扩展器就会激活。因此，将在控件附近显示指定的弹出面板；实际位置可以通过编程方式进行控制。此外，可以对控件应用 CSS 样式以醒目的格式标记该控件。

图 7 显示的单选按钮菜单可提供有关要在文本框中插入的文本的建议。下面是相关扩展器的声明：

 
图 7运行中的 HoverMenu 扩展器

＜act:HoverMenuExtender ID="HoverMenu1" runat="server"
　　TargetControlID="TextBox1"
　　PopupControlID="Panel1" /＞

Panel1 控件包含单选按钮列表。为了确保所有选择都在文本框目标控件中进行处理，您在单选按钮列表中定义了一个 SelectedIndexChanged 事件，并将所有相关操作都封装在 UpdatePanel 控件中。（有关详细信息，请参阅本专栏的下载内容中所附的源代码）。

除了 PopupControlID 和 TargetControlID 属性之外，HoverMenu 扩展器还提供了一些其他属性。HoverCssClass 属性指示要在悬停菜单可见时应用于目标控件的 CSS 类。PopupPosition 属性指示相对于目标控件的弹出位置，可能的值包括 Top、Right、Left 和 Bottom。OffsetX 和 OffsetY 属性用于设置相对于确定位置的水平和垂直偏移量。***，PopDelay 属性指示 DOM 事件与显示弹出菜单之间的延迟。默认值为 100 毫秒。

将鼠标悬停在 DOM 事件上方时，该事件会触发 HoverMenu 扩展器。HoverMenu 扩展器与 Popup 扩展器之间并没有太大差异。主要区别在于激活机制和触发器。当用户将焦点指向特定的目标控件时，将会激活 Popup 扩展器。若要激活 HoverMenu 扩展器，用户只需将鼠标移动到相应控件上方即可。

结束语

如果希望网站内容更为丰富并具有更强的交互性，则就需要使用更多的 JavaScript。虽然手工编写 JavaScript 在实现简单功能方面尚能够胜任，但是，如果要实现更高层次的交互性，仅靠手工编写代码是远远不够的。