AJAX Control Toolbox 中的 AutoComplete 擴(kuò)展器提供與文本框控件相同的行為，但是它要求開(kāi)發(fā)人員負(fù)責(zé)制訂向用戶(hù)提供建議的所有邏輯規(guī)則。該擴(kuò)展器會(huì)創(chuàng)建一個(gè)下拉列表樣式的面板，并將其放置在文本框的右下角。您可以根據(jù)自己的喜好設(shè)置面板的樣式和動(dòng)畫(huà)效果。下面的代碼將 Autocomplete 擴(kuò)展器與一個(gè)文本框相關(guān)聯(lián)：

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

該擴(kuò)展器綁定到用于提供列表填充詞匯的 Web 服務(wù)。MinimumPrefixLength 屬性指示控件何時(shí)調(diào)用該 Web 服務(wù)。已鍵入的文本將用作指定 Web 服務(wù)方法的輸入。響應(yīng)結(jié)果用于填充下拉列表。還可以啟用緩存。這樣，在多次鍵入相同的前綴時(shí)只需調(diào)用一次 Web 服務(wù)就可以了。此外，根據(jù) Web 服務(wù)檢索其數(shù)據(jù)的方式，還可以對(duì)服務(wù)器啟用緩存，減少與數(shù)據(jù)庫(kù)或其他遠(yuǎn)程數(shù)據(jù)存儲(chǔ)區(qū)之間的額外往返行程。

圖 C 列出了 AutoComplete 擴(kuò)展器支持的所有屬性。應(yīng)注意，除了此處列出的屬性，其他擴(kuò)展器還具有另外的屬性。TargetControlID 屬性用于獲取和設(shè)置擴(kuò)展控件的 ID；Enabled 屬性允許以編程方式打開(kāi)和關(guān)閉擴(kuò)展器的功能，該屬性默認(rèn)情況下設(shè)置為 True。還有 BehaviorID 屬性，該屬性用于設(shè)置提供擴(kuò)展行為的客戶(hù)端 JavaScript 對(duì)象的名稱(chēng)。***，還有兩個(gè)重要屬性：ClientState 和 EnableClientState。ClientState 屬性是一個(gè)字符串屬性，用于保持?jǐn)U展器的客戶(hù)端狀態(tài)。該狀態(tài)使用隱藏字段保持，字段的名稱(chēng)可以通過(guò) ClientStateFieldID 屬性進(jìn)行設(shè)置。EnableClientState 屬性是一個(gè)布爾屬性，用于控制是否啟用客戶(hù)端狀態(tài)。

FigureCAutoComplete 擴(kuò)展器屬性

構(gòu)建自動(dòng)完成 Web 服務(wù)

與 AutoComplete 擴(kuò)展器組合使用的 Web 服務(wù)是一項(xiàng) ASP.NET AJAX 腳本服務(wù)。該服務(wù)看起來(lái)幾乎與常規(guī)的 ASP.NET Web 服務(wù)沒(méi)什么兩樣，只是該服務(wù)的類(lèi)必須用 ScriptService 屬性加以修飾。如果您使用的 Web 服務(wù)缺少該屬性，則對(duì)相關(guān) ASMX 端點(diǎn)的每個(gè)請(qǐng)求都會(huì)導(dǎo)致 HTTP 500 錯(cuò)誤。不會(huì)向最終用戶(hù)顯示異常界面（擴(kuò)展器總是妥善地進(jìn)行降級(jí)處理），而且也不會(huì)顯示帶有建議的彈出面板：

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

請(qǐng)注意，腳本服務(wù)不需要 WebService 屬性，但仍可使用該屬性來(lái)提供命名空間信息。

腳本服務(wù)類(lèi)上使用 WebMethod 屬性標(biāo)記的任何公共方法的名稱(chēng)都可以成功地分配給擴(kuò)展器上的 ServiceMethod 屬性。用于提供建議的方法必須具有以下簽名：

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

***個(gè)參數(shù)是用于生成建議的前綴文本。它與文本框的當(dāng)前內(nèi)容相同，其長(zhǎng)度不小于 MinimumPrefixLength 屬性的值。Count 參數(shù)指示要提供的建議數(shù)。Count 參數(shù)的值來(lái)自 CompletionSetCount 屬性的值。

