使用 CascadingDropDown 搭配資料庫 (C#)

發行項
03/08/2024

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資料庫檔案。

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

若要啟用 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.cs.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor"
 PromptText="Select Vendor" />

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

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

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

<%@ WebService Language="C#" Class="CascadingDropdown1" %>
using System.Web.Script.Services;
using AjaxControlToolkit;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Data.SqlClient;
[ScriptService]
public class CascadingDropdown1 : System.Web.Services.WebService
{
 // ...
}

CascadingDropDown 所呼叫之 Web 方法的簽章如下所示：

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, 
    string category)

因此，傳回值必須是 Control Toolkit 所定義的型 CascadingDropDownNameValue 別數位列。此方法很容易實作：程式 GetVendors() 代碼會連線到 AdventureWorks 資料庫，並查詢前 25 個廠商。建構函式中的CascadingDropDownNameValue第一個參數是清單專案的標題，第二個參數的值 (HTML <option> 元素中的 value 屬性) 。程式碼如下：

[WebMethod]
public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, string category)
{
    SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
    Integrated Security=true; Initial Catalog=AdventureWorks");
    conn.Open();
    SqlCommand comm = new SqlCommand("SELECT TOP 25 VendorID, Name 
    FROM Purchasing.Vendor",conn);
    SqlDataReader dr = comm.ExecuteReader();
    List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
    while (dr.Read())
    {
        l.Add(new CascadingDropDownNameValue(dr["Name"].ToString(),
        dr["VendorID"].ToString()));
    }
    conn.Close();
    return l.ToArray();
}

取得廠商 (方法名稱的相關聯繫人： GetContactsForVendor()) 有點棘手。首先，必須先判斷第一個下拉式清單中已選取的廠商。 Control Toolkit 會定義該工作的協助程式方法：此方法 ParseKnownCategoryValuesString() 會傳回 StringDictionary 具有下拉式清單數據的元素：

[WebMethod]
public CascadingDropDownNameValue[] GetContactsForVendor(string knownCategoryValues, 
    string category)
{
    int VendorID;
    CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

基於安全性考慮，必須先驗證此數據。因此，如果有 Vendor 專案 (，因為 Category 第一個 CascadingDropDown 元素的屬性設定為 "Vendor") ，可能會擷取所選廠商的標識碼：

if (!kv.ContainsKey("Vendor") || !Int32.TryParse(kv["Vendor"],out VendorID)) 
{
    throw new ArgumentException("Couldn't find vendor.");
};

方法的其餘部分是相當直接的，然後。廠商的標識碼會作為 SQL 查詢的參數，以擷取該廠商的所有相關聯聯繫人。同樣地，方法會傳回類型的 CascadingDropDownNameValue陣列。

SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
 Integrated Security=true; Initial Catalog=AdventureWorks");
 conn.Open();
 SqlCommand comm = 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);
 SqlDataReader dr = comm.ExecuteReader();
 List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
 while (dr.Read())
 {
 l.Add(new CascadingDropDownNameValue(
 dr["FirstName"].ToString() + " " + dr["LastName"].ToString(),
 dr["ContactID"].ToString()));
 }
 conn.Close();
 return l.ToArray();
}

載入 ASP.NET 頁面，並在廠商清單填滿 25 個項目之後。挑選一個專案，並注意第二個下拉式清單如何填入數據。

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

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

上一個下一個

共用方式為

使用 CascadingDropDown 搭配資料庫 (C#)

概觀

步驟

意見反應

其他資源