Używanie automatycznego ogłaszania zwrotnego z funkcją CascadingDropDown (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList wczytywały odpowiednie wartości w innej kontrolce DropDownList. Jednak w przypadku używania kontrolki CascadingDropDown funkcja AutoPostBack kontrolki DropDownList platformy ASP.NET nie działa, ponieważ asynchroniczne ładowanie danych do listy samo generuje (niepotrzebny) postback. W przypadku kodu JavaScript można uniknąć tego efektu.

Przegląd

Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList wczytywały odpowiednie wartości w innej kontrolce DropDownList. (Na przykład jedna lista zawiera listę stanów USA, a następna lista jest wypełniona głównymi miastami w tym stanie). Jednak w przypadku używania kontrolki CascadingDropDown kontrolki DropDownList platformy ASP.NET funkcja AutoPostBack nie działa, ponieważ asynchroniczne ładowanie danych do listy powoduje wygenerowanie (niepotrzebnego) odświeżenia strony. W przypadku kodu JavaScript można uniknąć tego efektu.

Kroki

Aby aktywować funkcjonalność ASP.NET AJAX i zestawu narzędzi control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie<form>):

<asp:ScriptManager ID="asm" runat="server" />

Następnie wymagana jest kontrolka DropDownList:

<div>
 Vendor: <asp:DropDownList ID="VendorsList" runat="server"/>
</div>

Na potrzeby tej listy dodano rozszerzenie CascadingDropDown, udostępniając adres URL usługi internetowej i informacje o metodzie:

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

Rozszerzenie CascadingDropDown następnie wykonuje asynchroniczne wywołanie serwisu sieciowego z następującym podpisem metody:

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

Metoda zwraca tablicę typu CascadingDropDown value. Konstruktor typu oczekuje najpierw podpisu wpisu listy, a następnie wartości (atrybut 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

Załadowanie strony w przeglądarce spowoduje wypełnienie listy rozwijanej trzema dostawcami, a druga jest wstępnie wybrana. Ponadto ASP.NET definiuje metodę __doPostBack() JavaScript. Po załadowaniu strony to wywołanie języka JavaScript zostanie dodane do listy rozwijanej, ale tylko wtedy, gdy znajdują się w niej elementy. Jeśli na liście nie ma żadnych elementów, zestaw narzędzi Control Toolkit aktualnie je ładuje, więc kod JavaScript używa limitu czasu i spróbuje ponownie w połowie sekundy.

<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>

Dzięki temu postback jest wykonywany tylko wtedy, gdy lista zawiera elementy, a użytkownik wybiera wpis.

Wybranie elementu listy powoduje powrót (kliknij, aby wyświetlić obraz pełnowymiarowy)