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

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

ListSearchExtender・CascadingDropDown

ListSearchExtenderコントロール

　ListSearchExtenderコントロールはタイピングによってListBoxコントロールかDropDownListコントロールの項目をリアルタイムに選択することができるエクステンダコントロールです。アルファベットだけではなく、記号なども判断し選択することが可能です。

表7

プロパティ名	概要
PromptTextListBox	コントロールか、DropDownListコントロールにフォーカスがある際に表示されるテキストを設定。既定では［Type to search］
PromptCssClass	PromptTextに適用するCSSを設定
PromptPosition	ListBoxコントロールか、DropDownListコントロールの上下どちらにPromptTextを表示するか設定

　ListBoxコントロールにフォーカスが当たっている際にタイピングすることでリアルタイムに選択されるようにするには次のように設定することで実現できます

default.aspx（一部）

<asp:ListBox ID="ListBox1" runat="server" 
    DataSourceID="XmlDataSource1" DataTextField="name"
    DataValueField="name">
</asp:ListBox>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
    DataFile="~/App_Data/City.xml">
</asp:XmlDataSource>
<ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" 
    runat="server" 
    TargetControlID="ListBox1" 
    PromptPosition="Bottom" />

　このListSearchExtenderコントロールは日本語で利用するのには向いていないコントロールの1つです。PromptTextプロパティに日本語で設定することは可能で、実際表示はされますが、タイピングされる時に文字が正しく表示されず、リアルタイムでの選択が行われないからです。もし利用するのであればListBoxコントロールかDropDownListコントロールの項目がすべて半角英数文字の時に利用しましょう。

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

図13 ListSearchExtenderコントロールの実行結果

図14 ListSearchExtenderコントロールの実行結果

CascadingDropDownコントロール

　CascadingDropDownコントロールはドロップダウンの選択肢によって次のドロップダウンの選択肢を切り替えることができる階層型のドロップダウンを作成するエクステンダコントロールです。WebServiceを利用して次以降のドロップダウンに表示しない項目などを設定することが可能となっています。逆に言うとWebServiceが利用必須となっているエクステンダコントロールの1つです。

表8

プロパティ名	概要
Category	DropDownListを意味するカテゴリ名を設定
PromptText	DropDownListの項目が未選択の時に表示するテキストを設定
LoadingText	DropDownListの項目をロードしている時に表示するテキストを設定
ServicePath	DropDownListの項目を変更するために利用するWebServiceのパスを設定
ServiceMethod	WebServiceの中で利用するメソッドを設定
ParentControlID	階層型DropDownListの親DropDonwListを設定（子のDropDownListのみ設定）
TargetControlID	階層型に拡張する「DropDownListコントロール」のIDを設定

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

AutoComplete.asmx.vb（一部）

<WebMethod()> _
    PublicFunctionメソッド名(ByVal knownCategoryValues As String,_
                     ByVal category As String) As _
                      AjaxControl Toolkit.CascadingDropDownNameValue()

AutoComplete.asmx.cs（一部）

[WebMethod]
public AjaxControl Toolkit.CascadingDropDownNameValue[] メソッド名(
                         string knownCategoryValues, 
                         string category)

　今回は手軽に利用するのを目的とし、XMLデータを利用しています。勿論SQL Serverを利用した表示も可能となっていますので利用状況に応じて切り分けて利用してください。

　1つ目のドロップダウンで市を選択し、2つ目のドロップダウンで区を表示させるには次のように設定することで実現できます（XMLデータはサンプルファイルを参照してください）。

default.aspx（一部）

<asp:DropDownList ID="DropDownList1" runat="server" Width="182px">
</asp:DropDownList><br />
<asp:DropDownList ID="DropDownList2" runat="server" Width="182px">
</asp:DropDownList><br />
<br />
<ajaxtoolkit:cascadingdropdown id="CascadingDropDown1" 
    runat="server" category="city"
    loadingtext="[ロード中です...]" prompttext="市を選択してください" 
    servicemethod="CityDropDownContents"
    servicepath="City.asmx" targetcontrolid="DropDownList1">
