Verwenden von automatischem Postback mit CascadingDropDown (C#)

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 eine andere 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 javaScript-Code kann dieser Effekt vermieden werden.

Überblick

Das CascadingDropDown-Steuerelement im AJAX Control Toolkit erweitert ein DropDownList-Steuerelement, sodass Änderungen in einem DropDownList-Steuerelement zugeordnete Werte in eine andere 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 javaScript-Code kann dieser Effekt vermieden werden.

Schritte

Um die Funktionalität von ASP.NET AJAX und dem Control 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.cs.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor" />

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

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)

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

<%@ WebService Language="C#" Class="CascadingDropdown3" %>
using System.Web.Script.Services;
using AjaxControlToolkit;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
[ScriptService]
public class CascadingDropdown3 : System.Web.Services.WebService
{
 [WebMethod]
 public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, 
 string category)
 {
 List<CascadingDropDownNameValue> l = new List<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();
 }
}

Wenn Sie die Seite im Browser laden, wird die Dropdownliste mit drei Anbietern ausgefüllt, wobei der zweite Anbieter vorab ausgewählt wird. 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 enthalten 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.

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