* 親ドロップダウンリストの結果を、子ドロップダウンリストに反映するようなドロップダウンリストを連携させる時に使う * 思ったよりすごく簡単にできた(個人的な感想)
デモ
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
参考資料
http://www.atmarkit.co.jp/fdotnet/dotnettips/577aspajaxcascadingdd/aspajaxcascadingdd.htmlhttp://itpro.nikkeibp.co.jp/article/COLUMN/20061217/257080/
http://handcraft.blogsite.org/ComponentGeek/ShowArticle/38.aspx
■トラブルシューティング:例外「無効なポストバックまたはコールバック引数・・・」が表示される
* 書ききれないので、以下のURL参照のことhttp://blogs.yahoo.co.jp/dk521123/26067076.html