Verwenden von Auto-Postback mit CascadingDropDown (VB)

von Christian Wenz

PDF herunterladen

Das CascadingDropDown-Steuerelement im AJAX Control Toolkit erweitert ein DropDownList-Steuerelement, sodass Änderungen in einem DropDownList-Steuerelement zugeordnete Werte in einem anderen DropDownList-Objekt laden. Wenn Sie jedoch das CascadingDropDown-Steuerelement verwenden, funktioniert das AutoPostBack-Feature des DropDownList-Steuerelements von ASP.NET nicht, da das asynchrone Laden von Daten in die Liste selbst einen (unnötigen) Postback generiert. Mit einigen JavaScript-Code kann dieser Effekt vermieden werden.

Übersicht

Das CascadingDropDown-Steuerelement im AJAX Control Toolkit erweitert ein DropDownList-Steuerelement, sodass Änderungen in einem DropDownList-Steuerelement zugeordnete Werte in einem anderen DropDownList-Objekt laden. (Eine Liste bietet beispielsweise eine Auflistung von US-Bundesstaaten, und die nächste Liste wird dann mit größeren Städten in diesem Bundesstaat gefüllt.) Wenn jedoch das CascadingDropDown-Steuerelement verwendet wird, funktioniert das AutoPostBack-Feature des DropDownList-Steuerelements von ASP.NET nicht, da das asynchrone Laden von Daten in die Liste selbst einen (unnötigen) Postback erzeugt. Mit einigen JavaScript-Code kann dieser Effekt vermieden werden.

Schritte

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

<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 zurück. Der Konstruktor des Typs erwartet zuerst die Beschriftung des Listeneintrags und dann den Wert (HTML-Attribut 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

Beim Laden der Seite im Browser wird die Dropdownliste mit drei Anbietern gefüllt, wobei die zweite vorgewählt wird. Außerdem definiert ASP.NET die __doPostBack() JavaScript-Methode. 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 Steuerelement-Toolkit diese derzeit, sodass der JavaScript-Code ein Timeout verwendet und 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.

Wenn Sie ein Listenelement auswählen, wird ein Postback verursacht (Klicken, um das Bild in voller Größe anzuzeigen)