Uso de CascadingDropDown com um banco de dados (VB)

por Christian Wenz

Baixar PDF

O controle CascadingDropDown no Kit de Ferramentas de Controle AJAX estende um controle DropDownList para que as alterações em um DropDownList carreguem valores associados em outro DropDownList. Para que isso funcione, um serviço Web especial deve ser criado.

Visão geral

O controle CascadingDropDown no Kit de Ferramentas de Controle AJAX estende um controle DropDownList para que as alterações em um DropDownList carreguem valores associados em outro DropDownList. (Por exemplo, uma lista fornece uma lista de estados dos EUA e a próxima lista é preenchida com as principais cidades desse estado.) Para que isso funcione, um serviço Web especial deve ser criado.

Etapas

Em primeiro lugar, uma fonte de dados é necessária. Este exemplo usa o banco de dados AdventureWorks e o microsoft SQL Server 2005 Express Edition. O banco de dados é uma parte opcional de uma instalação do Visual Studio (incluindo a edição expressa) e também está disponível como um download separado em https://go.microsoft.com/fwlink/?LinkId=64064. O banco de dados AdventureWorks faz parte do SQL Server 2005 Samples and Sample Databases (baixe em https://www.microsoft.com/download/details.aspx?id=10679). A maneira mais fácil de configurar o banco de dados é usar o Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e anexar o arquivo de AdventureWorks.mdf banco de dados.

Para este exemplo, pressupomos que a instância do SQL Server 2005 Express Edition é chamada SQLEXPRESS e reside no mesmo computador que o servidor Web; essa também é a configuração padrão. Se a configuração for diferente, você precisará adaptar as informações de conexão para o banco de dados.

Para ativar a funcionalidade de ASP.NET AJAX e o Kit de Ferramentas de Controle, o ScriptManager controle deve ser colocado em qualquer lugar na página (mas dentro do <form> elemento):

<asp:ScriptManager ID="asm" runat="server" />

Na próxima etapa, dois controles DropDownList são necessários. Neste exemplo, usamos as informações de fornecedor e contato da AdventureWorks, portanto, criamos uma lista para os fornecedores disponíveis e outra para os contatos disponíveis:

<div>
 Vendor: <asp:DropDownList ID="VendorsList" runat="server"/><br />
 Contacts: <asp:DropDownList ID="ContactsList" runat="server"/><br />
</div>

Em seguida, dois extensores CascadingDropDown devem ser adicionados à página. Um preenche a primeira lista (fornecedores) e o outro preenche a segunda lista (contatos). Os seguintes atributos devem ser definidos:

• ServicePath: URL de um serviço Web que fornece as entradas de lista
• ServiceMethod: método Web que fornece as entradas de lista
• TargetControlID: ID da lista suspensa
• Category: informações de categoria enviadas ao método Web quando chamado
• PromptText: texto exibido ao carregar dados de lista de forma assíncrona do servidor
• ParentControlID: (opcional) lista suspensa pai que dispara o carregamento da lista atual

Dependendo da linguagem de programação usada, o nome do serviço Web em questão é alterado, mas todos os outros valores de atributo são os mesmos. Aqui está o elemento CascadingDropDown para a primeira lista suspensa:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor"
 PromptText="Select Vendor" />

Os extensores de controle da segunda lista precisam definir o ParentControlID atributo para que a seleção de uma entrada na lista de fornecedores dispare o carregamento de elementos associados na lista de contatos.

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetContactsForVendor"
 TargetControlID="ContactsList" ParentControlID="VendorsList"
 Category="Contact"
 PromptText="Select Contact" />

Em seguida, o trabalho real é feito no serviço Web, que é configurado da seguinte maneira. Observe que o [ScriptService] atributo é usado, caso contrário, ASP.NET AJAX não pode criar o proxy JavaScript para acessar os métodos web do código de script do lado do cliente.

<%@ WebService Language="VB" Class="CascadingDropdown1" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.Data.SqlClient
<ScriptService()> _
Public Class CascadingDropdown1
 Inherits System.Web.Services.WebService
 ' ...
End Class

A assinatura dos métodos web chamados por CascadingDropDown é a seguinte:

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

Portanto, o valor retornado deve ser uma matriz do tipo CascadingDropDownNameValue que é definida pelo Kit de Ferramentas de Controle. O GetVendors() método é muito fácil de implementar: o código se conecta ao banco de dados AdventureWorks e consulta os primeiros 25 fornecedores. O primeiro parâmetro no CascadingDropDownNameValue construtor é o legenda da entrada de lista, o segundo seu valor (atributo de valor no elemento HTMLoption<>). Eis o código:

<WebMethod()> _
Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand( _
 "SELECT TOP 25 VendorID, Name FROM Purchasing.Vendor", conn)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("Name").ToString(),dr("VendorID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Obter os contatos associados para um fornecedor (nome do método: GetContactsForVendor()) é um pouco mais complicado. Em primeiro lugar, o fornecedor que foi selecionado na primeira lista suspensa deve ser determinado. O Kit de Ferramentas de Controle define um método auxiliar para essa tarefa: o ParseKnownCategoryValuesString() método retorna um StringDictionary elemento com os dados suspensos:

<WebMethod()> _
Public Function GetContactsForVendor(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim VendorID As Integer
 CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)

Por motivos de segurança, esses dados devem ser validados primeiro. Portanto, se houver uma entrada Vendor (porque a Category propriedade do primeiro elemento CascadingDropDown está definida como "Vendor"), a ID do fornecedor selecionado poderá ser recuperada:

If Not kv.ContainsKey("Vendor") Or Not Int32.TryParse(kv("Vendor"),VendorID) Then
 Throw New ArgumentException("Couldn't find vendor.")
 End If

O restante do método é bastante direto, então. A ID do fornecedor é usada como um parâmetro para uma consulta SQL que recupera todos os contatos associados para esse fornecedor. Mais uma vez, o método retorna uma matriz do tipo CascadingDropDownNameValue.

Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand("SELECT Person.Contact.ContactID, FirstName, LastName FROM Person.Contact,Purchasing.VendorContact WHERE VendorID=@VendorID AND Person.Contact.ContactID=Purchasing.VendorContact.ContactID",conn)
 comm.Parameters.AddWithValue("@VendorID", VendorID)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("FirstName").ToString() & " " & dr("LastName").ToString(),dr("ContactID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Carregue o ASP.NET página e, após um curto período, a lista de fornecedores é preenchida com 25 entradas. Escolha uma entrada e observe como a segunda lista suspensa é preenchida com dados.

A primeira lista é preenchida automaticamente (Clique para exibir a imagem em tamanho real)

A segunda lista é preenchida de acordo com a seleção na primeira lista (Clique para exibir a imagem em tamanho real)