Etapas para criar uma lista suspensa em cascata usando a estrutura do Microsoft ASP.NET AJAX

Este artigo mostra como criar uma lista suspensa em cascata usando a estrutura ASP.NET AJAX.

Versão original do produto: .NET Framework 3.5
Número de KB original: 976156

Introdução

Uma lista suspensa em cascata é uma série de controles dependentes DropDownList nos quais um controle depende dos DropDownList controles pai ou anterior DropDownList . Os itens no DropDownList controle são preenchidos com base em um item selecionado pelo usuário de outro DropDownList controle. Quando a seleção de um controle pai DropDownList é alterada, a página da Web chama o serviço Web AJAX para recuperar a lista de valores para o controle filho DropDownList . A estrutura ASP.NET AJAX permite que você chame serviços Web (arquivos.asmx) do navegador usando scripts de cliente. Portanto, quando você chamar o serviço Web no evento do lado onchange do cliente do controle pai DropDownList , a página da Web será apenas parcialmente atualizada para preencher os itens para o controle filho DropDownList .

Etapas para criar uma lista suspensa em cascata

1. Crie um aplicativo ASP.NET Serviço Web no Visual Studio.

   Observação

   No código de exemplo fornecido, o nome do projeto do projeto de exemplo C# é KB_CascadingDDL_CS. O nome do projeto do projeto de exemplo do .NET do Visual Basic é KB_CascadingDDL_VB.

2. Adicione um Formulário Web AJAX ao projeto.

   Observação

   No código de exemplo, o nome do arquivo do formulário Web é Default.aspx. O nome do serviço Web do AJAX é WebService.

3. Abra o arquivo WebServiceName.asmx para o serviço Web AJAX e remova a marca de comentário da declaração de classe da seguinte maneira.

   Visual Basic

   <System.Web.Script.Services.ScriptService()>
   Public Class WebService
   

   Visual C#

   [System.Web.Script.Services.ScriptService]
   public class WebService : System.Web.Services.WebService
   

   Observação

   Essa etapa permite que o serviço Web do AJAX seja acessado nos scripts do lado do cliente. Uma classe de serviço Web AJAX deve ter o ScriptServiceAttribute atributo aplicado e os métodos individuais que serão chamados de scripts do lado do cliente devem ter o WebMethodAttribute atributo aplicado.

4. Abra o arquivo WebFormName.aspx do formulário Web e altere a <marca asp:ScriptManager> da seguinte maneira:

   <asp:ScriptManager ID="ScriptManager1" runat="server">
       <Services>
           <asp:ServiceReference Path="~/WebServiceName.asmx" />
       </Services>
   </asp:ScriptManager>
   

   Para permitir que um serviço Web AJAX seja chamado dos scripts do lado do cliente em um formulário Web ASP.NET, primeiro você deve adicionar um ScriptManager controle à página da Web. Em seguida, referencie o serviço Web adicionando um <asp:ServiceReference> elemento filho à <asp:ScriptManager> marca. <asp:ScriptManager> Na marca, defina o Path atributo para apontar para o arquivo de serviço Web.

   O ServiceReference objeto instrui ASP.NET extensões do AJAX 2.0 para gerar uma classe proxy JavaScript para chamar o serviço Web especificado dos scripts do lado do cliente na página da Web. A classe proxy tem métodos que correspondem a cada método do Serviço Web no serviço Web do AJAX. A página da Web também contém classes proxy JavaScript que correspondem a tipos de dados de servidor que são usados como parâmetros de entrada ou valores retornados para os métodos do Serviço Web. Essas classes proxy permitem que você escreva scripts do lado do cliente que inicializam esses parâmetros e os passem para a chamada de método do Serviço Web.

5. Defina a EnableEventValidation propriedade da página da Web como false no código-fonte do arquivo WebFormName.aspx , conforme mostrado no exemplo a seguir.

   <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="KB_CascadingDDL_VB._Default"
    EnableEventValidation="false" %>
   

   Observação

   Esta etapa é evitar o post-back inválido ao usar chamadas de método do Serviço Web.

6. Adicione o código a <seguir na marca asp:ScriptManager> para gerar os controles ASP.NET necessários.

   <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. Crie métodos do Serviço Web para o serviço Web do AJAX. Copie e cole o código a seguir no arquivo 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. Chame os métodos do Serviço Web para o serviço Web do AJAX a partir de scripts do lado do cliente. Copie e cole o código a seguir no código que você adicionou na etapa 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>
   

   Chamar um método de serviço Web de um script é assíncrono. Para obter um valor retornado ou determinar quando a solicitação foi retornada, você deve fornecer uma função de retorno de chamada bem-sucedida. A função de retorno de chamada é invocada quando a solicitação é concluída com êxito e contém o valor retornado da chamada Método do Serviço Web. Você também pode fornecer uma função de retorno de chamada com falha para lidar com erros. Além disso, você pode passar informações de contexto do usuário para usar nas funções de retorno de chamada.

   Você pode chamar um método do Serviço Web em um serviço Web do AJAX no seguinte formato:

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

   Você pode fornecer uma única função de retorno de chamada bem-sucedida que é invocada de várias chamadas de método de serviço Web. Para habilitar a função para diferenciar diferentes chamadores, você pode passar as informações de contexto do usuário para a função no parâmetro.

9. Compile o projeto.

Referências

ASP.NET Ajax : Interatividade aprimorada e capacidade de resposta