使用 CascadingDropDown 填滿清單 (C#)

作者 ：擷取 Wenz

下載 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.cs.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor" />

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

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

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

<%@ WebService Language="C#" Class="CascadingDropdown0" %>
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;
[ScriptService]
public class CascadingDropdown0 : System.Web.Services.WebService
{
 [WebMethod]
 public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, 
 string category)
 {
 List<CascadingDropDownNameValue> l = new List<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();
 }
}

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

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

下一步