Schritte zum Erstellen einer kaskadierenden Dropdownliste mithilfe des Microsoft ASP.NET AJAX-Frameworks

Artikel
03/24/2024

In diesem Artikel wird gezeigt, wie Sie eine kaskadierende Dropdownliste mithilfe des ASP.NET AJAX-Frameworks erstellen.

Ursprüngliche Produktversion: .NET Framework 3.5
Ursprüngliche KB-Nummer: 976156

Einführung

Hinweis

Sie müssen die .NET Framework 3.5 installiert haben, um die ASP.NET AJAX-Features verwenden zu können. Wenn Sie ASP.NET AJAX-Features in .NET Framework 2.0 integrieren möchten, muss ASP.NET 2.0 AJAX Extensions 1.0 installiert sein.

Eine kaskadierende Dropdownliste ist eine Reihe abhängiger DropDownList Steuerelemente, bei denen ein DropDownList Steuerelement von den übergeordneten oder vorherigen DropDownList Steuerelementen abhängt. Die Elemente im DropDownList Steuerelement werden basierend auf einem Element aufgefüllt, das vom Benutzer aus einem anderen DropDownList Steuerelement ausgewählt wird. Wenn sich die Auswahl eines übergeordneten DropDownList Steuerelements ändert, ruft die Webseite den AJAX-Webdienst auf, um die Liste der Werte für das untergeordnete DropDownList Steuerelement abzurufen. Mit dem ASP.NET AJAX-Frameworks können Sie Webdienste (ASMX-Dateien) über den Browser mithilfe von Clientskripts aufrufen. Wenn Sie also den Webdienst im clientseitigen onchange Ereignis des übergeordneten DropDownList Steuerelements aufrufen, wird die Webseite nur teilweise aktualisiert, um die Elemente für das untergeordnete DropDownList Steuerelement aufzufüllen.

Hinweis

Das ASP.NET AJAX Control Toolkit stellt ein CascadingDropDown Steuerelement als ASP.NET AJAX-Extender bereit. Sie können das CascadingDropDown -Steuerelement verwenden, um eine kaskadierende Dropdownliste zu erstellen. In diesem Artikel wird erläutert, wie Sie das Standardsteuerelement DropDownList in ASP.NET zusammen mit dem ASP.NET AJAX-Framework verwenden, um die kaskadierende Dropdownfunktion zu erreichen.

Schritte zum Erstellen einer kaskadierenden Dropdownliste

Erstellen Sie eine ASP.NET-Webdienstanwendung in Visual Studio.

Hinweis

Im bereitgestellten Beispielcode wird der Projektname des C#-Beispielprojekts KB_CascadingDDL_CS. Der Projektname des Visual Basic.NET-Beispielprojekts lautet KB_CascadingDDL_VB.
Fügen Sie dem Projekt ein AJAX-Webformular hinzu.

Hinweis

Im Beispielcode ist der Dateiname des Webformulars Default.aspx. Der Name des AJAX-Webdiensts lautet WebService.
Öffnen Sie die Datei WebServiceName.asmx für den AJAX-Webdienst, und entfernen Sie dann das Kommentarzeichen für die Klassendeklaration wie folgt.

Visual Basic
```
<System.Web.Script.Services.ScriptService()>
Public Class WebService
```
Visual C#
```
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
```
Hinweis

Dieser Schritt ermöglicht den Zugriff auf den AJAX-Webdienst über die clientseitigen Skripts. Auf eine AJAX-Webdienstklasse muss das ScriptServiceAttribute Attribut angewendet werden, und auf die einzelnen Methoden, die von clientseitigen Skripts aufgerufen werden, muss das WebMethodAttribute -Attribut angewendet werden.
Öffnen Sie die WebFormName.aspx Datei des Webformulars, und ändern Sie dann das <Asp:ScriptManager-Tag> wie folgt:
```
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebServiceName.asmx" />
    </Services>
</asp:ScriptManager>
```
Damit ein AJAX-Webdienst aus den clientseitigen Skripts in einem ASP.NET Webformular aufgerufen werden kann, müssen Sie der Webseite zunächst ein ScriptManager -Steuerelement hinzufügen. Verweisen Sie dann auf den Webdienst, indem Sie dem Tag ein untergeordnetes <asp:ServiceReference><asp:ScriptManager> Element hinzufügen. Legen Sie im <asp:ScriptManager> -Tag das Path -Attribut so fest, dass es auf die Webdienstdatei verweist.

