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>):

 
Sélectionnez

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

Ensuite, une DropDownList est nécessaire:

 
Sélectionnez

<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é:

 
Sélectionnez

<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:

 
Sélectionnez

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:

 
Sélectionnez

<%@ 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.

Image non disponible
La liste est automatiquement remplie