Pasos para crear una lista desplegable en cascada mediante el Microsoft ASP.NET marco AJAX

Artículo
01/25/2022
Tiempo de lectura: 8 minutos

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

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

Introducción

Nota

Debe tener instalada la .NET Framework 3.5 para usar las ASP.NET AJAX. Si desea incorporar ASP.NET ajax en el .NET Framework 2.0, debe tener ASP.NET 2.0 Ajax Extensions 1.0 instalado.

Una lista desplegable en cascada es una serie de controles dependientes en los que un DropDownList control depende de los controles DropDownList primarios o DropDownList anteriores. Los elementos del control se rellenan en función de un elemento seleccionado por el DropDownList usuario de otro DropDownList control. Cuando cambia la selección de un control primario, la página web llama al servicio web AJAX para recuperar la lista de DropDownList valores del DropDownList control secundario. El 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 evento del lado cliente del control primario, la página web solo se actualizará parcialmente para rellenar los elementos onchange DropDownList del control DropDownList secundario.

Nota

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

Pasos para crear una lista desplegable en cascada

Cree una ASP.NET de servicio web en Visual Studio.

Nota

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

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 tener acceso al servicio web AJAX desde los scripts del lado cliente. Una clase de servicio web AJAX debe tener aplicado el atributo y los métodos individuales a los que se llamará desde scripts del lado cliente deben ScriptServiceAttribute tener aplicado WebMethodAttribute el atributo.
Abra el archivo WebFormName.aspx del formulario web y, a continuación, cambie <asp:ScriptManager> la etiqueta 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 control a ScriptManager la página web. A continuación, haga referencia al servicio web agregando <asp:ServiceReference> un 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 ASP.NET AJAX 2.0 para generar una clase de proxy de JavaScript para llamar al servicio web especificado desde los scripts del lado cliente de 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 los pasan a la llamada al método de servicio web.
Establezca la propiedad de la página web en false en el código fuente del archivo EnableEventValidation 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 la devolución de datos no válida cuando se usan llamadas al método de servicio web.

Agregue el siguiente código debajo de <asp:ScriptManager> la etiqueta 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" />

Crear métodos de servicio web para el servicio web AJAX. Copie y pegue el siguiente código 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;
        }
    }
}

Llame a los métodos del servicio web para el servicio web AJAX desde scripts del lado cliente. Copie y pegue el siguiente código 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 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 error 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 al método de servicio web. Para habilitar la función para diferenciar a los autores de llamadas diferentes, puede pasar la información de contexto del usuario a la función en el parámetro.

Cree el proyecto.

Referencias

ASP.NET Ajax: interactividad mejorada y capacidad de respuesta