Pasos para crear una lista desplegable en cascada con Microsoft ASP.NET AJAX Framework

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

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

Introducción

Nota

Debe tener instalado .NET Framework 3,5 para poder usar las características de AJAX de ASP.NET. Si desea incorporar las características de ASP.NET AJAX en .NET Framework 2,0, debe tener instalado ASP.NET 2,0 AJAX Extensions 1,0.

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 desde otro DropDownList control. Cuando cambia la selección de un DropDownList control primario, la página web llama al servicio Web de Ajax para recuperar la lista de valores del DropDownList control secundario. El marco de ASP.NET AJAX permite llamar a los servicios web (archivos. asmx) desde el explorador mediante scripts de cliente. Por lo tanto, cuando se llama al servicio Web en el onchange evento del lado cliente del DropDownList control primario, la página web se actualizará parcialmente para rellenar los elementos del control secundario DropDownList .

Nota

El kit de herramientas de control de AJAX de ASP.NET proporciona un CascadingDropDown control como extensor de AJAX de ASP.net. Puede usar el CascadingDropDown control para crear una lista desplegable en cascada. En este artículo se explica cómo usar el DropDownList control estándar de ASP.net junto con el marco de AJAX de ASP.net para obtener la función de lista desplegable en cascada.

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 que se proporciona, el nombre del proyecto del proyecto de ejemplo de C# es KB_CascadingDDL_CS. El nombre del proyecto del proyecto de ejemplo de Visual Basic .NET es KB_CascadingDDL_VB.

  2. Agregue un formulario Web AJAX al proyecto.

    Nota

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

  3. Abra el archivo WebServiceName. asmx para el 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 el acceso al servicio Web AJAX desde los scripts del lado cliente. Una clase de servicio Web AJAX debe tener el ScriptServiceAttribute atributo aplicado y los métodos individuales a los que se llamará desde los scripts del lado cliente deben tener el WebMethodAttribute atributo aplicado.

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

    <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 del servicio Web.

    El ServiceReference objeto instruye a ASP.NET 2,0 Ajax Extensions para generar una clase proxy de JavaScript para llamar al servicio Web especificado desde los scripts del lado cliente en la Página Web. La clase de 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 los tipos de datos de servidor que se usan como parámetros de entrada o valores devueltos para los métodos de servicios Web. Estas clases de proxy permiten escribir scripts del lado cliente que inicialicen estos parámetros y los pasen a la llamada al método del 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 es evitar la devolución no válida cuando se usan llamadas de método de servicio Web.

  6. Agregue el siguiente código bajo la <asp:ScriptManager> etiqueta para generar los controles 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. Llamar 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 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 del servicio Web. También puede proporcionar una función de devolución de llamada errónea 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 con el siguiente formato:

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

    Puede proporcionar una única función de devolución de llamada correcta que se invoca desde varias llamadas de método de servicio Web. Para habilitar la función para diferenciar a los llamadores distintos, puede pasar la información de contexto del usuario a la función en el parámetro.

  9. Cree el proyecto.

Referencias

ASP.NET AJAX mejorada: interactividad y capacidad de respuesta mejoradas