Sdílet prostřednictvím


Použití ovládacího prvku CascadingDropDown s databází (C#)

Christian Wenz

Stáhnout PDF

Ovládací prvek CascadingDropDown v sadě nástrojů AJAX Control Toolkit rozšiřuje ovládací prvek DropDownList tak, aby změny v jednom rozevíracím seznamu načítá přidružené hodnoty v jiném rozevíracím seznamu. Aby to fungovalo, musí být vytvořena speciální webová služba.

Přehled

Ovládací prvek CascadingDropDown v sadě nástrojů AJAX Control Toolkit rozšiřuje ovládací prvek DropDownList tak, aby změny v jednom rozevíracím seznamu načítá přidružené hodnoty v jiném rozevíracím seznamu. (Například jeden seznam obsahuje seznam států USA a další seznam se pak vyplní hlavními městy v tomto státě.) Aby to fungovalo, musí být vytvořena speciální webová služba.

Postup

Nejprve se vyžaduje zdroj dat. Tato ukázka používá databázi AdventureWorks a SQL Server 2005 Express Edition Microsoftu. Databáze je volitelnou součástí instalace sady Visual Studio (včetně edice Express) a je také k dispozici jako samostatný soubor ke stažení v části https://go.microsoft.com/fwlink/?LinkId=64064. Databáze AdventureWorks je součástí SQL Server 2005 Samples and Sample Databases (ke stažení na adrese https://www.microsoft.com/download/details.aspx?id=10679). Nejjednodušším způsobem, jak databázi nastavit, je použít microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) a připojit AdventureWorks.mdf soubor databáze.

U této ukázky předpokládáme, že instance SQL Server 2005 Express Edition je volána SQLEXPRESS a nachází se na stejném počítači jako webový server. Jedná se také o výchozí nastavení. Pokud se vaše nastavení liší, musíte upravit informace o připojení k databázi.

Aby bylo možné aktivovat funkce ASP.NET AJAX a Control Toolkit, ScriptManager musí být ovládací prvek umístěn kdekoli na stránce (ale v rámci elementuform<>):

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

V dalším kroku jsou vyžadovány dva ovládací prvky DropDownList. V této ukázce použijeme informace o dodavatelích a kontaktech z AdventureWorks, a proto vytvoříme jeden seznam pro dostupné dodavatele a jeden pro dostupné kontakty:

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

Na stránku pak musí být přidány dva extendery CascadingDropDown. Jeden vyplní první seznam (dodavatelé) a druhý vyplní druhý seznam (kontakty). Musí být nastaveny následující atributy:

  • ServicePath: Adresa URL webové služby doručující položky seznamu
  • ServiceMethod: Webová metoda doručování položek seznamu
  • TargetControlID: ID rozevíracího seznamu
  • Category: Informace o kategoriích, které se při vyvolání odesílají do webové metody
  • PromptText: Text zobrazený při asynchronním načítání dat seznamu ze serveru
  • ParentControlID: (volitelné) nadřazený rozevírací seznam, který aktivuje načtení aktuálního seznamu

V závislosti na použitém programovacím jazyce se název příslušné webové služby změní, ale všechny ostatní hodnoty atributů jsou stejné. Tady je element CascadingDropDown pro první rozevírací seznam:

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

Rozšiřující ovládací prvky pro druhý seznam musí nastavit ParentControlID atribut tak, aby výběr položky v seznamu dodavatelů aktivovalo načítání přidružených prvků v seznamu kontaktů.

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

Skutečná práce se pak provádí ve webové službě, která je nastavena následujícím způsobem. Všimněte si, že [ScriptService] atribut se používá, jinak ASP.NET AJAX nemůže vytvořit proxy javascriptu pro přístup k webovým metodám z kódu skriptu na straně 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 webových metod volal CascadingDropDown je následující:

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

Návratová hodnota tedy musí být pole typu CascadingDropDownNameValue , které je definováno sadou nástrojů Control Toolkit. Implementace GetVendors() metody je poměrně snadná: Kód se připojí k databázi AdventureWorks a dotazuje prvních 25 dodavatelů. První parametr v konstruktoru CascadingDropDownNameValue je popis položky seznamu, druhý jeho hodnota (atribut value v elementu <option> HTML). Zde je kód:

[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();
}

Získání přidružených kontaktů pro dodavatele (název metody: GetContactsForVendor()) je trochu složitější. Nejprve musí být určen dodavatel, který byl vybrán v prvním rozevíracím seznamu. Sada control toolkit definuje pomocnou metodu pro daný úkol: Metoda ParseKnownCategoryValuesString() vrátí StringDictionary prvek s daty rozevíracího seznamu:

[WebMethod]
public CascadingDropDownNameValue[] GetContactsForVendor(string knownCategoryValues, 
    string category)
{
    int VendorID;
    CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

Z bezpečnostních důvodů musí být tato data nejprve ověřena. Takže pokud existuje položka Vendor (protože Category vlastnost prvního elementu CascadingDropDown je nastavená na "Vendor"), ID vybraného dodavatele může být načteno:

if (!kv.ContainsKey("Vendor") || !Int32.TryParse(kv["Vendor"],out VendorID)) 
{
    throw new ArgumentException("Couldn't find vendor.");
};

Zbytek metody je tedy poměrně přímočarý. ID dodavatele se používá jako parametr pro dotaz SQL, který načte všechny přidružené kontakty pro daného dodavatele. Metoda opět vrátí pole 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();
}

Načtěte stránku ASP.NET a po chvíli se seznam dodavatelů vyplní 25 položkami. Vyberte jednu položku a všimněte si, jak je druhý rozevírací seznam vyplněný daty.

První seznam se vyplní automaticky.

První seznam se vyplní automaticky (kliknutím zobrazíte obrázek v plné velikosti).

Druhý seznam se vyplní podle výběru v prvním seznamu.

Druhý seznam se vyplní podle výběru v prvním seznamu (kliknutím zobrazíte obrázek v plné velikosti).