Używanie metody CascadingDropDown z bazą danych (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList wczytywały odpowiednie wartości w innej kontrolce DropDownList. Aby można było to zrobić, należy utworzyć specjalną usługę internetową.

Przegląd

Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList wczytywały odpowiednie wartości w innej kontrolce DropDownList. (Na przykład jedna lista zawiera listę stanów USA, a następna lista jest następnie wypełniona dużymi miastami w tym stanie). Aby można było to zrobić, należy utworzyć specjalną usługę internetową.

Kroki

Przede wszystkim wymagane jest źródło danych. W tym przykładzie użyto bazy danych AdventureWorks i programu Microsoft SQL Server 2005 Express Edition. Baza danych jest opcjonalną częścią instalacji programu Visual Studio (w tym wersji ekspresowej) i jest również dostępna jako oddzielny plik do pobrania w obszarze https://go.microsoft.com/fwlink/?LinkId=64064. Baza danych AdventureWorks jest częścią przykładów i baz danych wzorcowych dla SQL Server 2005 (pobierz na stronie https://www.microsoft.com/download/details.aspx?id=10679). Najprostszym sposobem skonfigurowania bazy danych jest użycie programu Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) i dołączenie AdventureWorks.mdf pliku bazy danych.

W tym przykładzie przyjęto założenie, że wystąpienie programu SQL Server 2005 Express Edition jest wywoływane SQLEXPRESS i znajduje się na tym samym komputerze co serwer internetowy. Jest to również konfiguracja domyślna. Jeśli konfiguracja się różni, musisz dostosować informacje o połączeniu dla bazy danych.

Aby aktywować funkcjonalność ASP.NET AJAX i zestawu narzędzi control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie<form>):

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

W następnym kroku wymagane są dwie kontrolki DropDownList. W tym przykładzie używamy informacji kontaktowych i dostawcy z firmy AdventureWorks, dlatego tworzymy jedną listę dostępnych dostawców i jedną dla dostępnych kontaktów:

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

Następnie do strony należy dodać dwa rozszerzenia CascadingDropDown. Jedna z nich wypełnia pierwszą (dostawcy) listę, a druga wypełnia drugą (kontakty). Należy ustawić następujące atrybuty:

• ServicePath: adres URL serwisu internetowego dostarczającego wpisy listy
• ServiceMethod: Metoda webowa dostarczająca wpisy listy
• TargetControlID: identyfikator listy rozwijanej
• Category: informacje o kategorii przesyłane do metody internetowej po wywołaniu
• PromptText: Tekst wyświetlany podczas asynchronicznego ładowania danych listy z serwera
• ParentControlID: (opcjonalnie) nadrzędna lista rozwijana, która wyzwala ładowanie bieżącej listy

W zależności od używanego języka programowania nazwa danej usługi internetowej zmienia się, ale wszystkie inne wartości atrybutów są takie same. Oto element CascadingDropDown dla pierwszej listy rozwijanej:

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

Rozszerzenia kontrolne dla drugiej listy muszą ustawić atrybut ParentControlID, aby wybranie wpisu na liście dostawców wyzwalało ładowanie powiązanych elementów na liście kontaktów.

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

Rzeczywista praca jest następnie wykonywana w usłudze internetowej, która jest skonfigurowana w następujący sposób. Należy pamiętać, że atrybut [ScriptService] jest używany, w przeciwnym razie ASP.NET AJAX nie może utworzyć proxy dla JavaScript w celu uzyskania dostępu do metod sieciowych z kodu skryptu po stronie klienta.

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

Podpis metod sieci Web wywoływanych przez metodę CascadingDropDown jest następujący:

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

Dlatego wartość zwracana musi być tablicą typu CascadingDropDownNameValue , która jest zdefiniowana przez zestaw narzędzi Control Toolkit. Metoda GetVendors() jest dość łatwa do zaimplementowania: kod łączy się z bazą danych AdventureWorks i wykonuje zapytania względem pierwszych 25 dostawców. Pierwszy parametr w konstruktorze CascadingDropDownNameValue to podpis wpisu listy, drugi jego wartość (atrybut value w elemecie HTML<option>). Oto kod:

<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

Pobieranie przypisanych kontaktów dla dostawcy (nazwa metody: GetContactsForVendor()) jest nieco bardziej skomplikowane. Przede wszystkim należy określić dostawcę wybranego na pierwszej liście rozwijanej. Control Toolkit definiuje metodę pomocniczą dla tego zadania: metoda ParseKnownCategoryValuesString() zwraca element StringDictionary z danymi listy rozwijanej.

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

Ze względów bezpieczeństwa te dane muszą być najpierw zweryfikowane. Jeśli więc istnieje wpis Vendor (ponieważ Category właściwość pierwszego elementu CascadingDropDown jest ustawiona na "Vendor"), identyfikator wybranego dostawcy może zostać pobrany:

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

Reszta metody jest dość prosta. Identyfikator dostawcy jest używany jako parametr zapytania SQL, który pobiera wszystkie skojarzone kontakty dla tego dostawcy. Po raz kolejny metoda zwraca tablicę typu 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

Załaduj stronę ASP.NET, a po chwili lista dostawców zostanie wypełniona 25 wpisami. Wybierz jeden wpis i zwróć uwagę, jak druga lista rozwijana jest wypełniona danymi.

Pierwsza lista jest wypełniana automatycznie (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Druga lista jest wypełniana zgodnie z zaznaczeniem na pierwszej liście (kliknij, aby wyświetlić obraz o pełnym rozmiarze)