Partager via

Utilisation de CascadingDropDown avec une base de données (C#)

  • Article

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 que cela fonctionne, un service web spécial doit être créé.

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 des États américains, et la liste suivante est ensuite remplie avec les principales villes de cet état.) Pour que cela fonctionne, un service web spécial doit être créé.

Étapes

Tout d’abord, une source de données est requise. Cet exemple utilise la base de données AdventureWorks et microsoft SQL Server 2005 Express Edition. La base de données est une partie facultative d’une installation de Visual Studio (y compris l’édition express) et est également disponible en tant que téléchargement distinct sous https://go.microsoft.com/fwlink/?LinkId=64064. La base de données AdventureWorks fait partie du SQL Server 2005 Samples and Sample Databases (télécharger à l’adresse https://www.microsoft.com/download/details.aspx?id=10679). Le moyen le plus simple de configurer la base de données consiste à utiliser microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) et à attacher le AdventureWorks.mdf fichier de base de données.

Pour cet exemple, nous partons du principe que le instance du SQL Server 2005 Express Edition est appelé SQLEXPRESS et réside sur la même machine que le serveur web ; il s’agit également de la configuration par défaut. Si votre configuration diffère, vous devez adapter les informations de connexion pour la base de données.

Pour activer les fonctionnalités de ASP.NET AJAX et du Kit de ressources de contrôle, 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" />

À l’étape suivante, deux contrôles DropDownList sont requis. Dans cet exemple, nous utilisons le fournisseur et les informations de contact d’AdventureWorks. Par conséquent, nous créons une liste pour les fournisseurs disponibles et une liste pour les contacts disponibles :

<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. L’un remplit la première liste (fournisseurs) et l’autre remplit la deuxième liste (contacts). Les attributs suivants doivent être définis :

  • ServicePath: URL d’un service web qui fournit les entrées de liste
  • ServiceMethod: méthode web remettant 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
  • ParentControlID: liste déroulante parente (facultative) qui déclenche le chargement de la liste active

Selon le langage de programmation utilisé, le nom du service web en question change, mais toutes les autres valeurs d’attribut sont identiques. Voici 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" />

Les extendeurs de contrôle de la deuxième liste doivent définir l’attribut afin que la ParentControlID sélection d’une entrée dans la liste des fournisseurs déclenche le chargement des éléments associés dans la liste des contacts.

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

Le travail réel est ensuite effectué dans le service web, qui est configuré comme suit. Notez que l’attribut [ScriptService] est utilisé, sinon ASP.NET AJAX ne peut pas créer le proxy JavaScript pour accéder aux méthodes web à partir du code de 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
{
 // ...
}

La signature des méthodes web appelées par CascadingDropDown est la suivante :

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

Par conséquent, la valeur de retour doit être un tableau de type CascadingDropDownNameValue qui est défini par le Kit de ressources de contrôle. La GetVendors() méthode est assez facile à implémenter : le code se connecte à la base de données AdventureWorks et interroge les 25 premiers fournisseurs. Le premier paramètre du CascadingDropDownNameValue constructeur est le légende de l’entrée de liste, le second sa valeur (attribut value dans l’élément HTMLoption<>). Voici 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();
}

L’obtention des contacts associés pour un fournisseur (nom de la méthode : GetContactsForVendor()) est un peu plus difficile. Tout d’abord, le fournisseur sélectionné dans la première liste déroulante doit être déterminé. Control Toolkit définit une méthode d’assistance pour cette tâche : la ParseKnownCategoryValuesString() méthode retourne un StringDictionary élément avec les données de liste déroulante :

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

Pour des raisons de sécurité, ces données doivent être validées en premier. Par conséquent, s’il existe une entrée Fournisseur (car la Category propriété du premier élément CascadingDropDown est définie sur "Vendor"), l’ID du fournisseur sélectionné peut ê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, donc. L’ID du fournisseur est utilisé comme paramètre pour une requête SQL qui récupère tous les contacts associés pour ce fournisseur. 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, au bout d’un court instant, la liste des fournisseurs est remplie de 25 entrées. Sélectionnez une entrée et notez comment la deuxième liste déroulante est remplie de données.

La première liste est remplie automatiquement

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

La deuxième liste est remplie en fonction de la sélection dans la première liste

La deuxième liste est remplie en fonction de la sélection dans la première liste (Cliquez pour afficher l’image en taille réelle)

PrécédentSuivant