作者 ：克里斯蒂安·溫茲
AJAX 控制工具包中的 CascadingDropDown 控制項是用來擴充 DropDownList 控制項的，其功能是當一個下拉清單發生變更時，可載入另一個下拉清單的相關值。 然而，當使用 CascadingDropDown 控制項時，ASP.NET 的 DropDownList 控制項中的 AutoPostBack 功能無法運作，因為非同步載入資料會產生（不必要的）回貼。 使用部分 JavaScript 程式碼時，可以避免此現象。
概觀
AJAX 控制工具包中的 CascadingDropDown 控制項是用來擴充 DropDownList 控制項的，其功能是當一個下拉清單發生變更時，可載入另一個下拉清單的相關值。 （例如，一個清單提供美國各州的清單，下一個清單則填入該州的主要城市。）然而，當使用 CascadingDropDown 控制項時，ASP.NET 的 DropDownList 控制項中的 AutoPostBack 功能無法運作，因為非同步載入資料會產生（不必要的）回貼。 使用部分 JavaScript 程式碼時，可以避免此現象。
Steps
為了啟用 ASP.NET AJAX 及控制工具包的功能， ScriptManager 控制項必須放置在頁面上的任何位置（但不在元素 <form> 內）：
<asp:ScriptManager ID="asm" runat="server" />
接著，需要一個下拉清單控制項：
<div>
Vendor: <asp:DropDownList ID="VendorsList" runat="server"/>
</div>
在此列表中，新增 CascadingDropDown 擴充控制項，提供網路服務的 URL 與方法資訊：
<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
ServicePath="CascadingDropdown3.vb.asmx" ServiceMethod="GetVendors"
TargetControlID="VendorsList" Category="Vendor" />
CascadingDropDown Extender 接著非同步呼叫一個具有以下方法簽名格式的網路服務：
Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
該方法回傳一個 CascadingDropDown 型別的值的陣列。 型別的建構子首先預期清單條目的說明文字，然後是值（HTML value 屬性）。
<%@ WebService Language="VB" Class="CascadingDropDown3" %>
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 CascadingDropDown3
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
在瀏覽器載入頁面後，下拉清單會填滿三個廠商，第二個會預先選定。 此外，ASP.NET 定義了 __doPostBack() JavaScript 方法。 頁面載入後，這個 JavaScript 呼叫會被加入下拉選單，但前提是該清單中有元素。 如果清單中沒有元素，控制工具包正在載入它們，因此 JavaScript 程式碼會使用逾時，並在半秒內重新嘗試。
<script type="text/javascript">
function pageLoad()
{
addAutoPostBack();
}
function addAutoPostBack()
{
if ($get("VendorsList").options.length > 0)
{
$get("VendorsList").setAttribute("onchange","javascript:setTimeout('__doPostBack(\\'VendorsList\\',\\'\\')', 0)");
}
else
{
setTimeout("addAutoPostBack()", 500);
}
}
</script>
這樣一來，回貼只有在清單中實際有元素且使用者選擇條目時才會執行。
選擇清單元素會產生回貼（點擊查看全尺寸圖片）