如果計(jì)劃利用上下文關(guān)鍵字（一個(gè)字符串屬性，用于指示要傳遞給綁定的 Web 服務(wù)的任何頁(yè)面或用戶(hù)特定的信息），則應(yīng)為要使用的任何 Web 服務(wù)方法提供重寫(xiě)方法。下面是簽名：

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

返回值始終以字符串?dāng)?shù)組形式打包。由于使用了 ScriptService 屬性，因此服務(wù)器與客戶(hù)端之間的所有通信都將通過(guò) JavaScript Object Notation (JSON) 字符串進(jìn)行。

可以利用 Web 服務(wù)方法上支持的任何屬性來(lái)改善服務(wù)性能。例如，WebMethod 屬性上的 CacheDuration 屬性可以強(qiáng)制服務(wù)對(duì)指定期間內(nèi)方法調(diào)用的響應(yīng)進(jìn)行緩存。同樣，如果方法的邏輯確實(shí)需要會(huì)話(huà)狀態(tài)，則您可以啟用會(huì)話(huà)狀態(tài)。

圖 4 顯示了針對(duì)客戶(hù)名稱(chēng)提供建議的示例服務(wù)，客戶(hù)名稱(chēng)來(lái)自 Northwind 數(shù)據(jù)庫(kù)。從性能角度來(lái)說(shuō)，鍵入少量字符就調(diào)用 Web 服務(wù)可能聽(tīng)起來(lái)并不是一個(gè)好主意。但是，有一些因素使得自動(dòng)完成比您想像的要更實(shí)用。AutoComplete 擴(kuò)展器的客戶(hù)端緩存基于本地內(nèi)存，永遠(yuǎn)不會(huì)通過(guò)隱藏字段保持。通過(guò)使用指定前綴作為關(guān)鍵字，可以將與該前綴關(guān)聯(lián)的完成列表存儲(chǔ)到內(nèi)部數(shù)組中。只要在文本框緩沖區(qū)中分解出相同的前綴，都會(huì)檢索該列表。因此，如果用戶(hù)重復(fù)鍵入相同的前綴，則不會(huì)通過(guò)網(wǎng)絡(luò)對(duì)后端服務(wù)執(zhí)行任何新的請(qǐng)求。

Figure4建議服務(wù)示例

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;
}
}

客戶(hù)端緩存明顯比服務(wù)器端緩存更有效，服務(wù)器端緩存可減少一些與數(shù)據(jù)庫(kù)之間的往返過(guò)程，但無(wú)法減少與 Web 服務(wù)器之間的往返行程。在圖 4 顯示的代碼中，服務(wù)加載數(shù)據(jù)庫(kù)中的所有客戶(hù)并在 ASP.NET 緩存中存儲(chǔ)該列表。然后，從緩存中檢索客戶(hù)列表并篩選出與前綴匹配的名稱(chēng)。

如前所述，用于提供建議的 Web 服務(wù)必須是 ASP.NET AJAX 腳本服務(wù)，并通過(guò) JSON 與客戶(hù)端進(jìn)行通信。您需要確定 SOAP 客戶(hù)端是否也可公開(kāi)訪問(wèn)該服務(wù)。ASP.NET AJAX 服務(wù)默認(rèn)情況下具有雙重功能：JSON 和 SOAP。通過(guò)將以下代碼添加到主機(jī)應(yīng)用程序的 web.config 文件，可以關(guān)閉 SOAP 客戶(hù)端：

＜system.web＞
?。紈ebServices＞
＜protocols＞
?。糲lear /＞
＜/protocols＞
?。?webServices＞
＜/system.web＞

使用 ASP.NET 3.5，還可以通過(guò)服務(wù) (SVC) 端點(diǎn)將 AutoComplete 擴(kuò)展器綁定到 Windows® Communication Foundation (WCF) 服務(wù)。該擴(kuò)展器使用以下 JavaScript 代碼來(lái)代替調(diào)用：

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

對(duì)于 Microsoft AJAX 客戶(hù)端庫(kù)中的 WebServiceProxy 類(lèi)，關(guān)鍵是指定端點(diǎn)在內(nèi)容類(lèi)型請(qǐng)求標(biāo)題設(shè)置為“application/json; charset=utf-8”時(shí)可以成功處理請(qǐng)求。若要?jiǎng)?chuàng)建 WCF 服務(wù)來(lái)提供建議，需要與下面類(lèi)似的類(lèi)：

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

