使用AJAX扩展器自定义控件

string culture = "en-us";
if (!String.IsNullOrEmpty(MaskedEditExtender1.CultureName))
　　culture = MaskedEditExtender1.CultureName;
CultureInfo info = new CultureInfo(culture);

然后调用 Parse 方法根据所选区域性设置指定格式提供程序：

NumberFormatInfo numberInfo = info.NumberFormat;
DateTimeFormatInfo dateInfo = info.DateTimeFormat;
DateTime when = DateTime.Parse(TextBox1.Text, dateInfo);
decimal amount = Decimal.Parse(TextBox2.Text, numberInfo);

图 3 显示了使用不同的区域性设置进行输入时同一页面的行为。

 
图 3使用不同的区域性设置将数据解析为 .NET 类型

#p#

文本框自动完成

您肯定对自动完成功能非常熟悉。该功能会根据输入的前几个字符预测用户正在键入的单词。Internet Explorer 会记录已在地址栏和表单字段中键入的所有字符以自动完成填充。

当然，此功能完全基于浏览器，可以通过将 Autocomplete 属性设置为 On 或 Off，来打开或关闭 <input> 和 <form> 标记的自动完成功能。Autocomplete 属性不是标准的 HTML 属性，但是现在几乎所有浏览器都支持该属性。

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 在实现简单功能方面尚能够胜任，但是，如果要实现更高层次的交互性，仅靠手工编写代码是远远不够的。

【编辑推荐】

1. ASP.NET Ajax中AutoComplete控件的使用
2. AJAX和XmlHttpRequest下的Web开发
3. 浅谈Ajax在ASP.Net中的使用