Uso di CascadingDropDown con un database (VB)

di Christian Wenz

Scaricare il PDF

Il controllo CascadingDropDown in AJAX Control Toolkit estende un controllo DropDownList in modo che le modifiche apportate a un controllo DropDownList carichino i valori associati in un altro DropDownList. Per poter funzionare, è necessario creare un servizio Web speciale.

Informazioni generali

Il controllo CascadingDropDown in AJAX Control Toolkit estende un controllo DropDownList in modo che le modifiche apportate a un controllo DropDownList carichino i valori associati in un altro DropDownList. Ad esempio, un elenco fornisce un elenco di stati USA e l'elenco successivo viene quindi compilato con le principali città in tale stato. Per poter funzionare, è necessario creare un servizio Web speciale.

Gradi

Prima di tutto, è necessaria un'origine dati. Questo esempio usa il database AdventureWorks e Microsoft SQL Server 2005 Express Edition. Il database è una parte facoltativa di un'installazione di Visual Studio (inclusa l'edizione rapida) ed è disponibile anche come download separato in https://go.microsoft.com/fwlink/?LinkId=64064. Il database AdventureWorks fa parte degli esempi e dei database di esempio di SQL Server 2005 (scaricare all'indirizzo https://www.microsoft.com/download/details.aspx?id=10679). Il modo più semplice per impostare il database consiste nell'usare Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e allegare il file di AdventureWorks.mdf database.

Per questo esempio si presuppone che l'istanza di SQL Server 2005 Express Edition venga chiamata SQLEXPRESS e risieda nello stesso computer del server Web. Si tratta anche dell'installazione predefinita. Se la configurazione è diversa, è necessario adattare le informazioni di connessione per il database.

Per attivare la funzionalità di ASP.NET AJAX e Control Toolkit, il ScriptManager controllo deve essere inserito in qualsiasi punto della pagina (ma all'interno dell'elemento<form>):

<asp:ScriptManager ID="asm" runat="server" />

Nel passaggio successivo sono necessari due controlli DropDownList. In questo esempio viene usato il fornitore e le informazioni di contatto di AdventureWorks, quindi viene creato un elenco per i fornitori disponibili e uno per i contatti disponibili:

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

Quindi, due extender CascadingDropDown devono essere aggiunti alla pagina. Uno riempie il primo elenco (fornitori) e l'altro riempie il secondo elenco (contatti). È necessario impostare gli attributi seguenti:

• ServicePath: URL di un servizio Web che recapita le voci dell'elenco
• ServiceMethod: metodo Web che recapita le voci dell'elenco
• TargetControlID: ID dell'elenco a discesa
• Category: informazioni sulle categorie inviate al metodo Web quando viene chiamato
• PromptText: testo visualizzato quando si caricano in modo asincrono i dati dell'elenco dal server
• ParentControlID: (facoltativo) elenco a discesa padre che attiva il caricamento dell'elenco corrente

A seconda del linguaggio di programmazione usato, il nome del servizio Web in questione cambia, ma tutti gli altri valori di attributo sono gli stessi. Ecco l'elemento CascadingDropDown per il primo elenco a discesa:

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

Gli extender di controllo per il secondo elenco devono impostare l'attributo ParentControlID in modo che la selezione di una voce nell'elenco fornitori attivi il caricamento degli elementi associati nell'elenco contatti.

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

Il lavoro effettivo viene quindi eseguito nel servizio Web, che viene configurato come segue. Si noti che l'attributo [ScriptService] viene usato; in caso contrario, ASP.NET AJAX non è in grado di creare il proxy JavaScript per accedere ai metodi Web dal codice script sul lato client.

<%@ 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

La firma dei metodi Web chiamati da CascadingDropDown è la seguente:

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

Il valore restituito deve quindi essere una matrice di tipo CascadingDropDownNameValue definita da Control Toolkit. Il GetVendors() metodo è piuttosto semplice da implementare: il codice si connette al database AdventureWorks ed esegue query sui primi 25 fornitori. Il primo parametro nel CascadingDropDownNameValue costruttore è la didascalia della voce di elenco, la seconda il relativo valore (attributo value nell'elemento HTML<option>). Il codice è il seguente:

<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

Ottenere i contatti associati per un fornitore (nome del metodo: GetContactsForVendor()) è un po' più complicato. Prima di tutto, il fornitore selezionato nel primo elenco a discesa deve essere determinato. Control Toolkit definisce un metodo helper per l'attività: il ParseKnownCategoryValuesString() metodo restituisce un StringDictionary elemento con i dati dell'elenco a discesa:

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

Per motivi di sicurezza, questi dati devono essere convalidati per primi. Pertanto, se è presente una voce Vendor (perché la Category proprietà del primo elemento CascadingDropDown è impostata su "Vendor"), è possibile recuperare l'ID del fornitore selezionato:

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

Il resto del metodo è piuttosto semplice, quindi. L'ID del fornitore viene usato come parametro per una query SQL che recupera tutti i contatti associati per tale fornitore. Ancora una volta, il metodo restituisce una matrice di tipo CascadingDropDownNameValue.

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

Caricare la pagina ASP.NET e, dopo un breve periodo di tempo, l'elenco fornitori viene compilato con 25 voci. Selezionare una voce e notare come il secondo menu a tendina venga popolato con i dati.

Il primo elenco viene compilato automaticamente (fare clic per visualizzare l'immagine a dimensione intera)

Il secondo elenco viene compilato in base alla selezione nella prima lista (fare clic per visualizzare l'immagine a dimensione intera)