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 eine andere DropDownList laden. Damit dies funktioniert, muss ein spezieller Webdienst erstellt 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.) 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 optionaler Bestandteil einer Visual Studio-Installation (einschließlich Express Edition) und steht auch als separater Download unter https://go.microsoft.com/fwlink/?LinkId=64064zur Verfügung. Die AdventureWorks-Datenbank ist Teil der SQL Server 2005 Samples and Sample Databases (Download unter https://www.microsoft.com/download/details.aspx?id=10679). Die einfachste Möglichkeit zum Einrichten der Datenbank besteht darin, die 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 instance der SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn ihr Setup unterschiedlich ist, müssen Sie die Verbindungsinformationen für die Datenbank anpassen.

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

Im nächsten Schritt sind zwei DropDownList-Steuerelemente erforderlich. In diesem Beispiel verwenden wir die Anbieter- und Kontaktinformationen von AdventureWorks. Daher erstellen wir eine Liste für die verfügbaren Anbieter und eine liste 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. Einer füllt die erste Liste (Lieferanten) aus, und die andere füllt die zweite (Kontaktliste) aus. Die folgenden Attribute müssen festgelegt werden:

• ServicePath: URL eines Webdiensts, der die Listeneinträge liefert
• ServiceMethod: Webmethode, die die Listeneinträge liefert
• TargetControlID: ID der Dropdownliste
• Category: Kategorieinformationen, die beim 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

Abhängig von der verwendeten Programmiersprache ändert sich der Name des betreffenden Webdiensts, aber alle anderen Attributwerte sind identisch. Hier sehen Sie 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 Steuerelementerweiterungen für die zweite Liste müssen das ParentControlID Attribut so festlegen, dass das Auswählen eines Eintrags in der Anbieterliste 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 GetVendors() -Methode ist recht einfach zu implementieren: Der Code stellt eine Verbindung mit der AdventureWorks-Datenbank her und fragt die ersten 25 Anbieter ab. Der erste Parameter im CascadingDropDownNameValue Konstruktor ist der Untertitel des Listeneintrags<option>, der zweite der Wert (Value-Attribut im HTML-Element). 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 ermittelt werden, der in der ersten Dropdownliste ausgewählt wurde. 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 "Vendor"festgelegt 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 also ziemlich einfach. Die ID des Anbieters wird als Parameter für eine SQL-Abfrage verwendet, die alle zugeordneten Kontakte für diesen Anbieter abruft. Die -Methode gibt erneut 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 Seite ASP.NET, und nach kurzer Zeit ist die Anbieterliste 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 gemäß der Auswahl in der ersten Liste ausgefüllt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen).

ZurückWeiter