Utiliser une CascadingDropDown avec une base de données

Cet article est la traduction la plus fidèle possible de l'article original: Using CascadingDropDown with a Database

Le contrôle CascadingDropDown de l'AJAX Control Toolkit étend un contrôle DropDownList de façon à ce que des changements dans une DropDownList chargent des données associées dans une autre DropDownList (Par exemple, une liste fournit la liste des états US et la liste suivante est remplie avec les principales villes de cet état). Dans le but de réaliser cet exercice, un web service doit être crée spécialement.

Premièrement, une source de données est nécessaire. Ce tutoriel utilise la base de données AdventureWorks et Microsoft SQL Server 2005 Express Edition. La base de données est en option lors de l'installation de Visual Studio (y compris la version Express) et est également téléchargeable à l'adresse http://go.microsoft.com/fwlink/?LinkId=64064. La base de données AdventureWorks fait partie de SQL Server 2005 Samples and Sample Databases (téléchargeable à l'adresse http://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e). La façon la plus facile d'installer la base est d'utiliser Microsoft SQL Server Management Studio Express (http://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796) et d'attacher le fichier de base AdventureWorks.mdf.

Pour ce tutoriel, nous partons du principe que l'instance de SQL Server 2005 Express Edition est appelée SQLEXPRESS et tourne sur la même machine que le serveur web; c'est également l'installation par défaut. Si votre installation diffère, vous devrez adapter les informations concernant la connection à la base.

Dans le but d'activer les fonctionnalités d'ASP.NET AJAX et du Control Toolkit, le contrôle ScriptManager doit être ajouté n'importe où dans la page (mais à l'intérieur de l'élément <form>):

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

Pour la prochaine étapes, 2 contrôles DropDownList sont nécessaires. Dans ce tutoriel, nous utilisons les informations vendeur et contact de la base AdventureWorks, donc nous créons une liste pour les vendeurs disponibles et une pour les contacts:

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

Ensuite, deux extendeurs CascadingDropDown doivent être ajoutés à la page. Un pour remplir la première liste (les vendeurs), et un autre pour remplir la seconde liste (les contacts). Les attributs suivants doivent être définis:

• ServicePath: URL du web service fournissant la liste des entrées
• ServiceMethod: Web méthode fournissant la liste des entrées
• TargetControlID: ID de la liste déroulante
• Category: Information sur la catégorie qui est soumise à la web méthode quand elle est appelée
• PromptText: Texte affiché pendant le chargement asynchrone des données de la liste en provenance du serveur
• (optionnel) liste déroulante parente qui déclenche le chargement de la liste courante

Suivant le langage utilisé, le nom du web service utilisé change, mais la valeur de tous les autres attributs reste identique. Ci-dessous, l'élément CascadingDropDown pour la première liste déroulante:

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

Le contrôle extendeur pour la seconde liste doit avoir son attribut ParentControlID défini, de façon à ce qu'une sélection dans la liste vendeurs déclenche un chargement des éléments associés dans la liste contacts.

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

Reste à définir le web service, voir ci-dessous. Notez l'utilisation de l'attribut [ScriptService], sans cela, ASP.NET AJAX ne pourrait créer le proxy Javascript pour accéder aux web méthodes depuis un script côté client.

<%@ 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 
{      
	// ... 
}

Ci-dessous la signature de la web méthode appelée par le CascadingDropDown:

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

La valeur de retour doit être un tableau de type CascadingDropDownNameValue qui est défini par l'ASP.NET AJAX Control Toolkit. La méthode GetVendors() est assez simple à implémenter: le code se connecte à la base de données AdventureWorks et récupère les 25 vendeurs. Le premier paramètre du constructeur de CascadingDropDownList est le texte de l'entrée de la liste, le second est sa valeur, (attribut valeur de l'élément HTML <option value="VALUE">NAME<option>). Ci-dessous le code:

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

Obtenir les contacts associés à un vendeur (méthode GetContactsForVendor()) est un peu délicat. Premièrement, il faut déterminir quel vendeur a été sélectionné dans la première liste déroulante. Le Control Toolkit définit une méthode helper pour cette tâche: la méthode ParseKnownCategoryValuesString() retourne un élément de type StringDictionary avec les données de la liste déroulante:

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

Pour des raisons de sécurité, cette donnée doit d'abord être validée. Donc, s'il y a une entrée Vendor (parce que la propriété Category du premier élément CascadingDropDown est défini à "Vendor"), l'ID du vendeur sélectionné doit être récupéré:

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

Le reste de la méthode est assez simple. L'ID du vendeur est utilisé comme paramètre pour une requête SQL qui retourne tous les contacts associés à ce vendeur. Une fois de plus, la méthode retourne un tableau de type 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();

Chargez la page ASP.NET, et après un court moment, la liste de vendeurs est remplie avec 25 entrées. Choisissez une entrée et notez comment la seconde liste est remplie.