使用 CascadingDropDown 實現三級聯動下拉選單（省市街道）

級聯式下拉選單是 Web 表單常見需求：選擇省份後自動篩選城市，選擇城市後再篩選街道。傳統 ASP 時代需大量 JavaScript，如今透過 ASP.NET AJAX Control Toolkit 的 CascadingDropDown 控件搭配 Web Service，即可輕鬆實現。本文完整示範從資料庫建立到前後端整合的完整流程。

資料庫與資料存取層建立

1. 方案中新增網站，於 App_Data 建立 SiteDB.mdf。
2. 建立三張資料表：
   • Province (Id int PK, Name varchar(50))
   • City (Id int PK, Name varchar(50), ProvinceId int FK)
   • Street (Id int PK, Name varchar(50), CityId int FK)
3. 填入範例資料（或使用附帶資料庫）。
4. 在 App_Code 新增 SiteDataSet.xsd，將三張表拖入設計介面，分別配置 TableAdapter：
   • Province：查詢全部資料
   • City：依 ProvinceId 篩選
   • Street：依 CityId 篩選

Web Service 實作

新增 CascadingService.asmx，實作三個方法對應三個下拉選單：

[WebMethod]
public CascadingDropDownNameValue[] GetProvinces(string knownCategoryValues, string category)
{
    // 回傳所有省份
}

[WebMethod]
public CascadingDropDownNameValue[] GetCities(string knownCategoryValues, string category)
{
    // 解析 knownCategoryValues 取得 ProvinceId，回傳對應城市
}

[WebMethod]
public CascadingDropDownNameValue[] GetStreets(string knownCategoryValues, string category)
{
    // 解析 knownCategoryValues 取得 CityId，回傳對應街道
}

前端頁面配置

<asp:DropDownList ID="ddlProvince" runat="server" />
<ajaxToolkit:CascadingDropDown ID="ccdProvince" runat="server"
    TargetControlID="ddlProvince"
    Category="Province"
    ServicePath="CascadingService.asmx"
    ServiceMethod="GetProvinces"
    LoadingText="載入省份中..."
    PromptText="請選擇省份" />

<asp:DropDownList ID="ddlCity" runat="server" />
<ajaxToolkit:CascadingDropDown ID="ccdCity" runat="server"
    TargetControlID="ddlCity"
    Category="City"
    ParentControlID="ddlProvince"
    ServicePath="CascadingService.asmx"
    ServiceMethod="GetCities"
    LoadingText="載入城市中..."
    PromptText="請選擇城市" />

<asp:DropDownList ID="ddlStreet" runat="server" />
<ajaxToolkit:CascadingDropDown ID="ccdStreet" runat="server"
    TargetControlID="ddlStreet"
    Category="Street"
    ParentControlID="ddlCity"
    ServicePath="CascadingService.asmx"
    ServiceMethod="GetStreets"
    LoadingText="載入街道中..."
    PromptText="請選擇街道" />

關鍵屬性說明

• ParentControlID：指定父級下拉選單，實現級聯觸發。
• knownCategoryValues：自動傳遞父級選取值（格式如 Province:1），Web Service 解析後查詢子級資料。
• CascadingDropDownNameValue：回傳結構包含 name（顯示文字）與 value（實際值）。

總結

透過 CascadingDropDown + Web Service + Typed DataSet，無需撰寫任何 JavaScript 即可實現高效能、可維護的多級聯動下拉選單，大幅降低開發複雜度。