Observa-se na Figura 2 que a tabela criada possui o seguinte relacionamento:

Agora, serão inseridos alguns registros no banco recém criado, com objetivo futuro de testes. Segue script abaixo:

Após a criação do banco, incia-se o desenvolvimento da aplicação. Utilizando o Visual Studio 2008, crie um novo projeto denominado Mercado, em seguida adicione quatro DropDownList e quatro Label no formulário do projeto (Figura 3), renomeie-os  para “ddlFabricante”, “ddlModelo”, “ddlAno”, “ddlVersao”, conseqüentemente. Posicione-os em tela para ficar esteticamente viável (observe a Figura 4). Compile o projeto e confirme a opção Add a new Web.config.

Figura 3 – Toolbox do Visual Studio 2005

Figura 4 – Página em construção

É claro que, como a aplicação está utilizando uma extensão do Ajax, deve-se ter na nossa aplicação, mais especificamente na pasta Bin, as ddls do AjaxControlToolKit, caso você não possua, clique aqui (http://ajaxcontroltoolkit.codeplex.com/releases/view/43475) para baixar.

Agora, deve-se entender o seguinte, é claro que, pode-se popular estes dropDowns sem utilizar o CascadingDropDown, porém o foco deste artigo é ver as vantagens que este webControl proporciona.

Toda a lógica sobre como preencher os DropDownList através de buscas no banco, ficará armazenada em um WebService. O WebService de exemplo usado neste exemplo, lê os dados a partir de uma ‘select’ SQL simples e exibe-os nos combos em questão.

Deve-se então, criar este WebService, para isso, vá até a Solution Explorer do Visual Studio, em seguida clique com o botão direito sobre o diretório do projeto, escolha Add New Item (Figura 5). Nesta nova janela, selecione o item Web Service e renomeie-o para wsVeiculo.asmx, em seguida clique em Add ( veja na Figura 6).

Deve-se observar que, para trabalhar com CascadingDropDown, o WebService precisa estar localizado no mesmo site que a página criada, devido a segurança contra Cross-Site Scripting existente no browser, que impedirá um script de fazer a chamada para um webService em outro domínio.

Após adicionar o WebService no projeto, vá ao Solution Explorer, em seguida acesse App_Code -> wsVeiculo.cs. Nesta classe serão configurados os métodos que irão realizar as consultas que forem necessárias à base de dados.

Dentro do wsVeiculo.cs, apague o método HelloWorld, pois este é apenas demonstrativo.em seguida, deve-se adicionar a seguinte linha antes de publicicar a classe, pois esta, tem o objetivo de indicar que o WebService poderá ser invocado a partir de um script.

[ScriptService]

Póximo passo é instanciar uma string onde indicará qual conexão de banco de dados será utilizada, porém, para isso, deve-se informar para aplicação, qual servidor deseja acessar, bem como a base de dados desejada, portanto, acesse o web.config que foi criado, e configure sua connectionstring da seguinte maneira.

Agora volte ao WebService, e instancie uma string, com o nome conString, que irá através do ConfigurationManager, receber a string de conexão informada no web.config.

string conString = ConfigurationManager.ConnectionStrings["mercadoCS"].ToString();

Importe a classe Configuration:

using System.Configuration;

Próximo passo será criar o método que será utilizado para retornar os fabricantes para o DropDownList ddlFabricante.

    }

Este WebService criado, recebe 2 parâmetros string e retorna um parâmetro de tipo especial. É valido frisar que, AtlasControlToolkit.CascadingDropDownNameValue, é um array deste tipo . O parâmetro Category contém a informação que está sendo requisitada. Cada combo recebe um nome, uma identificação para a informação que ela representa. Pode-se utilizar somente este método para retornar para todos droDowns que for desejado, porém, será apresentado com métodos independentes para melhor entendimento.

Para verificar se este método está funcionando corretamente em conjunto à aplicação, basta voltar para pagina Default.aspx. Trabalhando em modo Source, adicione o código abaixo antes de começar a tag HTML, pois este irá “informar” para o AjaxControlToolKit que esta página irá utilizá-lo.

Em seguida será adicionado o ScriptManager na página, pois este é necessário quando se trabalha com Ajax, observe na Figura 7.

Neste momento, será configurado o webControl cascadingdropdown, adicione o seguinte código na aplicação:

<cc1:CascadingDropDown ID="cddFabricante" runat="server" Category="IdFabricante" TargetControlID="ddlFabricante" PromptText="Selecione um Fabricante" LoadingText="carregando fabricantes…" ServicePath="wsVeiculo.asmx"                ServiceMethod="GetDropDownFabricante"></cc1:CascadingDropDown>

Deve-se entender que, o CascadingDropDown aparece como um webControl não visual e atua como um extender. Renomei o ID para cddFabricante, veja abaixo suas propriedades:

Após configurar o CascadingDropDown, compile e veja se o ddlFabricante exibiu os fabricantes cadastrados, repare na Figura 8.

Sendo exibido corretamente todos fabricantes, agora será criado o WebService do Modelo, Ano e Verão, segue abaixo, o código exemplo do método do Modelo:

Observando este método, percebem-se poucas diferenças para o GetDropDownFabricante, veja o código abaixo :

    categoryID = Convert.ToInt32(categoryValues["IdFabricante"]);

O categoryID vai receber o valor identificador do DropDownList (no nosso caso ddlFabricante), percebam que, em categoryValues["IdFabricante"], o identificador entre as aspas é exatamente o mesmo que está na tabela tbFabricante.

Será feita uma busca na tabela do modelo de acordo com o fabricante que foi selecionado, observe :

    sqlSelect.Parameters.Add("IdFabricante", SqlDbType.Int).Value = categoryID;

Deve-se entender que , o retorno productId, neste método, é o identificador do modelo, vejam:

    string productID = dRow["IdModelo"].ToString();

Segue abaixo os metodos do Ano e Versão, respectivamente:

Agora que foram criados os métodos, será ativado os CascadingDropDown para o drops ddlModelo, ddlAno e ddlVersao.

Observe que, a única propriedade diferente neste cddModelo, é a ParentControlID, que refere ao DropDownList “pai”, neste caso é o ddlFabricante.

Modelo :

Ano:

Versão:

Como o estudo realizado, percebe-se que, utilizando o CascadingDropDown para realizar este tipo de filtragem, facilita a implementação do código, e gera agilidade no carregamento de informações, devido essas consultas serem feitas através de WebServices.