</ajaxtoolkit:cascadingdropdown>
<ajaxtoolkit:cascadingdropdown id="CascadingDropDown2" 
    runat="server" category="ward"
    loadingtext="[ロード中です...]" 
    parentcontrolid="DropDownList1" prompttext="区を選択してください"
    servicemethod="CityDropDownContents" 
    servicepath="City.asmx" 
    targetcontrolid="DropDownList2">
</ajaxtoolkit:cascadingdropdown>

［WebService］ City.vb

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Xml

<WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Script.Services.ScriptService()> _
Public Class City
  Inherits System.Web.Services.WebService

  Shared _Document As XmlDocument
  Shared _lock As New Object

  Public ReadOnly Property Document() As XmlDocument
    'XMLデータを共通の変数として利用するためロックして読み込みます。
    Get
      If (_Document Is Nothing) Then
        SyncLock _lock
        _Document = New XmlDocument
        _Document.Load(HttpContext.Current.Server.MapPath(_
                                              "~/App_Data/Area.xml"))
        End SyncLock

      End If
        '一度読み込んでいる場合は共通変数を参照します。
        Document = _Document
        Exit Property
    End Get
  End Property

  Public ReadOnly Property Hierarchy() As String()
    Get
      Dim _Heirarchy As String() = {"city"}
        Return _Heirarchy
    End Get
  End Property

  <WebMethod()> _
  Public Function CityDropDownContents(_
                   ByVal knownCategoryValues As String, _
                   ByVal category As String) _
                    As AjaxControlToolkit.CascadingDropDownNameValue()
    'ParseKnownCategoryValuesStringメソッドはStringのパラメタを
　　'渡すことでkeyと値に分けてStringDictionaryに格納します。
    Dim ValuesDictionary As New StringDictionary
    ValuesDictionary = AjaxControlToolkit.CascadingDropDown
                  .ParseKnownCategoryValuesString(knownCategoryValues)
    'QuerySimpleCascadingDropDownDocumentメソッドは
　　'XmlDocument,string(),StringDictionary,stringのパラメタを
    '渡すことでCascadingDropDownNameValue配列を生成します。
    Return AjaxControlToolkit.CascadingDropDown
                    .QuerySimpleCascadingDropDownDocument(Document, _
                                                   Hierarchy, _
                                                   ValuesDictionary, _
                                                   category)
  End Function
End Class

XMLデータソースを扱う時の注意点コントロールの注意点

　CascadingDropDownコントロールは基本的にデータベースとの連携が考えられるコントロールだと思います。QuerySimpleCascadingDropDownDocumentメソッドはXMLデータソースを利用してCascadingDropDownNameValue配列を生成するメソッドですが、一点注意点が必要です。それはXMLデータソースのタグに大文字を使わないという点です。もし大文字が入ってしまった場合はQuerySimpleCascadingDropDownDocumentメソッドはCascadingDropDownNameValue配列を生成することが出来なくなるので注意してください。

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

図15 CascadingDropDownコントロールの実行結果

図16 CascadingDropDownコントロールの実行結果

図17 CascadingDropDownコントロールの実行結果

まとめ

　本稿ではControl Toolkitの「直感的で便利なデータ入力を可能とするエクステンダ」に絞って7つのコントロールの基本的な利用方法について学習してきました。ほんの少しの設定で利用できるコントロールから、WebServiceまで作成することで利用できるコントロールと利用する際の複雑さは幅広くなっていますが、どれも開発者・利用者両方の立場から見ても魅力的なコントロールだと思います。実際に触れてプロジェクトや個人開発で利用する際の手助けになれば幸いです。

　次回は入力検証機能を強化するエクステンダ、 特殊なメニュー表示を可能にするエクステンダについて触れていきたいと思います。

参考資料

1. ASP.NET AJAX（公式ページ：英語）
2. ASP.NET AJAX Control Toolkit（ドキュメント：英語）