ASP.NET - Controle ListBox

ASP.NET - Usando o Controle ListBox

Neste artigo vamos preencher um controle ListBox com dados de uma fonte de dados MSDE no VS.NET e com dados de um banco de dados Access no WebMatrix. Após preencher o controle, será permitido ao usuário selecionar um item da lista e ver os detalhes em caixas de textos.

Em ambos os casos iremos acessar a tabela Products do banco de dados Northwind. A estrutura da tabela é a seguinte :

Você precisa ter o MSDE instalado e fazer a migração do banco de dados Northwind.mdb do Access para o MSDE conforme mostrado nos artigos:

1- O projeto no Visual Studio

Inicie um novo projeto no VS.NET do tipo ASP.NET Web Application com o nome de listboxNet.

Inclua os seguintes controles no formulário a partir da caixa de ferramentas:

1 controle do servidor ListBox - defina sua propriedade AutoPostBack como True (se não a página não vai funcionar...) e como o ID igual a lstProducts
7 controles Labels e 7 Controles do servidor TextBox; nomeando cada caixa de texto com o nome do campo que vamos exibir:
- txtID , txtName, txtQtyPerUnit, txtUnitPrice, txtUnitsInStock, txtUnitsOnOrder e chkDC
Inclua também uma label para mensagens chamada lblmsg.

Abaixo o layout do formulário do projeto no VS.NET.

- Vamos incluir a string de conexão com o MSDE no arquivo de configuração Web.Config conforme indicado abaixo:

<?xml version="1.0" encoding="utf-8" ?>

<configuration>

  <appSettings>

    
<add key="strConn" value="Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=Northwind;User ID=sa;password=;
Data Source=MACORATI\VSDOTNET"; />

  </appSettings>

  <system.web>

  ......

  .....

A seguir defina as importações necessárias ao código do projeto :

Imports System.Web.Security

Imports System.Data

Imports System.Data.OleDb

Imports System.Configuration

Defina a string de conexão que no caso será a de acesso ao MSDE instalado na minha máquina , faça os ajustes para o seu caso:

Dim MyConn As OleDbConnection = New OleDbConnection(ConfigurationSettings.AppSettings("strConn"))

No evento Load da página inclua o código abaixo:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

If Not Page.IsPostBack Then

'carrega o listbox com os dados das categorais

carregaLista()

' define o item padrao selecionado

lstProducts.SelectedIndex = 0

End If

End Sub

A rotina CarregaLista() tem o seguinte código :

Private Sub carregaLista()

Dim strProducts As String = "SELECT ProductID, ProductName FROM Products"

Dim oCmd As New OleDbCommand(strProducts, MyConn)

Dim objReader As OleDbDataReader

Try

'verifica se a conexão ja esta aberta, se não estiver, abre

If MyConn.State = ConnectionState.Closed Then

MyConn.Open()

End If

'atribui o objeto DataReader Obj ao resultado do modo da conexão

'fazendo assim podemos fechar o datareader e a conexao ao mesmo tempo

objReader = oCmd.ExecuteReader(CommandBehavior.CloseConnection)

'limpa os itens anteriores do listbox

lstProducts.Items.Clear()

' define a propriedade DataValueField para chave primaria

lstProducts.DataValueField = "ProductID"

' define DataTextField para o texto/dados que desejamos exibir

lstProducts.DataTextField = "ProductName"

' define o DataSource para o resultado do OleDBDataReader

lstProducts.DataSource = objReader

' vincula o datasoure ao controle do servidor

lstProducts.DataBind()

' fecha o datareader e a conexao

objReader.Close()

Catch ex As Exception

'trata a exceção

MsgBox("Error Connecting to Database!", MsgBoxStyle.Critical)

End Try

End Sub

Quando o usuário selecionar um item da lista o mesmo deverá exibir os detalhes nas caixas de texto , para isto devemos incluir o seguinte código no evento SelectedIndexChanged do ListBox que usa um DataReader para obter os dados e exibir nas caixas de texto:

Private Sub lstProducts_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)_
Handles lstProducts.SelectedIndexChanged

Dim objCmd As OleDbCommand

Dim objReader As OleDbDataReader

Dim strSQL As String

' monta o comando SQL

strSQL = "SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice, UnitsInStock,"

strSQL &= " UnitsOnOrder, ReorderLevel, Discontinued FROM Products"

strSQL &= " WHERE ProductID = "

'retorna o DataValueField

strSQL &= lstProducts.SelectedItem.Value

objCmd = New OleDbCommand(strSQL, MyConn)

Try

'se a conexao estiver fechada abre

If MyConn.State = ConnectionState.Closed Then

MyConn.Open()

End If

objReader = objCmd.ExecuteReader(CommandBehavior.CloseConnection)

' percorre o dataread para retornar os dados e atribui aos textbox

While objReader.Read()

With objReader

txtID.Text = .Item("ProductID")

txtName.Text = .Item("ProductName")

