共用方式為

使用 CascadingDropDown 搭配資料庫 (VB)

  • 發行項

作者 ：擷取 Wenz

下載 PDF

AJAX 控件工具組中的 CascadingDropDown 控件會擴充 DropDownList 控件，讓一個 DropDownList 中的變更在另一個 DropDownList 中載入相關聯的值。 若要讓此作業能夠運作，必須建立特殊的 Web 服務。

概觀

AJAX 控件工具組中的 CascadingDropDown 控件會擴充 DropDownList 控件，讓一個 DropDownList 中的變更在另一個 DropDownList 中載入相關聯的值。 (例如，一個清單會提供美國州/地區的清單，而下一個清單接著會填入該州的主要城市。) 為了能夠運作，必須建立特殊的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資料庫檔案。

在此範例中，我們假設會呼叫 SQLEXPRESS SQL Server 2005 Express Edition 的實例，並位於與網頁伺服器相同的計算機上;這也是預設的設定。 如果您的設定不同，您必須調整資料庫的連線資訊。

若要啟用 ASP.NET AJAX 和 Control Toolkit 的功能，控件 ScriptManager 必須放在頁面上 (，但在 <form> 元素內) ：

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

在下一個步驟中，需要兩個DropDownList控件。 在此範例中，我們使用AdventureWorks中的廠商和聯繫人資訊，因此我們會為可用的廠商建立一個清單，另一個用於可用的聯繫人：

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

然後，必須將兩個 CascadingDropDown 擴充器新增至頁面。 其中一個會填入第一個 (廠商) 清單，另一個則會填入第二個 (聯繫人) 清單。 必須設定下列屬性：

  • ServicePath：傳遞清單專案的 Web 服務的 URL
  • ServiceMethod：傳遞清單專案的 Web 方法
  • TargetControlID：下拉式清單的標識碼
  • 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" />

第二個清單的控件擴充器必須設定 ParentControlID 屬性，如此一來，選取廠商清單中的專案就會觸發在聯繫人清單中載入相關聯的元素。

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

然後，會在 Web 服務中完成實際工作，其設定如下。 請注意，會 [ScriptService] 使用 屬性，否則 ASP.NET AJAX 無法建立 JavaScript Proxy，以從用戶端腳本程式代碼存取 Web 方法。

<%@ 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第一個參數是清單專案的 標題，第二個參數的值 (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 專案 (，因為 Category 第一個 CascadingDropDown 元素的 屬性設定為 "Vendor") ，可能會擷取所選廠商的標識碼：

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

方法的其餘部分是相當直接的，然後。 廠商的標識碼會作為 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 個項目之後。 挑選一個專案，並注意第二個下拉式清單如何填入數據。

第一個清單會自動填入

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

第二個清單會根據第一個清單中的選取範圍填入

第二個清單會根據第一個清單中的選取專案填入， (按兩下即可檢視大小完整的影像)

上一個下一個