使ってみようASP.NET AJAX Control Toolkit（入力補助コントロール編2）

ASP.NET AJAX Control Toolkitの利用方法を学習する 後編

AutoCompleteExtenderコントロール

　AutoCompleteExtenderコントロールはテキストボックスに複数の文字を入力後、下部に入力の補助を行うドロップダウンリストの機能を付加するエクステンダコントロールです。ASP.NET AJAX V1.0リリースに伴い、ASP.NET AJAX CTP（現ASP.NET Futures）からAJAX Control Toolkitへ移植された少し特殊なコントロールでもあります（本来はASP.NET 2.0 AJAX Extensionsに追加予定だったため）。

　また、数少ないWebServiceの利用必須となっているエクステンダコントロールの1つです。

表6

プロパティ名	概要
ServiceMethod	入力補助機能のメソッドを設定
ServicePath	入力補助機能を持ったWebServiceのパスを設定
MinimumPrefixLength	入力補助機能を動作させる最低限の文字数を設定（2文字から利用可能）
CompletionInterval	テキストが入力されてからWebServiceを使用するまでの時間をミリセカンドで設定
EnableCaching	クライアントサイドのキャッシング機能を有効化するかどうか設定
CompletionSetCount	テキストの入力補助を行うドロップダウンリストに表示される最大数を設定
TargetControlID	入力補助機能を付加させる「TextBoxコントロール」のIDを設定

　なお、ServiceMethodのパラメータと戻り値は、以下の規定を順守しなくてはいけません。

AutoComplete.asmx.vb（一部）

<WebMethod()> _
Public Function メソッド名(ByVal prefixText As String, _
    ByVal count As Integer) As String()

AutoComplete.asmx.cs（一部）

[WebMethod]
public string[] メソッド名(string prefixText, int count)

　prefixTextはテキストボックスに入力されたテキストが、countにはCompletionSetCountプロパティで設定された数が配置されます。Webブラウザのサイズに応じて値を設定するアプリケーションなどで0と設定された時のことを考えて（本来は0がセットされないのが一番ですが）、WebService側で0の時に固定で何個かセットするといった記述をしておくとよいでしょう。

　2文字以上の文字が入力された時に、すぐドロップダウンリストを表示し、入力補助機能を利用するには、次のように設定します。

AutoCompleteExtender.aspx（一部）

<asp:Content ID="Content1"
    ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1"
        runat="server" TargetControlID="TextBox1"
        ServicePath="AutoComplete.asmx" ServiceMethod="GetCompleteWord"
        MinimumPrefixLength="2" CompletionInterval="100"
        CompletionSetCount="9" />

　WebService側の設定は次のようになっています。

AutoComplete.asmx.vb（一部）

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
Public Class AutoComplete
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function GetCompleteWord(ByVal prefixText As String, _
        ByVal count As Integer) As String()

        Dim items As New List(Of String)

        For i As Integer = 0 To count Step 1
            items.Add(prefixText + "AutoComplete" + i.ToString())
        Next
        Return items.ToArray()
    End Function

End Class

　サンプルを実行すると図14～16のようになります（ダウンロードサンプルのファイルは「/AutoCompleteExtender/AutoCompleteExtender.aspx」です）。

図14 サンプル実行直後の画面

図15 2文字入力されオートコンプリート機能が動作中の画面

図16 ドロップダウンリストから選択された文字列がテキストボックスに入力された画面

MaskedEditExtenderコントロールとMaskedEditValidatorコントロール

　MaskedEditExtenderコントロールは、テキストボックスにフォーカスした時に入力形式を表示し、入力データが不正な場合にエラーメッセージを表示する機能を付加することが可能になります。

MaskEditExtenderコントロール

表7

プロパティ名	概要
Mask	入力される文字の制御を設定（数字だけ、文字だけなど）
MessageValidatorTip	MaskEditValidatorコントロールのTooltipMessageプロパティで設定したメッセージを表示するかどうか設定
OnFocusCssClass	テキストボックスにフォーカスがある時のCSSを設定
OnFocusCssNegative	テキストボックスにフォーカスがあり、負の値が入力されている時のCSSを設定
OnBlurCssNegative	テキストボックスに負の値が入力されている状態でフォーカスを失った時のCSSを設定
MaskType	検証を実行する型を設定
DisplayMoney	マスクの左か右に貨幣文字（\）を表示するかどうか設定
InputDirection	左から入力されるか右から入力されるか設定
AcceptAMPM	MaskTypeプロパティがTimeであり、CultureNameプロパティがen-USの時にAM/PMを表示するか設定
AcceptNegative	MaskTypeプロパティがDate、Numberの時に負の値を受け入れるかどうか設定
TargetControlID	入力のマスクフォーマットを表示させる「TextBoxコントロール」のIDを設定

　MaskedEditValidatorコントロールは、MaskedEditExtenderコントロールとTextBoxコントロールを対象としたカスタム検証コントロールです。また入力を行う際の補助メッセージなどを表示させることも可能です。

MaskEditValidatorコントロール

表8

プロパティ名	概要
ControlToValidate	検証を行う「TextBoxコントロール」のIDを設定
ControlExtender	「TextBoxコントロール」を拡張している「MaskEditExtenderコントロール」のIDを設定
IsValidEmpty	テキストボックスが空の状態で検証コントロールを表示するかしないか設定。デフォルトでTrue（表示されない）
EmptyValueMessage	テキストボックスが空の状態で表示されるメッセージを設定
InvalidValueMessage	テキストボックスに入力されている値が入力形式と異なっている時に表示されるメッセージを設定
TooltipMessage	テキストボックスにフォーカスがあり、入力されていない状態で表示されるメッセージ（入力案内）を設定

　テキストボックスに時間を入力させるための入力形式と検証コントロールの例は、次のような設定で実現できます。

MaskedEditExtender.aspx（一部）

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator1"
    runat="server"  ControlExtender="MaskedEditExtender1"
    ControlToValidate="TextBox1" IsValidEmpty="false"
    TooltipMessage="00:00:00から23:59:59までの間で入力をしてください"
    InvalidValueMessage="正しい時刻形式で入力してください"
    EmptyValueMessage="時間入力は必須です" />
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1"
    runat="server" TargetControlID="TextBox1" Mask="99:99:99"
    MaskType="Time" MessageValidatorTip="True"
    OnFocusCssClass="Focus" OnInvalidCssClass="Error" />

　サンプルを実行すると図17～21のようになります（ダウンロードサンプルのファイルは「/MaskedEditExtender/MaskedEditExtender.aspx」です）。

図17 サンプル実行直後の画面

図18 上のテキストボックスにフォーカスが当たった画面

図19 何も入力しないままフォーカスを外した画面

図20 許容していない入力形式で入力された画面

図21 正しい形式で入力された画面（下のテキストボックスにフォーカスが当たっている）