Étapes de création d’une liste déroulante en cascade à l’aide de l’infrastructure Microsoft ASP.NET AJAX

Cet article explique comment créer une liste déroulante en cascade à l’aide de l’infrastructure AJAX ASP.NET.

Version du produit d’origine : .NET Framework 3.5
Numéro de la base de connaissances d’origine : 976156

Introduction

Une liste déroulante en cascade est une série de contrôles dépendants DropDownList dans lesquels un DropDownList contrôle dépend du parent ou des contrôles précédents DropDownList . Les éléments du DropDownList contrôle sont remplis en fonction d’un élément sélectionné par l’utilisateur à partir d’un autre DropDownList contrôle. Lorsque la sélection d’un contrôle parent DropDownList change, la page web appelle le service Web AJAX pour récupérer la liste des valeurs du contrôle enfant DropDownList . L’infrastructure AJAX ASP.NET vous permet d’appeler des services web (fichiers .asmx) à partir du navigateur à l’aide de scripts clients. Par conséquent, lorsque vous appelez le service Web dans l’événement côté onchange client du contrôle parent DropDownList , la page Web n’est que partiellement actualisée pour remplir les éléments du contrôle enfant DropDownList .

Étapes de création d’une liste déroulante en cascade

1. Créez une application de service web ASP.NET dans Visual Studio.

   Remarque

   Dans l’exemple de code fourni, le nom de projet de l’exemple de projet C# est KB_CascadingDDL_CS. Le nom de projet de l’exemple de projet .NET Visual Basic est KB_CascadingDDL_VB.

2. Ajoutez un formulaire web AJAX au projet.

   Remarque

   Dans l’exemple de code, le nom de fichier du formulaire Web est Default.aspx. Le nom du service Web AJAX est WebService.

3. Ouvrez le fichier WebServiceName.asmx pour le service Web AJAX, puis supprimez la marque de commentaire pour la déclaration de classe comme suit.

   Visual Basic

   <System.Web.Script.Services.ScriptService()>
   Public Class WebService
   

   Visual C#

   [System.Web.Script.Services.ScriptService]
   public class WebService : System.Web.Services.WebService
   

   Remarque

   Cette étape permet d’accéder au service web AJAX à partir des scripts côté client. L’attribut doit être appliqué à une ScriptServiceAttribute classe de service Web AJAX, et l’attribut doit WebMethodAttribute être appliqué aux méthodes individuelles qui seront appelées à partir de scripts côté client.

4. Ouvrez le fichier WebFormName.aspx du formulaire Web, puis modifiez la <balise asp :ScriptManager> comme suit :

   <asp:ScriptManager ID="ScriptManager1" runat="server">
       <Services>
           <asp:ServiceReference Path="~/WebServiceName.asmx" />
       </Services>
   </asp:ScriptManager>
   

   Pour permettre à un service Web AJAX d’être appelé à partir des scripts côté client dans un formulaire web ASP.NET, vous devez d’abord ajouter un ScriptManager contrôle à la page Web. Ensuite, référencez le service Web en ajoutant un <asp:ServiceReference> élément enfant à la <asp:ScriptManager> balise. Dans la <asp:ScriptManager> balise , définissez l’attribut Path pour qu’il pointe vers le fichier de service Web.

   L’objet ServiceReference indique ASP.NET extensions AJAX 2.0 de générer une classe proxy JavaScript pour appeler le service Web spécifié à partir des scripts côté client dans la page Web. La classe proxy a des méthodes qui correspondent à chaque méthode de service Web dans le service Web AJAX. La page Web contient également des classes proxy JavaScript qui correspondent aux types de données serveur utilisés comme paramètres d’entrée ou valeurs de retour pour les méthodes de service web. Ces classes proxy vous permettent d’écrire des scripts côté client qui initialisent ces paramètres et les passent à l’appel de méthode du service web.

5. Définissez la EnableEventValidation propriété de la page Web sur false dans le code source du fichier WebFormName.aspx , comme illustré dans l’exemple suivant.

   <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="KB_CascadingDDL_VB._Default"
    EnableEventValidation="false" %>
   

   Remarque

   Cette étape permet d’éviter une publication non valide lorsque vous utilisez des appels de méthode de service web.

