Verwenden von CascadingDropDown mit einer Datenbank (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. Damit dies funktioniert, muss ein spezieller Webdienst erstellt 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 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.) Damit dies funktioniert, muss ein spezieller Webdienst erstellt werden.

Schritte

Zunächst ist eine Datenquelle erforderlich. In diesem Beispiel werden die AdventureWorks-Datenbank und die Microsoft SQL Server 2005 Express Edition verwendet. Die Datenbank ist ein optionaler Bestandteil einer Visual Studio-Installation (einschließlich express edition) und kann auch separat heruntergeladen werden unter https://go.microsoft.com/fwlink/?LinkId=64064. Die AdventureWorks-Datenbank ist Teil der SQL Server 2005-Beispiele und Beispieldatenbanken (herunterladen unter https://www.microsoft.com/download/details.aspx?id=10679). Die einfachste Möglichkeit zum Einrichten der Datenbank besteht darin, das Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) zu verwenden und die AdventureWorks.mdf Datenbankdatei anzufügen.

Für dieses Beispiel wird davon ausgegangen, dass die Instanz der SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn sich Das Setup unterscheidet, müssen Sie die Verbindungsinformationen für die Datenbank anpassen.

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

Im nächsten Schritt sind zwei DropDownList-Steuerelemente erforderlich. In diesem Beispiel verwenden wir die Lieferanten- und Kontaktinformationen von AdventureWorks, daher erstellen wir eine Liste für die verfügbaren Lieferanten und eine für die verfügbaren Kontakte:

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

Anschließend müssen der Seite zwei CascadingDropDown-Extender hinzugefügt werden. Eine füllt die erste Liste (Lieferanten) aus, und das andere füllt die zweite Liste (Kontakte). Die folgenden Attribute müssen 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
• ParentControlID: (optional) übergeordnete Dropdownliste, die das Laden der aktuellen Liste auslöst

Je nach verwendeter Programmiersprache ändert sich der Name des betreffenden Webdiensts, aber alle anderen Attributwerte sind identisch. Hier ist das CascadingDropDown-Element für die erste Dropdownliste:

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

Die Steuerelementer für die zweite Liste müssen das ParentControlID Attribut festlegen, sodass das Auswählen eines Eintrags in der Lieferantenliste das Laden zugeordneter Elemente in der Kontaktliste auslöst.

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetContactsForVendor"
 TargetControlID="ContactsList" ParentControlID="VendorsList"
 Category="Contact"
 PromptText="Select Contact" />

Die eigentliche Arbeit erfolgt dann im Webdienst, der wie folgt eingerichtet wird. Beachten Sie, dass das [ScriptService] Attribut verwendet wird, andernfalls kann ASP.NET AJAX den JavaScript-Proxy nicht erstellen, um über clientseitigen Skriptcode auf die Webmethoden zuzugreifen.

<%@ WebService Language="VB" Class="CascadingDropdown1" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.Data.SqlClient
<ScriptService()> _
Public Class CascadingDropdown1
 Inherits System.Web.Services.WebService
 ' ...
End Class

Die Signatur der von CascadingDropDown aufgerufenen Webmethoden lautet wie folgt:

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

Der Rückgabewert muss also ein Array vom Typ CascadingDropDownNameValue sein, das vom Control Toolkit definiert wird. Die Methode ist recht einfach zu implementieren: Der GetVendors() Code stellt eine Verbindung mit der AdventureWorks-Datenbank und fragt die ersten 25 Anbieter ab. Der erste Parameter im CascadingDropDownNameValue Konstruktor ist die Beschriftung des Listeneintrags, der zweite wert (Wert-Attribut im HTML-Element<option>). Hier folgt der Code:

<WebMethod()> _
Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand( _
 "SELECT TOP 25 VendorID, Name FROM Purchasing.Vendor", conn)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("Name").ToString(),dr("VendorID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Das Abrufen der zugeordneten Kontakte für einen Anbieter (Methodenname: GetContactsForVendor()) ist etwas schwieriger. Zunächst muss der Anbieter, der in der ersten Dropdownliste ausgewählt wurde, bestimmt werden. Das Control Toolkit definiert eine Hilfsmethode für diese Aufgabe: Die ParseKnownCategoryValuesString() Methode gibt ein StringDictionary Element mit den Dropdowndaten zurück:

<WebMethod()> _
Public Function GetContactsForVendor(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim VendorID As Integer
 CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)

Aus Sicherheitsgründen müssen diese Daten zuerst überprüft werden. Wenn also ein Vendor-Eintrag vorhanden ist (da die Category Eigenschaft des ersten CascadingDropDown-Elements auf festgelegt "Vendor"ist), kann die ID des ausgewählten Anbieters abgerufen werden:

If Not kv.ContainsKey("Vendor") Or Not Int32.TryParse(kv("Vendor"),VendorID) Then
 Throw New ArgumentException("Couldn't find vendor.")
 End If

Der Rest der Methode ist ziemlich einfach. Die ANBIETER-ID wird als Parameter für eine SQL-Abfrage verwendet, die alle zugeordneten Kontakte für diesen Anbieter abruft. Erneut gibt die Methode ein Array vom Typ CascadingDropDownNameValuezurück.

Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand("SELECT Person.Contact.ContactID, FirstName, LastName FROM Person.Contact,Purchasing.VendorContact WHERE VendorID=@VendorID AND Person.Contact.ContactID=Purchasing.VendorContact.ContactID",conn)
 comm.Parameters.AddWithValue("@VendorID", VendorID)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("FirstName").ToString() & " " & dr("LastName").ToString(),dr("ContactID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Laden Sie die ASP.NET Seite, und nach kurzer Zeit wird die Lieferantenliste mit 25 Einträgen gefüllt. Wählen Sie einen Eintrag aus, und beachten Sie, wie die zweite Dropdownliste mit Daten gefüllt ist.

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

Die zweite Liste wird entsprechend der Auswahl in der ersten Liste ausgefüllt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)