【AASP.NET コントロール】ASP.NET AJAX Control Toolkit (CascadingDropDownコントロール編)

 * 親ドロップダウンリストの結果を、子ドロップダウンリストに反映するようなドロップダウンリストを連携させる時に使う
 * 思ったよりすごく簡単にできた(個人的な感想)

デモ

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx

主なプロパティ

 * ParentControlID:親となるDropDownListコントロール(最上位には不要)
 * Category:ドロップダウンの一意に識別するためのカテゴリ名
 * LoadingText:値リスト読み込み時の表示テキスト(例「Now Loading」)
 * PromptText:オプション未選択時に表示するテキスト(例「-----」)
 * ServicePath:オプション値を取得するためのWebサービス・クラスファイル(例「Xxx.asmx」)
 * ServiceMethod:オプション値を取得するためのメソッド名

サンプル

http://blogs.yahoo.co.jp/dk521123/25919321.html
で作った「Company-Brunch連携ドロップダウンリスト」を
CascadingDropDownコントロールを使って作成する

画面構成

 * ToolkitScriptManager x 1
 * DropDownList x 2
 * CascadingDropDown x 2

DB構成

■テーブル「Company」
* Code : vchar(10) / PK
* Name : nvchar(50)
■テーブル「Brunch」
* CompanyCode : vchar(10) / PK
* Code : vchar(4) / PK
* Name : nvchar(50)

画面一部抜粋(WebForm1.aspx)

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" 
    EnableScriptGlobalization="True">
</ajaxToolkit:ToolkitScriptManager>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="DropDownList1_CascadingDropDown" 
    runat="server" Category="Company" LoadingText="Now Loading" 
    PromptText="会社を選択してください" ServiceMethod="GetDropDownData" 
    ServicePath="WebService1.asmx" TargetControlID="DropDownList1">
</ajaxToolkit:CascadingDropDown>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="DropDownList2_CascadingDropDown" 
    runat="server" Category="Brunch" LoadingText="Now Loading" 
    ParentControlID="DropDownList1" PromptText="支店を選択してください" 
    ServiceMethod="GetDropDownData" ServicePath="WebService1.asmx" 
    TargetControlID="DropDownList2">
</ajaxToolkit:CascadingDropDown>

Webサービス・クラス(WebService1.asmx)

Imports AjaxControlToolkit
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Data.Common

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

    <WebMethod()> _
    Public Function GetDropDownData(ByVal knownCategoryValues As String, ByVal category As String) _
        As List(Of CascadingDropDownNameValue)

        Dim result As New List(Of CascadingDropDownNameValue)
        Dim setting As ConnectionStringSettings = _
          ConfigurationManager.ConnectionStrings("SampleDBConnectionString")
        Dim factory As DbProviderFactory = _
          DbProviderFactories.GetFactory(setting.ProviderName)
        Using db As DbConnection = factory.CreateConnection()
            db.ConnectionString = setting.ConnectionString
            Dim comm As DbCommand = factory.CreateCommand()
            comm.Connection = db

            Select Case category
                Case "Company"
                    comm.CommandText = "SELECT Code, Name FROM Company ORDER BY Code"

                    ' カテゴリ"Company"の場合、親のドロップダウンリストで
                    ' 選択された会社コードをキーにCompanyテーブルを検索
                Case "Brunch"
                    comm.CommandText = "SELECT Code ,Name FROM Brunch WHERE CompanyCode=@CompanyCode"
                    Dim param As DbParameter = factory.CreateParameter()
                    param.ParameterName = "@CompanyCode"
                    Dim sd As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
                    param.Value = sd.Item("Company")
                    comm.Parameters.Add(param)
            End Select

            db.Open()
            Dim reader As DbDataReader = comm.ExecuteReader()
            Do While reader.Read()
                Dim cv As New CascadingDropDownNameValue(reader(1), reader(0))
                result.Add(cv)
            Loop
        End Using
        Return result
    End Function
End Class


トラブルシューティング:例外「無効なポストバックまたはコールバック引数・・・」が表示される

 * 書ききれないので、以下のURL参照のこと
http://blogs.yahoo.co.jp/dk521123/26067076.html