Das ServiceReference -Objekt weist ASP.NET 2.0 AJAX-Erweiterungen an, eine JavaScript-Proxyklasse zum Aufrufen des angegebenen Webdiensts aus den clientseitigen Skripts auf der Webseite zu generieren. Die Proxyklasse verfügt über Methoden, die jeder Webdienstmethode im AJAX-Webdienst entsprechen. Die Webseite enthält auch JavaScript-Proxyklassen, die Serverdatentypen entsprechen, die als Eingabeparameter oder Rückgabewerte für die Webdienstmethoden verwendet werden. Mit diesen Proxyklassen können Sie clientseitige Skripts schreiben, die diese Parameter initialisieren und an den Webdienstmethodenaufruf übergeben.
Legen Sie die EnableEventValidation -Eigenschaft der Webseite im Quellcode der WebFormName.aspx-Datei auf false fest, wie im folgenden Beispiel gezeigt.
```
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="KB_CascadingDDL_VB._Default"
 EnableEventValidation="false" %>
```
Hinweis

Dieser Schritt soll ein ungültiges Postback vermeiden, wenn Sie Webdienstmethodenaufrufe verwenden.

Fügen Sie den folgenden Code unter dem <asp:ScriptManager-Tag> hinzu, um die erforderlichen ASP.NET-Steuerelemente zu generieren.

<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" />

Erstellen Sie Webdienstmethoden für den AJAX-Webdienst. Kopieren Sie den folgenden Code, und fügen Sie ihn in die Datei WebServiceName.asmx ein.

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;
        }
    }
}

Rufen Sie die Webdienstmethoden für den AJAX-Webdienst aus clientseitigen Skripts auf. Kopieren Sie den folgenden Code, und fügen Sie ihn unter dem Code ein, den Sie in Schritt 6 hinzugefügt haben.

<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>

Das Aufrufen einer Webdienstmethode aus einem Skript ist asynchron. Um einen Rückgabewert zu erhalten oder zu bestimmen, wann die Anforderung zurückgegeben wurde, müssen Sie eine erfolgreiche Rückruffunktion bereitstellen. Die Rückruffunktion wird aufgerufen, wenn die Anforderung erfolgreich abgeschlossen wurde, und enthält den Rückgabewert des Webdienstmethodenaufrufs. Sie können auch eine fehlerhafte Rückruffunktion bereitstellen, um Fehler zu behandeln. Darüber hinaus können Sie Benutzerkontextinformationen für die Verwendung in den Rückruffunktionen übergeben.

Sie können eine Webdienstmethode in einem AJAX-Webdienst im folgenden Format aufrufen:

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

Sie können eine einzelne erfolgreiche Rückruffunktion bereitstellen, die von mehreren Webdienstmethodenaufrufen aufgerufen wird. Damit die Funktion verschiedene Aufrufer unterscheiden kann, können Sie die Benutzerkontextinformationen im -Parameter an die Funktion übergeben.

Erstellen Sie das Projekt.

References

ASP.NET Ajax: Verbesserte Interaktivität und Reaktionsfähigkeit

Schritte zum Erstellen einer kaskadierenden Dropdownliste mithilfe des Microsoft ASP.NET AJAX-Frameworks

Einführung

Schritte zum Erstellen einer kaskadierenden Dropdownliste

References

Feedback

Feedback

Zusätzliche Ressourcen