使用 CascadingDropDown 填滿清單 (VB)

作者 :一個是一個

下載 PDF

AJAX 控制項工具組中的 CascadingDropDown 控制項會擴充 DropDownList 控制項,讓一個 DropDownList 中的變更載入另一個 DropDownList 中的相關聯值。 (例如,一個清單提供美國州的清單,而下一個清單接著會填入該州的主要城市。) 解決的第一項挑戰是實際使用此控制項填入下拉式清單。

概觀

AJAX 控制項工具組中的 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 服務,然後傳回要顯示在清單中的專案清單。 若要這樣做,必須設定下列 CascadingDropDown 屬性:

  • ServicePath:傳遞清單專案的 Web 服務的 URL
  • ServiceMethod:傳遞清單專案的 Web 方法
  • TargetControlID:下拉式清單的識別碼
  • Category:呼叫時提交至 Web 方法的類別資訊
  • PromptText:從伺服器非同步載入清單資料時顯示的文字

以下是 專案的 CascadingDropDown 標記。 C# 和 VB 之間的唯一差異是相關聯的 Web 服務名稱:

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

來自 CascadingDropDown 擴充器的 JavaScript 程式碼會使用下列簽章呼叫 Web 服務方法:

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

因此,重要的層面是方法必須傳回 ASP.NET AJAX Control Toolkit) 所定義的類型 CascadingDropDownNameValue (陣列。 在建構函式中 CascadingDropDownNameValue ,首先必須提供清單專案的文字,然後提供其值,就像在 HTML 中一樣 <option value="VALUE">NAME</option> 。 以下是一些範例資料:

<%@ WebService Language="VB" Class="CascadingDropDown0" %>
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 CascadingDropDown0
 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"))
 l.Add(New CascadingDropDownNameValue("Premier Sport, Inc.", "3"))
 Return l.ToArray()
 End Function
End Class

在瀏覽器中載入頁面將會觸發清單,以填入三個廠商。

清單會自動填入

清單會自動填入 (按一下即可檢視完整大小的影像)