6. Ajoutez le code suivant sous la <balise asp :ScriptManager> pour générer les contrôles ASP.NET requis.

   <table>
       <tr>
           <td>
               Make:
           </td>
           <td>
               <asp:DropDownList ID="ddlMake" Width="200" runat="server" AutoPostBack="false" onchange="ddl_changed(this)" />
           </td>
       </tr>
       <tr>
           <td>
               Model:
           </td>
           <td>
               <asp:DropDownList ID="ddlModel" Width="200" runat="server" AutoPostBack="false" onchange="ddl_changed(this)" />
           </td>
       </tr>
       <tr>
           <td>
               Color:
           </td>
           <td>
               <asp:DropDownList ID="ddlColor" Width="200" runat="server" AutoPostBack="false" onchange="DisplayResult()" />
           </td>
       </tr>
       <tr>
           <td>
               <asp:Button ID="btnReset" runat="server" Text="Reset" />
           </td>
       </tr>
   </table>
   <a id="aResult" />
   

7. Créez des méthodes de service web pour le service Web AJAX. Copiez et collez le code suivant dans le fichier WebServiceName.asmx .

   Visual Basic

   Imports System.Web.Services
   Imports System.Web.Services.Protocols
   Imports System.ComponentModel
   
   ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
   <System.Web.Script.Services.ScriptService()> _
   <System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
   <System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
   <ToolboxItem(False)> _
   Public Class WebService
       Inherits System.Web.Services.WebService
   
       <WebMethod()> _
       Public Function GetMakeValue() As String()
           Return New String() {"Please select", "Ford", "Dodge"}
       End Function
   
       <WebMethod()> _
       Public Function GetChildValue(ByVal parentID As String, ByVal parentValue As String) As String()
           If parentValue = "Please select" Then
               Return Nothing
           End If
   
           Dim values As String()
           If parentID = "ddlMake" Then
               If parentValue = "Ford" Then
                   values = New String() {"Please select", "Explorer", "F150", "Mustang"}
               ElseIf parentValue = "Dodge" Then
                   values = New String() {"Please select", "Durango", "Dakota", "Viper"}
               Else
                   Return New String() {"Invalid Make value!"}
               End If
           ElseIf parentID = "ddlModel" Then
               Select Case parentValue
                   Case "Explorer", "Dakota", "Viper"
                       values = New String() {"Please select", "Black", "Green", "Yellow"}
                   Case "Durango", "F150", "Mustang"
                       values = New String() {"Please select", "White", "Red", "Blue"}
                   Case Else
                       values = New String() {"Invalid Model value!"}
               End Select
           Else
               Return New String() {"Invalid Category value!"}
           End If
           Return values
       End Function
   End Class
   

   Visual C#

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Services;
   
   namespace KB_CascadingDDL_CS
   {
       /// <summary>
       /// Summary description for WebService
       /// </summary>
       [WebService(Namespace = "http://tempuri.org/")]
       [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
       [System.ComponentModel.ToolboxItem(false)]
       // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
       [System.Web.Script.Services.ScriptService]
       public class WebService : System.Web.Services.WebService
       {
           [WebMethod()]
           public string[] GetMakeValue()
           {
               return new string[] { "Please select", "Ford", "Dodge" };
           }
   
           [WebMethod()]
           public string[] GetChildValue(string parentID, string parentValue)
           {
               if (parentValue == "Please select")
               {
                   return null;
               }
   
               string[] values;
               if (parentID == "ddlMake")
               {
                   if (parentValue == "Ford")
                   {
                       values = new string[] { "Please select", "Explorer", "F150", "Mustang" };
                   }
                   else if (parentValue == "Dodge")
                   {
                       values = new string[] { "Please select", "Durango", "Dakota", "Viper" };
                   }
                   else
                   {
                       return new string[] { "Invalid Make value!" };
                   }
               }
               else if (parentID == "ddlModel")
               {
                   switch (parentValue)
                   {
                       case "Explorer":
                       case "Dakota":
                       case "Viper":
                           values = new string[] { "Please select", "Black", "Green", "Yellow" };
                           break;
                       case "Durango":
                       case "F150":
                       case "Mustang":
                           values = new string[] { "Please select", "White", "Red", "Blue" };
                           break;
                       default:
                           values = new string[] { "Invalid Model value!" };
                           break;
                   }
               }
               else
               {
                   return new string[] { "Invalid Category value!" };
               }
               return values;
           }
       }
   }
   

8. Appelez les méthodes du service web pour le service web AJAX à partir de scripts côté client. Copiez et collez le code suivant sous le code que vous avez ajouté à l’étape 6.

   <script type="text/javascript">
       function pageLoad()
       {
           // call a Web service method with no parameters and the user context.
           KB_CascadingDDL_VB.WebService.GetMakeValue(SucceededCallbackWithContext, FailedCallback, "fillMake");
       }
   
       // Event handler for ddlMake and ddlModel.
       // This function calls a Web service method
       // passing simple type parameters and the user context.
       function ddl_changed(sender)
       {
           // This initiates the call to the server-side method in your code-behind
           // The parameters are as follows:
           // 1st : Specify all the parameters expected by your code-behind method
           //      (in this case there are 2: parentControl's ID, parentControl's selected text)
           // 2nd : Specify a callback method when the call succeeds
           // 3rd : Specify a callback method when the call fails(optional)
           // 4th : Specify a user context object (option - not shown)
           //      (in this case we need to assign the parentControl's ID as the user context)
           KB_CascadingDDL_VB.WebService.GetChildValue(sender.id, sender[sender.selectedIndex].text,
           SucceededCallbackWithContext, FailedCallback, sender.id);
       }
   
       // This is the callback function called if the
       // Web service succeeded. It accepts the result
       // object, the user context, and the method name as
       // parameters.
       function SucceededCallbackWithContext(result, userContext) {
   
           if (userContext == "fillMake") {
               //fill the Make
               var ddl = $get('ddlMake');
           } else if (userContext == "ddlMake") {
               // fill the Model
               var ddl = $get('ddlModel');
               $get('ddlColor').options.length = 0;
           } else if (userContext == "ddlModel") {
               // fill the Color
               var ddl = $get('ddlColor');
           }
           // clear the options
           ddl.options.length = 0;
           if (result)
           {
               var i = 0;
               for (var item in result)
               {
                   // item is the key, result[item] is the value
                   ddl.options.add(new Option(result[item], item));
                   i++;
               }
           } else {
               alert("Invalid! Please reset the selection!");
               $get(userContext).focus();
           }
       }
   
       // This is the callback function called if the
       // Web service failed. It accepts the error object
       // as a parameter.
       function FailedCallback(error)
       {
           if (error)
           {
               alert(error.get_message());
           }
           else
               alert("An unexpeceted error occurred");
       }
   
       //This the function to show the three DropDownLists'selection
       function DisplayResult()
       {
           $get("aResult").innerHTML = "You have selected a " +
           $get("ddlMake")[$get("ddlMake").selectedIndex].text + "," +
           $get("ddlModel")[$get("ddlModel").selectedIndex].text + "," +
           $get("ddlColor")[$get("ddlColor").selectedIndex].text + " car!";
       }
   </script>
   

   L’appel d’une méthode de service Web à partir d’un script est asynchrone. Pour obtenir une valeur de retour ou déterminer quand la demande a été retournée, vous devez fournir une fonction de rappel réussie. La fonction de rappel est appelée une fois la requête terminée, et elle contient la valeur de retour de l’appel de méthode de service web. Vous pouvez également fournir une fonction de rappel ayant échoué pour gérer les erreurs. En outre, vous pouvez transmettre des informations de contexte utilisateur à utiliser dans les fonctions de rappel.

   Vous pouvez appeler une méthode de service web dans un service Web AJAX au format suivant :

   theServiceNameSpace.WebServiceName.ServiceMethodName(parameters, SucceededCallbackFunctionName, FailedCallbackFunctionName, userContextString);
   

   Vous pouvez fournir une seule fonction de rappel réussie appelée à partir de plusieurs appels de méthode de service Web. Pour permettre à la fonction de différencier différents appelants, vous pouvez transmettre les informations de contexte utilisateur à la fonction dans le paramètre .

9. Créez le projet.

References

ASP.NET Ajax : Interactivité et réactivité améliorées