Utilização do CascadingDropDown com uma Base de Dados (VB)

por Christian Wenz

Descarregar PDF

O controlo CascadingDropDown no AJAX Control Toolkit estende um controlo DropDownList para que as alterações num DropDownList carreguem valores associados noutro DropDownList. Para que isto funcione, deve ser criado um serviço web especial.

Descrição geral

O controlo CascadingDropDown no AJAX Control Toolkit estende um controlo DropDownList para que as alterações num DropDownList carreguem valores associados noutro DropDownList. (Por exemplo, uma lista fornece uma lista dos estados dos EUA, e a próxima lista é então preenchida com as principais cidades desse estado.) Para que isto funcione, deve ser criado um serviço web especial.

Passos

Antes de mais, é necessária uma fonte de dados. Este exemplo utiliza a base de dados AdventureWorks e a Microsoft SQL Server 2005 Express Edition. A base de dados é uma parte opcional de uma instalação do Visual Studio (incluindo a edição express) e também está disponível como download separado em https://go.microsoft.com/fwlink/?LinkId=64064. A base de dados AdventureWorks faz parte dos SQL Server 2005 Samples e Sample Databases (download em https://www.microsoft.com/download/details.aspx?id=10679). A forma mais fácil de configurar a base de dados é usar o Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e anexar o AdventureWorks.mdf ficheiro da base de dados.

Para este exemplo, assumimos que a instância do SQL Server 2005 Express Edition é chamada SQLEXPRESS e reside na mesma máquina que o servidor web; esta é também a configuração padrão. Se a tua configuração for diferente, tens de adaptar a informação de ligação para a base de dados.

Para ativar a funcionalidade do ASP.NET AJAX e do Control Toolkit, o controlo ScriptManager deve ser colocado em qualquer lugar da página (mas dentro do <form> elemento):

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

No passo seguinte, são necessários dois controlos DropDownList. Neste exemplo, usamos o fornecedor e as informações de contacto da AdventureWorks, criando assim uma lista para os fornecedores disponíveis e outra para os contactos disponíveis:

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

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

• ServicePath: URL de um serviço web que entrega as entradas da lista
• ServiceMethod: Método web que fornece as entradas da lista
• TargetControlID: ID da lista suspensa
• Category: Informação de categoria que é submetida ao método web quando chamada
• PromptText: Texto exibido ao carregar assíncronamente dados da lista do servidor
• ParentControlID: (opcional) lista suspensa principal que desencadeia o carregamento da lista atual

Dependendo da linguagem de programação utilizada, o nome do serviço web em questão muda, mas todos os outros valores de atributos 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 controlo para a segunda lista precisam de definir o ParentControlID atributo de modo a que selecionar uma entrada na lista de fornecedores desencadeie o carregamento dos elementos associados na lista de contactos.

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

O trabalho propriamente dito é então realizado no serviço web, que está configurado da seguinte forma. Note que o atributo [ScriptService] é utilizado, caso contrário o ASP.NET AJAX não pode criar o proxy JavaScript para aceder aos métodos web a partir 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 pelo CascadingDropDown é a seguinte:

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

Portanto, o valor de retorno deve ser um array de tipo CascadingDropDownNameValue definido pelo Control Toolkit. O GetVendors() método é bastante fácil de implementar: o código liga-se à base de dados AdventureWorks e consulta os primeiros 25 fornecedores. O primeiro parâmetro no CascadingDropDownNameValue construtor é a legenda da entrada da lista, o segundo o seu valor (atributo valor no elemento HTML<option>). Apresentamos o código a seguir:

<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 contactos associados a um fornecedor (nome do método: GetContactsForVendor()) é um pouco mais complicado. Em primeiro lugar, é necessário determinar qual fornecedor foi selecionado na primeira lista suspensa. O Control Toolkit define um método auxiliar para essa tarefa: O ParseKnownCategoryValuesString() método devolve um StringDictionary elemento com os dados do menu suspenso:

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

Por razões de segurança, estes dados devem ser validados primeiro. Assim, se existir uma entrada Vendor (porque a Category propriedade do primeiro elemento CascadingDropDown está definida como "Vendor"), o ID do fornecedor selecionado pode ser recuperado:

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

O resto do método é, portanto, bastante simples. O ID do fornecedor é usado como parâmetro para uma consulta SQL que recupera todos os contactos associados a esse fornecedor. Mais uma vez, o método devolve um array de 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

Carrega a página ASP.NET e, passado pouco tempo, a lista de fornecedores é preenchida com 25 entradas. Escolha uma entrada e repare como a segunda lista suspensa é preenchida com dados.

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

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