使用自動回傳與 CascadingDropDown (VB)

作者 :一個是一個

下載 PDF

AJAX 控制項工具組中的 CascadingDropDown 控制項會擴充 DropDownList 控制項,讓一個 DropDownList 中的變更載入另一個 DropDownList 中的相關聯值。 不過,使用 CascadingDropDown 控制項時,ASP。NET 的 DropDownList 控制項 AutoPostBack 功能無法運作,因為以非同步方式將資料載入清單中會產生 (不必要的) 回傳本身。 使用某些 JavaScript 程式碼時,可以避免此效果。

概觀

AJAX 控制項工具組中的 CascadingDropDown 控制項會擴充 DropDownList 控制項,讓一個 DropDownList 中的變更載入另一個 DropDownList 中的相關聯值。 (例如,一個清單提供美國州清單,而下一個清單接著會填入該州的主要城市。) 不過,使用 CascadingDropDown 控制項時,ASP。NET 的 DropDownList 控制項 AutoPostBack 功能無法運作,因為以非同步方式將資料載入清單中會產生 (不必要的) 回傳本身。 使用某些 JavaScript 程式碼時,可以避免此效果。

步驟

若要啟用 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 服務 URL 和方法資訊:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown3.vb.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor" />

CascadingDropDown 擴充器接著會以下列方法簽章非同步呼叫 Web 服務:

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>

如此一來,只有在清單中實際有元素且使用者選取專案時,才會執行回傳。

選取清單專案會導致回傳

選取清單元素會導致回傳 (按一下即可檢視完整大小的影像)