Действия по созданию каскадного раскрывающегося списка с помощью платформы Microsoft ASP.NET AJAX

Статья
03/24/2024

В этой статье показано, как создать каскадный раскрывающийся список с помощью платформы ASP.NET AJAX.

Исходная версия продукта: платформа .NET Framework 3.5
Исходный номер базы знаний: 976156

Введение

Примечание.

Для использования функций AJAX ASP.NET необходимо установить платформа .NET Framework 3.5. Если вы хотите включить ASP.NET функций AJAX в платформа .NET Framework 2.0, необходимо установить расширения AJAX версии 1.0 ASP.NET 2.0.

Каскадный раскрывающийся список — это ряд зависимых DropDownList элементов управления, в которых один элемент DropDownList управления зависит от родительского или предыдущего DropDownList элемента управления. Элементы в элементе DropDownList управления заполняются на основе элемента, выбранного пользователем из другого DropDownList элемента управления. При изменении выбора родительского DropDownList элемента управления веб-страница вызывает веб-службу AJAX для получения списка значений для дочернего DropDownList элемента управления. Платформа ASP.NET AJAX позволяет вызывать веб-службы (ASMX-файлы) из браузера с помощью клиентских сценариев. Поэтому при вызове веб-службы в клиентском событии родительского DropDownList элемента управления веб-страница onchange будет обновлена только частично, чтобы заполнить элементы дочернего DropDownList элемента управления.

Примечание.

Набор средств управления ASP.NET AJAX предоставляет CascadingDropDown элемент управления в виде расширителя AJAX ASP.NET. Элемент управления можно использовать CascadingDropDown для создания каскадного раскрывающегося списка. В этой статье описывается использование стандартного DropDownList элемента управления в ASP.NET вместе с платформой AJAX ASP.NET для реализации каскадной раскрывающейся функции.

Действия по созданию каскадного раскрывающегося списка

Создание приложения веб-службы ASP.NET в Visual Studio.

Примечание.

В приведенном примере кода имя проекта примера проекта C# KB_CascadingDDL_CS. Имя проекта примера проекта .NET для Visual Basic — KB_CascadingDDL_VB.
Добавьте в проект веб-форму AJAX.

Примечание.

В примере кода имя файла веб-формы Default.aspx. Имя веб-службы AJAX — WebService.
Откройте файл WebServiceName.asmx для веб-службы AJAX, а затем удалите метку комментария для объявления класса, как показано ниже.

Visual Basic
```
<System.Web.Script.Services.ScriptService()>
Public Class WebService
```
Visual C#
```
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
```
Примечание.

Этот шаг позволяет получить доступ к веб-службе AJAX из клиентских сценариев. К классу веб-службы AJAX должен ScriptServiceAttribute применяться атрибут , а к отдельным методам, которые будут вызываться из клиентских скриптов, должен применяться WebMethodAttribute атрибут .
Откройте файл WebFormName.aspx веб-формы, а затем измените <тег asp:ScriptManager> следующим образом:
```
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebServiceName.asmx" />
    </Services>
</asp:ScriptManager>
```
Чтобы включить вызов веб-службы AJAX из клиентских сценариев в веб-форме ASP.NET, необходимо сначала добавить ScriptManager элемент управления на веб-страницу. Затем создайте ссылку на веб-службу, добавив дочерний <asp:ServiceReference> элемент в <asp:ScriptManager> тег. В теге <asp:ScriptManager> задайте Path атрибут, указывающий на файл веб-службы.

Объект ServiceReference указывает ASP.NET расширениям AJAX версии 2.0 создать класс прокси JavaScript для вызова указанной веб-службы из клиентских скриптов на веб-странице. Класс прокси имеет методы, соответствующие каждому методу веб-службы в веб-службе AJAX. Веб-страница также содержит классы прокси JavaScript, соответствующие типам данных сервера, которые используются в качестве входных параметров или возвращаемых значений для методов веб-службы. Эти прокси-классы позволяют создавать клиентские скрипты, которые инициализируют эти параметры и передают их в вызов метода веб-службы.
Задайте свойству EnableEventValidation веб-страницы значение false в исходном коде файла WebFormName.aspx , как показано в следующем примере.
```
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="KB_CascadingDDL_VB._Default"
 EnableEventValidation="false" %>
```
Примечание.

Этот шаг позволяет избежать недопустимой обратной передачи при использовании вызовов методов веб-службы.

Добавьте следующий код в <тег asp:ScriptManager> , чтобы создать необходимые элементы управления ASP.NET.

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

Создание методов веб-службы для веб-службы AJAX. Скопируйте и вставьте следующий код в файл 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;
        }
    }
}

Вызовите методы веб-службы для веб-службы AJAX из клиентских сценариев. Скопируйте и вставьте следующий код в код, добавленный на шаге 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>

Вызов метода веб-службы из скрипта является асинхронным. Чтобы получить возвращаемое значение или определить, когда возвращается запрос, необходимо указать функцию успешного обратного вызова. Функция обратного вызова вызывается после успешного завершения запроса и содержит возвращаемое значение из вызова метода веб-службы. Для обработки ошибок можно также предоставить функцию обратного вызова сбоем. Кроме того, можно передать сведения о контексте пользователя для использования в функциях обратного вызова.

Метод веб-службы в веб-службе AJAX можно вызвать в следующем формате:

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

Можно предоставить одну успешно выполненную функцию обратного вызова, которая вызывается из нескольких вызовов методов веб-службы. Чтобы функция могла различать разные вызывающие стороны, можно передать в функцию в параметре сведения о контексте пользователя.

Выполните построение проекта.

Ссылки

ASP.NET Ajax: улучшенная интерактивность и скорость реагирования

Действия по созданию каскадного раскрывающегося списка с помощью платформы Microsoft ASP.NET AJAX

Введение

Действия по созданию каскадного раскрывающегося списка

Ссылки

Обратная связь

Обратная связь

Дополнительные ресурсы