WebControls – Parte I

 

Olá pessoal,

 

Estamos iniciando uma série de três tutoriais sobre um assunto aparentemente simples, porém, de grande utilidade, principalmente para quem programava em ASP, e que está adentrando no mundo ASP.NET. Os WebControls são os principais objetos utilizados em uma aplicação ASP.NET.

 

Existe uma grande dificuldade no desenvolvimento em ASP quanto a utilização dos controles de formulários. Um exemplo, é o uso objeto Select, que para populá-lo é necessário fazer um loop dentro das suas opções. Dependendo da fonte de dados utilizada, por exemplo, um banco de dados, vários processos são executados, e isso de fato, dificulta o carregamento da página, bem como a reutilização do código.

 

Outra grande vantagem do uso de WebControls, é que estes podem gerenciar eventos, o que não acontece em ASP, onde é necessário forçar um Submit da página para toda vez que necessitar de ações.

 

Objetivo: Aprender a popular WebControls de 3 maneiras diferentes e utilizar os controles CheckBoxList, DropDownList eo ListBox.

 

Nesta primeira parte vamos aprender a utilizar 3 WebControls: CheckBoxList, DropDownList e o ListBox, além dos quais já aprendemos a utilizar: TextBox e Button.

 

Primeiramente, adicione um CheckBoxList e instancie-o como ChProdutos. Configure a propriedade AutoPostBack=true, e formate o controle como desejar. Eu fiz desta forma:

 

 

Clique na guia Code, para digitar o código que vai popular o controle ChProdutos.

 

Digite o seguinte código:

 

'Este procedimento cria uma lista de produtos para ser utilizada vários tipos de WebControls

Sub PopularProdutos()

'Criando um Array dinâmico para adicionar os itens

Dim lista as new ArrayList()

'Utilizando o método add para adicionar novos itens

With lista

.add("Monitor")

.add("Mouse")

.add("Teclado")

.add("Gabinete")

.add("Impressora")

.add("Placa de vídeo")

End With

'Vincula a lista de produtos ao objeto ChProdutos

ChProdutos.DataSource=lista

ChProdutos.DataBind()

 

End Sub

 

Explicando o código acima:

 

Dim lista as new Arraylist() – O objeto Arraylist, é um array dinâmico e com várias propriedades de grande utilidade quando se quer trabalhar com coleções de dados. Através do método add se adiciona itens a este objeto.

 

ChProdutos.DataSource =lista – A propriedade DataSource, indica a fonte de dados vinculada ao controle.

 

ChProdutos.DataBind() – Método para popular o controle com a fonte de dados informada no DataSource.

 

Volte para a guia Design e na caixa Properties, selecione no primeiro dropdown o objeto Page:

 

 

Clique no botão Eventos e depois, clique duas vezes sobre a opção Load.

 

 

A opção de visualização de código é acionada.

Digite o seguinte código:

 

Sub Page_Load(sender As Object, e As EventArgs)

‘Populando o controle chProdutos apenas na primeira vez que carregar a página

if Not Page.ISPostBack Then

PopularProdutos()

End if

End Sub

 

Pressione F5 e para acionar o Matrix WebServer, e teste para ver se o controle foi populado como o esperado.

 

 

Volte para o WebMatrix, clique na guia Desing e, abaixo do ChProdutos insira um controle do tipo ListBox, e instancie-o como LstProdutosEscolhidos.

 

 

Vamos popular este controle com os itens selecionados pelo ChProdutos.

 

Os produtos serão adicionados ou removidos a cada ação (Selecionar ou Desmarcar) efetuada no ChProdutos, para isso, selecione o controle ChProdutos, clique no botão Eventos da caixa Properties e clique duas vezes sobre o evento SelectedIndexChanged.

 

 

Digite o seguinte código:

 

Sub chProdutos_SelectedIndexChanged(sender As Object, e As EventArgs)

'Criando uma variável para interagir com os itens da lista

Dim i as integer

'Limpando o ListBox para preencher somente com produtos selecionados

LstProdutosEscolhidos.Items.Clear()

'Efetuando o loop de preenchimento

For i=0 To chProdutos.Items.Count-1

'Verificando se algum item foi selecionado

if chProdutos.Items(i).Selected then

‘Adicionando os itens selecionados

LstProdutosEscolhidos.Items.add(chProdutos.Items(i).Text)

End if

Next

 

End Sub

 

Pressione F5 para testar, e veja que ao selecionar ou desmarcar cada produto, o listbox adiciona ou remove os produtos.

 

 

Para terminarmos, adicione um WebControl do tipo Dropdownlist abaixo do listbox e instancie-o como DropTipoEntrega. Iremos popular este controle através da IDE do WebMatrix. Para isso, selecione o WebControl DropTipoEntrega, e na caixa Properties, escolha a propriedade Items. Clicando no pequeno botão localizado na propriedade Items, é aberto uma nova caixa de diálogo para se inserir os itens:

 

 

Clique no botão Add (ou Adicionar para quem utiliza em português), e preencha a lista como exibido na imagem abaixo:

 

 

 

 

Clique em Ok e teste a aplicação pressionando F5.

 

 

Funcionou e muito bem.

 

Na próxima semana aprenderemos mais sobre os WebControls

 

Para dúvidas, sugestões e algo mais.... lanodecastro@hotmail.com

 

Lano de Castro

“Se não se pode vencer pelo talento, vença pelo esforço”