如何使用AJAX擴展器自定義控件

小編給大家分享一下如何使用AJAX擴展器自定義控件，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

掩碼編輯功能的必要性

在 HTML 中，接受輸入數(shù)據(jù)的唯一方式是使用 <input> 標記。在 ASP.NET 中，只是使用 TextBox 控件對輸入標記進行了封裝。此控件存在的一個問題是：它并不限制用戶可以在其中鍵入的內(nèi)容。但是，通過使用少量的 JavaScript 代碼，您可以篩選掉不需要的文本。這就是上個月所介紹的內(nèi)容。這個月我將添加掩碼編輯功能，該功能允許在鍵入字符時對其進行篩選，并允許字符以區(qū)域特定格式顯示。掩碼編輯功能可用于篩選、驗證、自動設置格式和本地化。還可將該功能應用于許多真實數(shù)據(jù)類型，包括日期、貨幣、時間、郵政編碼、電話號碼、社會保險號碼或增值稅 ID 等。在 AJAX 控件工具包中，MaskedEdit 擴展器是一個免費組件，將其附加到 TextBox 控件后，您便可以對許多常見情況下的輸入行為進行控制。

MaskedEdit 擴展器

在 AJAX 控件工具包中，MaskedEdit 擴展器支持 MaskEditType 枚舉類型所指定的某些數(shù)據(jù)格式：2008年度***技術圖書與原創(chuàng)作者評選頒獎典禮

public enum MaskedEditType
{
None,
Date,
Number,
Time,
DateTime
}

您可以使用該擴展器輸入數(shù)字、日期、時間和日期/時間。擴展器根據(jù)給定的區(qū)域性設置來決定輸出格式。以下代碼段顯示了對接受日期輸入的文本框使用 MaskedEdit 擴展器的典型方式：

＜asp:TextBox runat="server" ID="TextBox1" /＞
＜act:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
TargetControlID="TextBox1"
Mask="99/99/9999"
MaskType="Date" /＞

圖 A 所列。主要通過兩個屬性來定義輸入掩碼：Mask 和 MaskType。Mask 的默認值為 ""，用于指定擴展器可接受的字符的掩碼。MaskType 的默認值為 ""，用于使用 MaskedEditType 枚舉所定義的任意值來指示掩碼類型。

FigureAMaskedEdit 擴展器屬性

MaskType 屬性通知擴展器目標控件將接受某個特定數(shù)據(jù)類型。Mask 屬性（字符串類型）指示表示文本框的有效輸入的字符序列。例如“12/6/07”和“12-09-2007”都是有效的日期，但它們使用不同的輸入掩碼。

要生成掩碼，需使用預定義的符號作為占位符。圖 1 列出了所支持的符號。例如，“999,999.99”掩碼會使代碼接受帶有小數(shù)點的數(shù)字，至多有一個千位分隔符。圖 2 顯示了使用掩碼編輯器擴展的文本框所顯示的最終用戶界面。貨幣符號的外觀由 DisplayMoney 屬性來控制，并會提示用戶必須鍵入的每個字符。默認提示符為下劃線，不過您可以通過 PromptCharacter 屬性來更改提示符。

Figure1輸入掩碼預定義的占位符

 
圖 2運行中的 MaskedEdit 擴展器

對于日期，還可以使用 AcceptAMPM、Century 等其他屬性，甚至可以使用 MaskedEditUserDateFormat 枚舉中指定的預定義格式之外的自定義用戶格式，如下所示：

public enum MaskedEditUserDateFormat
{
None,
DayMonthYear,
DayYearMonth,
MonthDayYear,
MonthYearDay,
YearDayMonth,
YearMonthDay
}

影響 MaskedEdit 擴展器所應用的格式的許多設置都繼承自當前區(qū)域性設置。CultureName 屬性指示要應用的區(qū)域性設置。請注意，此設置將覆蓋通過 @Page 指令中的 UICulture 屬性為頁面定義的區(qū)域性設置。

