データベースで CascadingDropDown を使用する (VB)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

AJAX コントロール ツールキットの CascadingDropDown コントロールは、DropDownList コントロールを拡張して、ある DropDownList の変更によって、関連付けられている値が別の DropDownList に読み込まれるようにします。 これを機能させるには、特別な Web サービスを作成する必要があります。

概要

AJAX コントロール ツールキットの CascadingDropDown コントロールは、DropDownList コントロールを拡張して、ある DropDownList の変更によって、関連付けられている値が別の DropDownList に読み込まれるようにします。 (たとえば、1 つのリストに米国の州の一覧が表示され、次のリストにはその州の主要都市が表示されます)。これを機能させるには、特別な Web サービスを作成する必要があります。

手順

まず、データ ソースが必要です。 このサンプルでは、AdventureWorks データベースと Microsoft SQL Server 2005 Express Editionを使用します。 データベースは、Visual Studio インストールのオプションの部分 (Express Edition を含む) であり、 の下 https://go.microsoft.com/fwlink/?LinkId=64064の別のダウンロードとしても使用できます。 AdventureWorks データベースは、SQL Server 2005 サンプル データベースとサンプル データベースの一部です (ダウンロード時https://www.microsoft.com/download/details.aspx?id=10679)。 データベースをセットアップする最も簡単な方法は、Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) を使用してデータベース ファイルをAdventureWorks.mdfアタッチすることです。

このサンプルでは、SQL Server 2005 Express Editionのインスタンスが呼び出SQLEXPRESSされ、Web サーバーと同じコンピューター上に存在することを前提としています。これは既定のセットアップでもあります。 セットアップが異なる場合は、データベースの接続情報を調整する必要があります。

ASP.NET AJAX と Control Toolkit の機能をアクティブにするには、コントロールを ScriptManager ページ上の任意の場所 (ただし、 要素内) に配置する <form> 必要があります。

<asp:ScriptManager ID="asm" runat="server" />

次の手順では、2 つの DropDownList コントロールが必要です。 このサンプルでは、AdventureWorks のベンダーと連絡先情報を使用するため、使用可能なベンダーと使用可能な連絡先に対して 1 つのリストを作成します。

<div>
 Vendor: <asp:DropDownList ID="VendorsList" runat="server"/><br />
 Contacts: <asp:DropDownList ID="ContactsList" runat="server"/><br />
</div>

次に、2 つの CascadingDropDown エクステンダーをページに追加する必要があります。 1 つは最初の (仕入先) リストを塗りつぶし、もう 1 つは 2 番目の (連絡先) リストを塗りつぶします。 次の属性を設定する必要があります。

  • ServicePath: リスト エントリを配信する Web サービスの URL
  • ServiceMethod: リスト エントリを配信する Web メソッド
  • TargetControlID: ドロップダウン リストの ID
  • Category: 呼び出されたときに Web メソッドに送信されるカテゴリ情報
  • PromptText: サーバーからリスト データを非同期に読み込むときに表示されるテキスト
  • ParentControlID: (省略可能) 現在のリストの読み込みをトリガーする親ドロップダウン リスト

使用するプログラミング言語に応じて、問題の Web サービスの名前が変更されますが、他のすべての属性値は同じです。 最初のドロップダウン リストの CascadingDropDown 要素を次に示します。

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor"
 PromptText="Select Vendor" />

2 番目のリストのコントロール エクステンダーでは、 属性を ParentControlID 設定して、仕入先リストでエントリを選択すると、連絡先リスト内の関連する要素の読み込みがトリガーされるようにする必要があります。

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetContactsForVendor"
 TargetControlID="ContactsList" ParentControlID="VendorsList"
 Category="Contact"
 PromptText="Select Contact" />

その後、実際の作業は、次のように設定された Web サービスで行われます。 属性が [ScriptService] 使用されている場合は、AJAX ASP.NET クライアント側スクリプト コードから Web メソッドにアクセスするための JavaScript プロキシを作成できないことに注意してください。

<%@ WebService Language="VB" Class="CascadingDropdown1" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.Data.SqlClient
<ScriptService()> _
Public Class CascadingDropdown1
 Inherits System.Web.Services.WebService
 ' ...
End Class

CascadingDropDown によって呼び出される Web メソッドのシグネチャは次のとおりです。

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

そのため、戻り値は、Control Toolkit によって定義される型 CascadingDropDownNameValue の配列である必要があります。 メソッドは GetVendors() 実装が非常に簡単です。コードは AdventureWorks データベースに接続し、最初の 25 ベンダーに対してクエリを実行します。 コンストラクターの最初のCascadingDropDownNameValueパラメーターは、リスト エントリのキャプション、2 つ目のパラメーターの値 (HTML の 要素の <option> value 属性) です。 次にコードを示します。

<WebMethod()> _
Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand( _
 "SELECT TOP 25 VendorID, Name FROM Purchasing.Vendor", conn)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("Name").ToString(),dr("VendorID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

ベンダー (メソッド名: GetContactsForVendor()) の関連付けられた連絡先を取得する方が少し複雑です。 まず、最初のドロップダウン リストで選択された仕入先を決定する必要があります。 Control Toolkit は、そのタスクのヘルパー メソッドを定義します。 メソッドは ParseKnownCategoryValuesString() 、ドロップダウン データを含む StringDictionary 要素を返します。

<WebMethod()> _
Public Function GetContactsForVendor(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim VendorID As Integer
 CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)

セキュリティ上の理由から、このデータを最初に検証する必要があります。 したがって、Vendor エントリがある場合 (最初の CascadingDropDown 要素の プロパティが に"Vendor"設定されているためCategory)、選択したベンダーの ID を取得できます。

If Not kv.ContainsKey("Vendor") Or Not Int32.TryParse(kv("Vendor"),VendorID) Then
 Throw New ArgumentException("Couldn't find vendor.")
 End If

メソッドの残りの部分はかなり簡単です。 ベンダーの ID は、そのベンダーに関連付けられているすべての連絡先を取得する SQL クエリのパラメーターとして使用されます。 もう一度、 メソッドは 型の配列を返します CascadingDropDownNameValue。

Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand("SELECT Person.Contact.ContactID, FirstName, LastName FROM Person.Contact,Purchasing.VendorContact WHERE VendorID=@VendorID AND Person.Contact.ContactID=Purchasing.VendorContact.ContactID",conn)
 comm.Parameters.AddWithValue("@VendorID", VendorID)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("FirstName").ToString() & " " & dr("LastName").ToString(),dr("ContactID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

ASP.NET ページを読み込み、しばらくすると仕入先一覧に 25 個のエントリが入力されます。 1 つのエントリを選択し、2 番目のドロップダウン リストにデータがどのように入力されているかを確認します。

最初のリストは自動的に入力されます

最初のリストが自動的に入力されます (クリックするとフルサイズの画像が表示されます)

2 番目のリストは、最初のリストの選択範囲に従って入力されます

2 番目の一覧は、最初の一覧の選択内容に従って入力されます (フルサイズの画像を表示するには、ここをクリックします)

前へ次へ