Używanie metody CascadingDropDown z bazą danych (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList ładowały skojarzone 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.cs.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.cs.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="C#" Class="CascadingDropdown1" %>
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;
using System.Collections.Specialized;
using System.Data.SqlClient;
[ScriptService]
public class CascadingDropdown1 : System.Web.Services.WebService
{
 // ...
}

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

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

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 CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, string category)
{
    SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
    Integrated Security=true; Initial Catalog=AdventureWorks");
    conn.Open();
    SqlCommand comm = new SqlCommand("SELECT TOP 25 VendorID, Name 
    FROM Purchasing.Vendor",conn);
    SqlDataReader dr = comm.ExecuteReader();
    List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
    while (dr.Read())
    {
        l.Add(new CascadingDropDownNameValue(dr["Name"].ToString(),
        dr["VendorID"].ToString()));
    }
    conn.Close();
    return l.ToArray();
}

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 CascadingDropDownNameValue[] GetContactsForVendor(string knownCategoryValues, 
    string category)
{
    int VendorID;
    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 (!kv.ContainsKey("Vendor") || !Int32.TryParse(kv["Vendor"],out VendorID)) 
{
    throw new ArgumentException("Couldn't find vendor.");
};

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.

SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
 Integrated Security=true; Initial Catalog=AdventureWorks");
 conn.Open();
 SqlCommand comm = 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);
 SqlDataReader dr = comm.ExecuteReader();
 List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
 while (dr.Read())
 {
 l.Add(new CascadingDropDownNameValue(
 dr["FirstName"].ToString() + " " + dr["LastName"].ToString(),
 dr["ContactID"].ToString()));
 }
 conn.Close();
 return l.ToArray();
}

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)