此外，還需要一個(gè) SVC 端點(diǎn)，如下所示：

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

若要注冊(cè)服務(wù)，可以使用 webHttpBinding 綁定模型向 web.config 文件的 serviceModel 部分添加顯式端點(diǎn)?；蛘撸梢灾付?@ServiceHost 指令的 Factory 屬性，并使該屬性指向以下類(lèi)：

System.ServiceModel.Activation.WebScriptServiceHostFactory

設(shè)置 AutoComplete 擴(kuò)展器的樣式

AutoComplete 擴(kuò)展器支持相關(guān)樣式設(shè)置屬性，通過(guò)這些屬性，您可以指定要對(duì)控件的樣式部分使用的 CSS 類(lèi)。特別是，可以設(shè)置整個(gè)彈出區(qū)域的樣式，包括邊框和背景色。還可以對(duì)所有項(xiàng)和所選項(xiàng)使用不同設(shè)置。沒(méi)有為可選項(xiàng)提供任何預(yù)定義樣式。默認(rèn)情況下，不會(huì)選擇完成下拉列表中的***個(gè)元素。但是，可以使用 FirstRowSelected 屬性強(qiáng)制自動(dòng)選擇***項(xiàng)。

完成列表將在經(jīng)過(guò)指定毫秒數(shù)后顯示。經(jīng)過(guò)的時(shí)間通過(guò) CompletionInterval 屬性來(lái)控制，默認(rèn)情況下設(shè)置為一秒。經(jīng)過(guò)指定的時(shí)間后，擴(kuò)展器將調(diào)用服務(wù)以獲取建議列表。

可以使用 Animations 屬性向列表的打開(kāi)過(guò)程添加動(dòng)作。可以對(duì)以下兩個(gè)事件定義動(dòng)畫(huà)：OnShow 和 OnHide。動(dòng)畫(huà)通過(guò) Animation 擴(kuò)展器及其相關(guān)框架來(lái)執(zhí)行（參見(jiàn)圖 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＞

動(dòng)畫(huà)腳本會(huì)向完成列表添加淡入和淡出效果。OpacityAction 節(jié)點(diǎn)用于設(shè)置透明度，HideAction 節(jié)點(diǎn)用于顯示完成列表以及任何其他視覺(jué)效果。***，F(xiàn)adeIn 和 FadeOut 動(dòng)作執(zhí)行淡化效果。圖 6 顯示了一個(gè)動(dòng)態(tài)完成列表。

 
圖 6運(yùn)行中的 AutoComplete 擴(kuò)展器

對(duì)列表進(jìn)行漸進(jìn)式搜索

是否曾嘗試在長(zhǎng)長(zhǎng)的列表中查找某個(gè)特定項(xiàng)，例如，在包含世界上所有國(guó)家/地區(qū)的列表中查找某個(gè)國(guó)家/地區(qū)的名稱(chēng)？如果您速度足夠快地鍵入一些連續(xù)字母，可能會(huì)找到所需的國(guó)家/地區(qū)，但是即使猶豫了幾毫秒，那么鍵入的下一個(gè)字母就會(huì)成為搜索項(xiàng)的***個(gè)字母。ListSearch 擴(kuò)展器解決了這一限制。請(qǐng)注意，該擴(kuò)展器僅適用于 ASP.NET Web 和 HTML 控件，不可與 SELECT 或 OPTION 等常規(guī) HTML 元素一起使用。

因此，ListSearch 擴(kuò)展器的主要優(yōu)點(diǎn)是：它允許您通過(guò)鍵入字母來(lái)搜索列表控件中的項(xiàng)，并防止搜索字符串在幾秒鐘后丟失；相反，搜索字符串在您按 Esc 或回發(fā)至服務(wù)器（包括全部或部分回發(fā)）之前將一直保留在原處。鍵入的任何其他字符都將附加到搜索字符串，用于進(jìn)一步縮小搜索范圍。以下介紹如何使用 ListSearch 擴(kuò)展器：

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