txtQtyPerUnit.Text = .Item("QuantityPerUnit")

txtUnitPrice.Text = .Item("UnitPrice")

txtUnitsInStock.Text = .Item("UnitsInStock")

txtUnitsOnOrder.Text = .Item("UnitsOnOrder")

'txtReOrder.Text = .Item("ReorderLevel")

chkDC.Checked = .Item("Discontinued")

End With

End While

Catch ex As Exception

lblmsg.Text = ex.Message

End Try

End Sub

Executando o projeto no VS.NET teremos o resultado da página abaixo:

2- O projeto no Web Matrix

O projeto no Web Matrix , e , que será exibido on-line, é quase idêntico ao do VS.NET apenas vou exibir somente alguns campos da tabela Products e vou usa o controle HTML do tipo Table para formatar a apresentação dos dados. Além disso , vou usar uma conexão com o banco de dados Northwind.mdb definido em uma string de conexão conforme abaixo :

Dim MyConn As OleDbConnection = New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=d:\teste\northwind.mdb")

Crie um a nova página ASP.NET no Web Matrix e na área de Design inclua além dos controles já usados no projeto acima um controle HTML Table , conforme layout abaixo:

O código usado é semelhante ao do projeto do VS.NET. Abaixo temos o código do script VB.NET completo exibido na guia All:(Não vou exibir o código HTML que é gerado pois seria muito poluido)

<%@ Page Language="VB" %>

<%@ import Namespace="System.Data" %>

<%@ import Namespace="System.Data.OleDb" %>

Dim MyConn As OleDbConnection = New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=d:\teste\northwind.mdb")

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

If Not Page.IsPostBack Then

'carrega o listbox com os dados das categorais

carregaLista()

' define o item padrao selecionado

lstProducts.SelectedIndex = 0

End If

End Sub

Private Sub carregaLista()

Dim strProducts As String = "SELECT ProductID, ProductName FROM Products"

Dim oCmd As New OleDbCommand(strProducts, MyConn)

Dim objReader As OleDbDataReader

Try

'verifica se a conexão ja esta aberta, se não estiver, abre

If MyConn.State = ConnectionState.Closed Then

MyConn.Open()

End If

'atribui o objeto DataReader Obj ao resultado do modo da conexão

'fazendo assim podemos fechar o datareader e a conexao ao mesmo tempo

objReader = oCmd.ExecuteReader(CommandBehavior.CloseConnection)

'limpa os itens anteriores do listbox

lstProducts.Items.Clear()

' define a propriedade DataValueField para chave primaria

lstProducts.DataValueField = "ProductID"

' define DataTextField para o texto/dados que desejamos exibir

lstProducts.DataTextField = "ProductName"

' define o DataSource para o resultado do OleDBDataReader

lstProducts.DataSource = objReader

' vincula o datasoure ao controle do servidor

lstProducts.DataBind()

' fecha o datareader e a conexao

objReader.Close()

Catch ex As Exception

'trata a exceção

MsgBox("Erro durante conexão com a base de dados !", MsgBoxStyle.Critical)

End Try

End Sub

Sub lstProducts_SelectedIndexChanged(sender As Object, e As EventArgs)

Dim objCmd As OleDbCommand

Dim objReader As OleDbDataReader

Dim strSQL As String

' monta o comando SQL

strSQL = "SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice, UnitsInStock,"

strSQL &= " UnitsOnOrder, ReorderLevel, Discontinued FROM Products"

strSQL &= " WHERE ProductID = "

'retorna o DataValueField

strSQL &= lstProducts.SelectedItem.Value

objCmd = New OleDbCommand(strSQL, MyConn)

Try

'se a conexao estiver fechada abre

If MyConn.State = ConnectionState.Closed Then

MyConn.Open()

End If

objReader = objCmd.ExecuteReader(CommandBehavior.CloseConnection)

' percorre o dataread para retornar os dados e atribui aos textbox

While objReader.Read()

With objReader

txtID.Text = .Item("ProductID")

txtName.Text = .Item("ProductName")

'txtQtyPerUnit.Text = .Item("QuantityPerUnit")

txtUnitPrice.Text = .Item("UnitPrice")

txtUnitsInStock.Text = .Item("UnitsInStock")

'txtUnitsOnOrder.Text = .Item("UnitsOnOrder")

'txtReOrder.Text = .Item("ReorderLevel")

'chkDC.Checked = .Item("Discontinued")

End With

End While

Catch ex As Exception

lblmsg.Text = ex.Message

End Try

End Sub

</script>

Executando o projeto no servidor do Web matrix temos:

Pegue o projeto completo aqui : lstboxnet.zip

Veja a página funcionando aqui : http://www.macoratti.net/aspnet/listboxnet.aspx

Eu sei , é apenas ASP , but I like it !!!

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

Quer aprender os conceitos da Programação Orientada a objetos ?

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

Referências:

José Carlos Macoratti