CascadingDropDown で一覧のエントリを事前設定する (VB)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の CascadingDropDown コントロールは、DropDownList コントロールを拡張して、ある DropDownList で変更が行われると、別の DropDownList にある関連付けられた値が読み込まれるようにします。 わずかなコードで、データが動的に読み込まれるとリスト要素が事前に選択されるようにできます。

概要

AJAX Control Toolkit の CascadingDropDown コントロールは、DropDownList コントロールを拡張して、ある DropDownList で変更が行われると、別の DropDownList にある関連付けられた値が読み込まれるようにします。 (たとえば、あるリストには米国の州の一覧があり、次のリストにはその州の主要都市がある場合です。)わずかなコードで、データが動的に読み込まれるとリスト要素が事前に選択されるようにできます。

手順

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

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

次に、DropDownList コントロールが必要です。

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

この一覧には、CascadingDropDown エクステンダーが追加され、Web サービスの URL とメソッドの情報が提供されます。

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

その後、CascadingDropDown エクステンダーは、次のメソッド シグネチャを使用して Web サービスを非同期的に呼び出します。

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

このメソッドは、CascadingDropDown 型の値の配列を返します。 型のコンストラクターは、最初にリスト エントリのキャプション、次に値 (HTML value 属性) を想定します。 3 番目の引数が true に設定されている場合、ブラウザーではリスト要素が自動的に選択されます。

<%@ WebService Language="VB" Class="CascadingDropDown2" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
<ScriptService()> _
Public Class CascadingDropDown2
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As
 String) As CascadingDropDownNameValue()
 Dim l As New List(Of CascadingDropDownNameValue)
 l.Add(New CascadingDropDownNameValue("International", "1"))
 l.Add(New CascadingDropDownNameValue("Electronic Bike Repairs & Supplies","2", True))
 l.Add(New CascadingDropDownNameValue("Premier Sport, Inc.", "3"))
 Return l.ToArray()
 End Function
End Class

ブラウザーでページを読み込むと、ドロップダウン リストに 3 つのベンダーが表示され、2 番目のベンダーが事前に選択されます。

The list is filled and preselected automatically

一覧が自動的に入力され、事前選択されます (フルサイズの画像を表示するにはここをクリック)