Použití ovládacího prvku CascadingDropDown s databází (C#)
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 seznamuServiceMethod
: Webová metoda doručování položek seznamuTargetControlID
: ID rozevíracího seznamuCategory
: Informace o kategoriích, které se při vyvolání odesílají do webové metodyPromptText
: Text zobrazený při asynchronním načítání dat seznamu ze serveruParentControlID
: (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 (kliknutím zobrazíte obrázek v plné velikosti).
Druhý seznam se vyplní podle výběru v prvním seznamu (kliknutím zobrazíte obrázek v plné velikosti).