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

2024-12-14

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

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

Введение

Примечание.

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

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

Примечание.

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

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

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

Примечание.

В приведенном примере кода имя проекта примера C# KB_CascadingDDL_CS. Имя проекта примера Visual Basic для .NET 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

Введение

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

Ссылки

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

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