Ausfüllen einer Liste 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 einem anderen DropDownList-Objekt laden. (Eine Liste enthält z. B. eine Liste der US-Bundesstaaten, und die nächste Liste wird dann mit den Hauptstädten in diesem Bundesstaat gefüllt.) Die erste Herausforderung besteht darin, eine Dropdownliste mit diesem Steuerelement zu füllen.

Ü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 enthält z. B. eine Liste der US-Bundesstaaten, und die nächste Liste wird dann mit den Hauptstädten in diesem Bundesstaat gefüllt.) Die erste Herausforderung besteht darin, eine Dropdownliste mit diesem Steuerelement zu füllen.

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. Sie sendet eine asynchrone Anforderung an einen Webdienst, der dann eine Liste der Einträge zurückgibt, die in der Liste angezeigt werden sollen. Damit dies funktioniert, müssen die folgenden CascadingDropDown-Attribute festgelegt werden:

• ServicePath: URL eines Webdiensts, der die Listeneinträge bereitstellt
• ServiceMethod: Webmethode zur Bereitstellung der Listeneinträge
• TargetControlID: ID der Dropdownliste
• Category: Kategorieinformationen, die bei Aufruf an die Webmethode übermittelt werden
• PromptText: Text, der beim asynchronen Laden von Listendaten vom Server angezeigt wird

Hier sehen Sie das Markup für das CascadingDropDown Element. Der einzige Unterschied zwischen C# und VB ist der Name des zugeordneten Webdiensts:

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

Der JavaScript-Code, der vom CascadingDropDown-Extender stammt, ruft eine Webdienstmethode mit der folgenden Signatur auf.

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

Der wichtige Aspekt ist also, dass die Methode ein Array vom Typ CascadingDropDownNameValue zurückgeben muss (definiert durch das ASP.NET AJAX Control Toolkit). CascadingDropDownNameValue Im Konstruktor muss zuerst der Text des Listeneintrags und dann sein Wert bereitgestellt werden, genau wie <option value="VALUE">NAME</option> in HTML. Hier sind einige Beispieldaten:

<%@ WebService Language="C#" Class="CascadingDropdown0" %>
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 CascadingDropdown0 : 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 Liste mit drei Anbietern ausgefüllt.

Die Liste wird automatisch ausgefüllt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)