驗證掩碼輸入

雖然掩碼擴展器提供有動態(tài)格式設置功能，但是還有另外一個組件（掩碼驗證器）可確保將輸入的任何文本都解析為預期類型：

＜act:MaskedEditValidator
　ID="MaskedEditValidator1" runat="server"
　ControlExtender="MaskedEditExtender1"
　ControlToValidate="TextBox2"
　IsValidEmpty="False"
　EmptyValueMessage="Number is required "
　InvalidValueMessage="Number is invalid" /＞

圖 B 列出了該驗證器公開的屬性。掩碼文本框的 Text 屬性返回帶格式的文本。對于日期，該屬性返回類似于“02/04/2007”的文本；而對于數(shù)字輸入字段，該屬性返回類似于“1,200.00”的文本。即使在頁面上對用戶顯示了貨幣符號，Text 屬性中也不包括貨幣符號。

FigureBMaskedEditValidator 屬性

那么，如何將 Text 返回的值解析為邏輯數(shù)據(jù)類型（日期或小數(shù)）呢？可以對 DateTime 和 Decimal 類型使用靜態(tài) Parse 方法。但是必須注意所使用的區(qū)域性設置。例如，“02/04/2007”可以表示 2 月 4 日（美國區(qū)域性設置），也可以表示 4 月 2 日（歐洲區(qū)域性設置）。事實上，并沒有相關設置來保證輸入頁所使用的區(qū)域性設置與服務器頁所使用的區(qū)域性設置相匹配。這就存在以下風險：用戶根據(jù)歐洲區(qū)域性設置來鍵入日期，而將其作為美國區(qū)域性日期進行處理。更糟糕的是，使用意大利小數(shù)和千位分隔符在數(shù)字文本框中輸入的值 1200 可能會導致引發(fā)異常，因為 Decimal 類型的解析器默認使用美國區(qū)域性設置。讓我們來看看如何變通解決這些問題。

要牢記以下事實：除非顯式設置 CultureName 屬性，否則擴展器將默認使用 en-US 區(qū)域性設置。在服務器上，系統(tǒng)默認使用 Page 類上 UICulture 屬性的值。

在您的 Codebehind 類中，首先獲取反映用戶界面所使用的區(qū)域性設置的 CultureInfo 對象?？梢园凑障旅骘@示的方法繼續(xù)操作：

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

然后調(diào)用 Parse 方法根據(jù)所選區(qū)域性設置指定格式提供程序：

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

圖 3 顯示了使用不同的區(qū)域性設置進行輸入時同一頁面的行為。

 
圖 3使用不同的區(qū)域性設置將數(shù)據(jù)解析為 .NET 類型

文本框自動完成

您肯定對自動完成功能非常熟悉。該功能會根據(jù)輸入的前幾個字符預測用戶正在鍵入的單詞。Internet Explorer 會記錄已在地址欄和表單字段中鍵入的所有字符以自動完成填充。

當然，此功能完全基于瀏覽器，可以通過將 Autocomplete 屬性設置為 On 或 Off，來打開或關閉 <input> 和 <form> 標記的自動完成功能。Autocomplete 屬性不是標準的 HTML 屬性，但是現(xiàn)在幾乎所有瀏覽器都支持該屬性。

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

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

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

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

FigureCAutoComplete 擴展器屬性

構建自動完成 Web 服務

與 AutoComplete 擴展器組合使用的 Web 服務是一項 ASP.NET AJAX 腳本服務。該服務看起來幾乎與常規(guī)的 ASP.NET Web 服務沒什么兩樣，只是該服務的類必須用 ScriptService 屬性加以修飾。如果您使用的 Web 服務缺少該屬性，則對相關 ASMX 端點的每個請求都會導致 HTTP 500 錯誤。不會向最終用戶顯示異常界面（擴展器總是妥善地進行降級處理），而且也不會顯示帶有建議的彈出面板：

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

