Remplir une liste en utilisant une CascadingDropDown

| Christian Wenz | Pascal ROZE (Traducteur) |

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.

- Titre : Remplir une liste en utilisant une CascadingDropDown

- Auteurs : Christian Wenz, Pascal ROZE (Traducteur)

- Parution : 8 mai 2009

- Licence : Copyright ® 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Vue générale

- Etapes

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.

La liste est automatiquement remplie