Remplissage d’une liste avec CascadingDropDown (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle CascadingDropDown dans ajax Control Toolkit étend un contrôle DropDownList afin que les modifications d’un DropDownList chargent les valeurs associées dans un autre DropDownList. (Pour instance, une liste fournit une liste d’États américains, et la liste suivante est ensuite remplie avec les principales villes de cet état.) Le premier défi à résoudre consiste à remplir une liste déroulante à l’aide de ce contrôle.

Vue d’ensemble

Le contrôle CascadingDropDown dans ajax Control Toolkit étend un contrôle DropDownList afin que les modifications d’un DropDownList chargent les valeurs associées dans un autre DropDownList. (Pour instance, une liste fournit une liste d’États américains, et la liste suivante est ensuite remplie avec les principales villes de cet état.) Le premier défi à résoudre consiste à remplir une liste déroulante à l’aide de ce contrôle.

Étapes

Pour activer les fonctionnalités de ASP.NET AJAX et control Toolkit, le ScriptManager contrôle doit être placé n’importe où sur la page (mais dans l’élément <form> ) :

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

Ensuite, un contrôle DropDownList est requis :

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

Pour cette liste, un extendeur CascadingDropDown est ajouté. Il envoie une demande asynchrone à un service web qui retourne ensuite une liste d’entrées à afficher dans la liste. Pour que cela fonctionne, les attributs CascadingDropDown suivants doivent être définis :

• ServicePath: URL d’un service web fournissant les entrées de liste
• ServiceMethod: méthode web qui remet les entrées de liste
• TargetControlID: ID de la liste déroulante
• Category: informations de catégorie envoyées à la méthode web lorsqu’elles sont appelées
• PromptText: texte affiché lors du chargement asynchrone des données de liste à partir du serveur

Voici le balisage de l’élément CascadingDropDown . La seule différence entre C# et VB est le nom du service web associé :

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

Le code JavaScript provenant de l’extendeur CascadingDropDown appelle une méthode de service web avec la signature suivante :

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

L’aspect important est donc que la méthode doit retourner un tableau de type CascadingDropDownNameValue (défini par le ASP.NET AJAX Control Toolkit). Dans le CascadingDropDownNameValue constructeur, tout d’abord le texte de l’entrée de liste, puis sa valeur doivent être fournis, comme <option value="VALUE">NAME</option> le ferait dans html. Voici quelques exemples de données :

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

Le chargement de la page dans le navigateur déclenche le remplissage de la liste avec trois fournisseurs.

La liste est remplie automatiquement (cliquez pour afficher l’image en taille réelle)

Next