Pasos para crear una lista desplegable en cascada mediante microsoft ASP.NET marco ajax

En este artículo se muestra cómo crear una lista desplegable en cascada mediante el marco de trabajo de AJAX de ASP.NET.

Versión original del producto: .NET Framework 3.5
Número de KB original: 976156

Introducción

Una lista desplegable en cascada es una serie de controles dependientes DropDownList en los que un DropDownList control depende de los controles primarios o anteriores DropDownList . Los elementos del DropDownList control se rellenan en función de un elemento seleccionado por el usuario de otro DropDownList control. Cuando cambia la selección de un control primario DropDownList , la página web llama al servicio web AJAX para recuperar la lista de valores del control secundario DropDownList . El marco de trabajo de AJAX ASP.NET permite llamar a servicios web (archivos .asmx) desde el explorador mediante scripts de cliente. Por lo tanto, al llamar al servicio web en el evento del lado onchange cliente del control primario DropDownList , la página web solo se actualizará parcialmente para rellenar los elementos del control secundario DropDownList .

Pasos para crear una lista desplegable en cascada

1. Cree una aplicación de servicio web de ASP.NET en Visual Studio.

   Nota:

   En el código de ejemplo proporcionado, se KB_CascadingDDL_CS el nombre del proyecto de ejemplo de C#. El nombre del proyecto de ejemplo de Visual Basic .NET se KB_CascadingDDL_VB.

2. Agregue un formulario web AJAX al proyecto.

   Nota:

   En el código de ejemplo, se Default.aspx el nombre de archivo del formulario web. El nombre del servicio web AJAX es WebService.

3. Abra el archivo WebServiceName.asmx del servicio web AJAX y, a continuación, quite la marca de comentario de la declaración de clase como se indica a continuación.

   Visual Basic

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

   Visual C#

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

   Nota:

   Este paso permite acceder al servicio web AJAX desde los scripts del lado cliente. Una clase de servicio web AJAX debe tener aplicado el ScriptServiceAttribute atributo y los métodos individuales a los que se llamará desde scripts del lado cliente deben tener aplicado el WebMethodAttribute atributo .

4. Abra el archivo WebFormName.aspx del formulario web y, a continuación, cambie la etiqueta asp:ScriptManager> de la <siguiente manera:

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

   Para permitir que se llame a un servicio web AJAX desde los scripts del lado cliente en un formulario web de ASP.NET, primero debe agregar un ScriptManager control a la página web. A continuación, haga referencia al servicio web agregando un <asp:ServiceReference> elemento secundario a la <asp:ScriptManager> etiqueta . En la <asp:ScriptManager> etiqueta, establezca el Path atributo para que apunte al archivo de servicio web.

   El ServiceReference objeto indica a ASP.NET extensiones AJAX 2.0 que generen una clase de proxy de JavaScript para llamar al servicio web especificado desde los scripts del lado cliente en la página web. La clase proxy tiene métodos que corresponden a cada método de servicio web en el servicio web AJAX. La página Web también contiene clases de proxy de JavaScript que corresponden a tipos de datos de servidor que se usan como parámetros de entrada o valores devueltos para los métodos de servicio web. Estas clases de proxy permiten escribir scripts del lado cliente que inicializan estos parámetros y pasarlos a la llamada al método de servicio web.

5. Establezca la EnableEventValidation propiedad de la página Web en false en el código fuente del archivo WebFormName.aspx , como se muestra en el ejemplo siguiente.

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

   Nota:

   Este paso consiste en evitar el postback no válido cuando se usan llamadas al método de servicio web.

6. Agregue el código siguiente en la <etiqueta asp:ScriptManager> para generar los controles de ASP.NET necesarios.

   <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. Cree métodos de servicio web para el servicio web AJAX. Copie y pegue el código siguiente en el archivo 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. Llame a los métodos de servicio web para el servicio web AJAX desde scripts del lado cliente. Copie y pegue el código siguiente en el código que agregó en el paso 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>
   

   Llamar a un método de servicio web desde un script es asincrónico. Para obtener un valor devuelto o para determinar cuándo se ha devuelto la solicitud, debe proporcionar una función de devolución de llamada correcta. La función de devolución de llamada se invoca cuando la solicitud ha finalizado correctamente y contiene el valor devuelto de la llamada al método de servicio web. También puede proporcionar una función de devolución de llamada con errores para controlar los errores. Además, puede pasar información de contexto de usuario para usarla en las funciones de devolución de llamada.

   Puede llamar a un método de servicio web en un servicio web AJAX en el formato siguiente:

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

   Puede proporcionar una única función de devolución de llamada correcta que se invoque desde varias llamadas a métodos de servicio web. Para habilitar la función para diferenciar diferentes autores de llamadas, puede pasar la información de contexto de usuario a la función en el parámetro .

9. Cree el proyecto.

Referencias

ASP.NET Ajax: interactividad mejorada y capacidad de respuesta