Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original: Filling a List Using CascadingDropDown
Vue générale▲
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). Le challenge à relever ici est en fait de remplir une liste en utilisant ce contrôle.
Etapes▲
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"
/>
Ensuite, une DropDownList est nécessaire:
<div>
Vendor: <asp:
DropDownList ID
=
"VendorsList"
runat
=
"server"
/>
</div>
Pour cette liste, un extendeur CascadingDropDown est ajouté. Il enverra une requête asynchrone vers un web service qui retournera une liste d'entrées à afficher dans la liste déroulante. Pour cela, il faut définir les attributs suivants du CascadingDropDown:
- 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
Ci-dessous le code pour l'élément CascadingDropDown. La seule différence entre le C# et le VB.NET est le nom du web service associé:
<ajaxToolkit:
CascadingDropDown ID
=
"ccd1"
runat
=
"server"
ServicePath
=
"CascadingDropdown0.cs.asmx"
ServiceMethod
=
"GetVendors"
TargetControlID
=
"VendorsList"
Category
=
"Vendor"
/>
Le code Javascript ajouté par l'extendeur CascadingDropDown appelle une méthode d'un web service avec la signature suivante:
public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)
L'aspect important ici est que la méthode doit retourner un tableau de type CascadingDropDownNameValue (défini par l'ASP.NET AJAX Control Toolkit). Dans le constructeur de CascadingDropDownList, il faut en premier passer le texte de l'entrée de la liste, puis sa valeur, de la même façon qu'on le ferait en HTML avec <option value="VALUE">NAME<option>. Ci-dessous un exemple:
<%
@ WebService Language=
"C#"
Class=
"CascadingDropdown0"
%>
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;
[ScriptService]
public
class
CascadingDropdown0 :
System.
Web.
Services.
WebService
{
[WebMethod]
public
CascadingDropDownNameValue[]
GetVendors
(
string
knownCategoryValues,
string
category)
{
List<
CascadingDropDownNameValue>
l =
new
List<
CascadingDropDownNameValue>(
);
l.
Add
(
new
CascadingDropDownNameValue
(
"International"
,
"1"
));
l.
Add
(
new
CascadingDropDownNameValue
(
"Electronic Bike Repairs & Supplies"
,
"2"
));
l.
Add
(
new
CascadingDropDownNameValue
(
"Premier Sport, Inc."
,
"3"
));
return
l.
ToArray
(
);
}
}
Charger la page dans le navigateur déclenchera le chargement de la liste avec trois vendeurs.