Verwenden von automatischem Postback mit CascadingDropDown (VB)

von Christian Wenz

PDF herunterladen

Das CascadingDropDown-Steuerelement im AJAX Control Toolkit erweitert ein DropDownList-Steuerelement, sodass Änderungen in einer DropDownList zugeordnete Werte in einer anderen DropDownList laden. Bei Verwendung des CascadingDropDown-Steuerelements wird ASP. Das AutoPostBack-Feature des DropDownList-Steuerelements von NET funktioniert nicht, da das asynchrone Laden von Daten in die Liste selbst ein (unnötiges) Postback generiert. Mit etwas JavaScript-Code kann dieser Effekt vermieden werden.

Überblick

Das CascadingDropDown-Steuerelement im AJAX Control Toolkit erweitert ein DropDownList-Steuerelement, sodass Änderungen in einer DropDownList zugeordnete Werte in einer anderen DropDownList laden. (Für instance enthält eine Liste eine Liste der US-Bundesstaaten, und die nächste Liste wird dann mit den wichtigsten Städten in diesem Bundesstaat gefüllt.) Bei Verwendung des CascadingDropDown-Steuerelements wird ASP. Das AutoPostBack-Feature des DropDownList-Steuerelements von NET funktioniert nicht, da das asynchrone Laden von Daten in die Liste selbst ein (unnötiges) Postback generiert. Mit etwas JavaScript-Code kann dieser Effekt vermieden werden.

Schritte

Um die Funktionalität von ASP.NET AJAX und des Control Toolkit zu aktivieren, muss das ScriptManager Steuerelement an einer beliebigen Stelle auf der Seite platziert werden (aber innerhalb des <form> Elements):

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

Anschließend ist ein DropDownList-Steuerelement erforderlich:

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

Für diese Liste wird ein CascadingDropDown-Extender hinzugefügt, der Webdienst-URL und Methodeninformationen bereitstellt:

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

Der CascadingDropDown-Extender ruft dann asynchron einen Webdienst mit der folgenden Methodensignatur auf:

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

Die -Methode gibt ein Array vom Typ CascadingDropDown-Wert zurück. Der Konstruktor des Typs erwartet zunächst die Untertitel des Listeneintrags und dann den Wert (HTML-Attributvalue).

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

Durch das Laden der Seite im Browser wird die Dropdownliste mit drei Anbietern gefüllt, wobei der zweite Anbieter vorausgewählt ist. Außerdem definiert ASP.NET die JavaScript-Methode __doPostBack() . Nachdem die Seite geladen wurde, wird dieser JavaScript-Aufruf der Dropdownliste hinzugefügt, aber nur, wenn Elemente darin enthalten sind. Wenn keine Elemente in der Liste vorhanden sind, lädt das Control Toolkit diese derzeit, sodass der JavaScript-Code ein Timeout verwendet und es in einer halben Sekunde erneut versucht.

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

Auf diese Weise wird ein Postback nur ausgeführt, wenn tatsächlich Elemente in der Liste vorhanden sind und der Benutzer einen Eintrag auswählt.

Die Auswahl eines Listenelements führt zu einem Postback (Klicken Sie hier, um das Bild in voller Größe anzuzeigen).

Zurück