請注意，腳本服務不需要 WebService 屬性，但仍可使用該屬性來提供命名空間信息。

腳本服務類上使用 WebMethod 屬性標記的任何公共方法的名稱都可以成功地分配給擴展器上的 ServiceMethod 屬性。用于提供建議的方法必須具有以下簽名：

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

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

如果計劃利用上下文關鍵字（一個字符串屬性，用于指示要傳遞給綁定的 Web 服務的任何頁面或用戶特定的信息），則應為要使用的任何 Web 服務方法提供重寫方法。下面是簽名：

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

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

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

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

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

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

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

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

使用 ASP.NET 3.5，還可以通過服務 (SVC) 端點將 AutoComplete 擴展器綁定到 Windows&reg; Communication Foundation (WCF) 服務。該擴展器使用以下 JavaScript 代碼來代替調(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);

對于 Microsoft AJAX 客戶端庫中的 WebServiceProxy 類，關鍵是指定端點在內(nèi)容類型請求標題設置為“application/json; charset=utf-8”時可以成功處理請求。若要創(chuàng)建 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

設置 AutoComplete 擴展器的樣式

AutoComplete 擴展器支持相關樣式設置屬性，通過這些屬性，您可以指定要對控件的樣式部分使用的 CSS 類。特別是，可以設置整個彈出區(qū)域的樣式，包括邊框和背景色。還可以對所有項和所選項使用不同設置。沒有為可選項提供任何預定義樣式。默認情況下，不會選擇完成下拉列表中的***個元素。但是，可以使用 FirstRowSelected 屬性強制自動選擇***項。

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

可以使用 Animations 屬性向列表的打開過程添加動作?？梢詫σ韵聝蓚€事件定義動畫：OnShow 和 OnHide。動畫通過 Animation 擴展器及其相關框架來執(zhí)行（參見圖 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 節(jié)點用于設置透明度，HideAction 節(jié)點用于顯示完成列表以及任何其他視覺效果。***，F(xiàn)adeIn 和 FadeOut 動作執(zhí)行淡化效果。圖 6 顯示了一個動態(tài)完成列表。

 
圖 6運行中的 AutoComplete 擴展器

對列表進行漸進式搜索

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

因此，ListSearch 擴展器的主要優(yōu)點是：它允許您通過鍵入字母來搜索列表控件中的項，并防止搜索字符串在幾秒鐘后丟失；相反，搜索字符串在您按 Esc 或回發(fā)至服務器（包括全部或部分回發(fā)）之前將一直保留在原處。鍵入的任何其他字符都將附加到搜索字符串，用于進一步縮小搜索范圍。以下介紹如何使用 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 擴展器部分中討論的作用相同。

彈出式上下文菜單

在用戶即將執(zhí)行操作時，為他們提供可以執(zhí)行哪些操作的選項，這一點非常好。幾年前，工具提示就是一項巨大的改進，因為它們提供了有關特定控件角色的彈出式附加信息。動態(tài) HTML 的出現(xiàn)使得 HTML 工具提示成為可能。

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

當用戶將鼠標移動到控件上方時，HoverMenu 擴展器就會激活。因此，將在控件附近顯示指定的彈出面板；實際位置可以通過編程方式進行控制。此外，可以對控件應用 CSS 樣式以醒目的格式標記該控件。

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

 
圖 7運行中的 HoverMenu 擴展器

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

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

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

將鼠標懸停在 DOM 事件上方時，該事件會觸發(fā) HoverMenu 擴展器。HoverMenu 擴展器與 Popup 擴展器之間并沒有太大差異。主要區(qū)別在于激活機制和觸發(fā)器。當用戶將焦點指向特定的目標控件時，將會激活 Popup 擴展器。若要激活 HoverMenu 擴展器，用戶只需將鼠標移動到相應控件上方即可。

看完了這篇文章，相信你對“如何使用AJAX擴展器自定義控件”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！