該擴(kuò)展器提供了三個(gè)主要屬性：PromptText、PromptCssClass 和 PromptPosition。所有這些屬性都與提示文本有關(guān)，提示文本是顯示在目標(biāo)控件周?chē)淖址?，用于提供有關(guān)正在搜索的文本的可視化反饋。PromptText 的默認(rèn)值為“Type to search”。當(dāng)目標(biāo)列表控件獲得焦點(diǎn)后，此文本通常顯示在該控件的上方。PromptCssClass 屬性獲取并設(shè)置要應(yīng)用于提示消息的 CSS 類(lèi)的名稱(chēng)。提示文本由用戶(hù)鍵入的搜索文本來(lái)取代。Esc 和 Del 按鈕在此處起著重要作用。Esc 按鈕用于清除當(dāng)前搜索并將列表重置為默認(rèn)所選項(xiàng)。Del 按鈕用于從搜索文本中刪除上一次鍵入的字符，并在列表中更新選擇項(xiàng)。此外，Animations 屬性的作用與上文 AutoComplete 擴(kuò)展器部分中討論的作用相同。

彈出式上下文菜單

在用戶(hù)即將執(zhí)行操作時(shí)，為他們提供可以執(zhí)行哪些操作的選項(xiàng)，這一點(diǎn)非常好。幾年前，工具提示就是一項(xiàng)巨大的改進(jìn)，因?yàn)樗鼈兲峁┝擞嘘P(guān)特定控件角色的彈出式附加信息。動(dòng)態(tài) HTML 的出現(xiàn)使得 HTML 工具提示成為可能。

如今，HoverMenu 擴(kuò)展器能夠在任意 ASP.NET 服務(wù)器控件旁邊顯示彈出面板。此擴(kuò)展器最常用的一個(gè)用法是，顯示由鼠標(biāo)移動(dòng)事件而不是右鍵單擊激活的上下文菜單。

當(dāng)用戶(hù)將鼠標(biāo)移動(dòng)到控件上方時(shí)，HoverMenu 擴(kuò)展器就會(huì)激活。因此，將在控件附近顯示指定的彈出面板；實(shí)際位置可以通過(guò)編程方式進(jìn)行控制。此外，可以對(duì)控件應(yīng)用 CSS 樣式以醒目的格式標(biāo)記該控件。

圖 7 顯示的單選按鈕菜單可提供有關(guān)要在文本框中插入的文本的建議。下面是相關(guān)擴(kuò)展器的聲明：

 
圖 7運(yùn)行中的 HoverMenu 擴(kuò)展器

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

Panel1 控件包含單選按鈕列表。為了確保所有選擇都在文本框目標(biāo)控件中進(jìn)行處理，您在單選按鈕列表中定義了一個(gè) SelectedIndexChanged 事件，并將所有相關(guān)操作都封裝在 UpdatePanel 控件中。（有關(guān)詳細(xì)信息，請(qǐng)參閱本專(zhuān)欄的下載內(nèi)容中所附的源代碼）。

除了 PopupControlID 和 TargetControlID 屬性之外，HoverMenu 擴(kuò)展器還提供了一些其他屬性。HoverCssClass 屬性指示要在懸停菜單可見(jiàn)時(shí)應(yīng)用于目標(biāo)控件的 CSS 類(lèi)。PopupPosition 屬性指示相對(duì)于目標(biāo)控件的彈出位置，可能的值包括 Top、Right、Left 和 Bottom。OffsetX 和 OffsetY 屬性用于設(shè)置相對(duì)于確定位置的水平和垂直偏移量。***，PopDelay 屬性指示 DOM 事件與顯示彈出菜單之間的延遲。默認(rèn)值為 100 毫秒。

將鼠標(biāo)懸停在 DOM 事件上方時(shí)，該事件會(huì)觸發(fā) HoverMenu 擴(kuò)展器。HoverMenu 擴(kuò)展器與 Popup 擴(kuò)展器之間并沒(méi)有太大差異。主要區(qū)別在于激活機(jī)制和觸發(fā)器。當(dāng)用戶(hù)將焦點(diǎn)指向特定的目標(biāo)控件時(shí)，將會(huì)激活 Popup 擴(kuò)展器。若要激活 HoverMenu 擴(kuò)展器，用戶(hù)只需將鼠標(biāo)移動(dòng)到相應(yīng)控件上方即可。

看完了這篇文章，相信你對(duì)“如何使用AJAX擴(kuò)展器自定義控件”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！