Conheça o Júlio Battisti

Julio Battisti - Autor de mais de 25 livros de informática Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.

SAIBA MAIS...

Loja Virtual do Site

Curta Nossa Fanpage

« Lição anterior

Δ Página principal

¤ Capítulos

Próxima lição »

ASP.NET - CURSO COMPLETO
Autor: Júlio Battisti

Lição 094 - Capítulo 11 - Um "tal de" Data Binding

Data Binding é, sem dúvidas, uma das características de ASP.NET que mais poupam tempo do programador. Tarefas que exigiam dezenas de linhas de código com as versões anteriores de ASP, agora podem ser feitas configurando-se umas poucas propriedades dos Data-bound controls.

Importante: Os controles que utilizaremos neste capítulo, fazem parte dos chamados Web Server Controls. Na prática isso significa que estes controles são processados no servidor e não no Cliente. Esta é uma grande vantagem, pois as operações de Data Binding irão funcionar corretamente, independente do navegador que estiver sendo utilizado. Antes do Framework .NET, utilizávamos algumas técnicas de Data Binding no cliente. O problema desta abordagem é que estas técnicas são dependentes do navegador que está sendo utilizado. Por exemplo, algumas técnicas de Data Binding utilizando DHTML que funcionam no Internet Explorer podem não funcionar (e provavelmente não funcionarão) n Netscape e vice-versa.

Com o ASP.NET, o processamento e as funções de Data Binding, são executadas no Servidor. O resultado que retorna é HTML compatível com qualquer navegador, o que elimina a limitação das técnicas de Data Binding no lado cliente.

Com a manutenção de estado automática e as operações de PostBack e round-trip (descritas anteriormente), o funcionamento da página é transparente para o usuário, ou seja, do ponto de vista de quem está utilizando a página pouca importância tem onde está ocorrendo o processamento; desde que o desempenho seja satisfatório e o acesso possa ser feito de qualquer navegador disponível. Para que tudo isso seja possível, as novas características do Framework .NET, como PostBack e round-trip de páginas são fundamentais.

Antes de explicarmos em detalhe a sintaxe para Data Binding, vamos ver um exemplo prático onde fazemos uma comparação entre a maneira de construir um controle do tipo Lista de Opções com ASP 3.0, onde as opções são criadas, automaticamente, a partir de um banco de dados; e a maneira de construir a mesma lista, utilizando Data Binding com ASP.NET.

A maneira antiga: Criando uma lista dinâmica com ASP 3.0.

Neste exemplo construiremos uma lista com os nomes de todos os países para os quais existem Pedidos. A lista será construída a partir da tabela Pedidos do banco de dados C:\Meus documentos\NorthWind.mdb.

Na Listagem 11.1 temos o código para o exemplo proposto.

Listagem 11.1 – Uma lista dinâmica com ASP 3.0 – Chap11ex1.asp.

<%@ Language=VBScript %>

<HTML>

<HEAD>

<TITLE>Lista dinâmica de  Países.</TITLE>

</HEAD>

<BODY>

<%

'O  Primeiro passo é criar a conexão com o Banco de dados.

'Para  isto crio um objeto do tipo Connection.

'Cria  um Objeto do Tipo ADODB.Connection

 Set  conn=Server.CreateObject("ADODB.Connection")

'Agora  abro uma conexão com o arquivo nwind.mdb

'utilizando  OLE DB.

'O  próximo comando deve estar todo em uma única linha.

conn.ConnectionString  = "PROVIDER=MICROSOFT.JET.OLEDB.4.0;DATA SOURCE=c:\Meus documentos\NorthWind.mdb"

conn.Open

'Agora  criamos um Objeto RecordSet.

'Este  Objeto irá acessar o campo PaísDeDestino

'da  tabela Pedidos.

Set Paises =  Server.CreateObject("ADODB.Recordset")

'O  próximo comando deve estar todo em uma única linha.

Paises.Open "Select PaísDeDestino from Pedidos Group By PaísDeDestino Order By PaísDeDestino", conn, 3, 3

'Neste  ponto tenho o objeto Paises ligado com a tabela

'Pedidos  do banco de dados NorthWind.mdb

%>

<P><B>Paises  para o quais existem pedidos!!!</B></P>

<FORM action=Chap11ex1.asp method=post>

<SELECT id=listapaises name=listpaises>

<%

'Agora  construo a lista de opções a partir dos

'dados  obtidos da tabela Pedidos.

'Para  cada produto obtido, crio uma nova opção

'na lista.

Do While Not Paises.EOF

        'O próximo comando deve estar todo em uma  única linha.

Response.Write "<OPTION value=" & Chr(34) &  Paises.Fields("PaísDeDestino") &

Chr(34) & ">" &  Paises.Fields("PaísDeDestino")& "</OPTION>"

   Paises.MoveNext

Loop

%>

</SELECT>

<BR>

<BR>

<HR>

<INPUT type="submit"  value="Paises" id=Localizar name=Localizar>

</FORM>

</BODY>

</HTML>

Digite o código da Listagem 11.1 e salve o mesmo em um arquivo chamado chap11ex1.asp, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6. É importante que a extensão seja .asp e não .aspx, pois trata-se de uma página com código ASP 3.0 e não ASP.NET.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex1.asp

Ao carregar a página você obtém o resultado indicado na Figura 11.1.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.1 Uma lista dinâmica com ASP 3.0.

Além da conexão, criamos um laço Do While para percorrer todos os registros do RecordSet e construir uma opção da lista para cada registro. Com ASP 3.0 não temos muitas alternativas. Agora vamos demonstrar como a utilização de Data Binding torna as coisas bem mais fáceis.

A evolução: Data Binding com ASP.NET.

Neste exemplo construiremos uma lista com os nomes de todos os países para os quais existem Pedidos. A lista será construída utilizando um Web Server Control do tipo DropDownList. Para ligar a fonte de dados com o controle, simplesmente faremos uso do método DataBind do controle.

Na Listagem 11.2 temos o código para o exemplo proposto.

Listagem 11.2 – Uma lista dinâmica com ASP NET – Chap11ex2.aspx.

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

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

<html>

<script language="C#"  runat="server">

    protected void Page_Load(Object Src, EventArgs E )

      // Crio uma conexão com o banco de dados  do Microsoft Access.

      // C:\Meus documentos\NorthWind.mdb.

      String DefineConexão=  "PROVIDER=MICROSOFT.JET.OLEDB.4.0;" +

                                       "DATA SOURCE=c:\\meus documentos\\NorthWind.mdb";

      OleDbConnection  MinhaConexão = new OleDbConnection(DefineConexão);

            // Utilizamos um objeto  DataAdapter para executar um comando SQL,

            // o qual retorna todos os dados da  tabela "Clientes".

      OleDbDataAdapter MeuComando = new OleDbDataAdapter("SELECT  PaísDeDestino" +

      " FROM Pedidos Group By  PaísDeDestino Order By PaísDeDestino", MinhaConexão);

            // Criamos e preenchemos um objeto  DataSet.

            // Observe que não temos mais o  objeto Recordset,

            // como era de praxe com o ASP 3.0.

       DataSet ds = new DataSet();

            // Utilizo o método Fill do  objeto DataAdapter, para preencher

            // o objeto DataSet, com os dados  retornados pelo comando SQL.

            MeuComando.Fill(ds);

            // Conectamos um controle  DropDownList com o DataSet criado anteriormente.

            // MinhaLista é o id (nome) de um  controle do tipo

            // DropDownList que está na seção de  apresentação da página.

      DataView source = new  DataView(ds.Tables[0]);

       // Ligo o objeto DataView a um controle  do tipo

      // DropDownList – MinhaLista.

       MinhaLista.DataSource = source ;

      MinhaLista.DataBind();

</script>

<body>

   <h3><font  face="Verdana">Lista Dinâmica com  ASP.NET!!!</font></h3>

<form runat=server>

             <asp:DropDownList

                        id="MinhaLista"

                         runat="server"

                         DataTextField="PaísDeDestino"

                </asp:DropDownList>

                <BR>

                <BR>

</form>

</body>

</html>

Digite o código da Listagem 11.2 e salve o mesmo em um arquivo chamado chap11ex2.aspx, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex2.aspx

Ao carregar a página você obtém o resultado indicado na Figura 11.2.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.2 Uma lista dinâmica com ASP.NET.

Observe a simplicidade para criar a lista. Na seção de código definimos a propriedade DataSource do controle MinhaLista, que é um controle do tipo DropDownList. Depois chamamos o método DataBind deste controle:

    MinhaLista.DataSource = source ;

     MinhaLista.DataBind();

Na seção de apresentação basta criar o controle MinhaLista e definir a sua propriedade DataTextField como sendo igual ao nome do campo a ser exibido na lista:

<asp:DropDownList

                                    id="MinhaLista"

                        runat="server"

                                    DataTextField="PaísDeDestino"

           </asp:DropDownList>

Rápido, simples, intuitivo e sem a necessidade de criar um laço para percorrer todos os registros do DataView. Este pequeno exemplo ilustra o quanto pode ser melhorada a produtividade do programador com a utilização dos controles avançados do ASP.NET.

Agora que já vimos um exemplo em ação, vamos estudar um pouco mais detalhadamente os conceitos de DataBinding, para depois estudarmos os demais controles Data-bound controls.

Data Binding de valores simples.

A idéia básica do Data Binding é fazer com que, ao ser processada a página ASP.NET, um ou mais valores sejam retornados em posições específicas. Pode ser um conjunto de valores retornados para um controle como o DropDownList que utilizamos no exemplo da Listagem 11.2, ou pode ser um único valor. Por exemplo, podemos fazer com que o rótulo de um controle seja baseado no valor contido em outro controle. Toda vez que a página for carregada e o método DataBind for chamado, o valor do rótulo será atualizado.

O exemplo do DropDownList, da Listagem 11.2, onde são exibidos diversos valores, é conhecido como “repeated-value-binding”. Quando a ligação é feita com um único valor, temos o exemplo de um “single-value-binding”. Vamos analisar a sintaxe e alguns exemplos para “single-value-binding.”

Sintaxe para o Data Binding.

Podemos fazer o Data Binding com qualquer propriedade de um controle, utilizando a seguinte sintaxe:

<%# fonte de dados %>

Onde a fonte de dados pode ser de três tipos diferentes:

O nome de uma propriedade: <%# nome de propriedade %>
Uma chamada de método : <%# método(param1,param2,..., paramn) %>
Uma expressão : <%# expressão %>

Qualquer uma das situações acima descritas, deve retornar um único valor, o qual é ligado a uma propriedade do controle.

Vamos a um exemplo simples. Criaremos uma página ASP.NET com dois controles. Um do tipo TextBox e outro do tipo Label. O Texto contido no controle Label, será definido pelo valor digitado no controle TextBox. O valor padrão inicial do controle TextBox é: Valor Inicial. Vamos ao exemplo, depois às explicações.

Na Listagem 11.3 temos o código para o exemplo proposto.

Listagem 11.3 – Um exemplo de single-value-binding.

<html>

<script language="C#"  runat="server">

       void  Page_Load(Object Src,  EventArgs E )

                         Page.DataBind();

</script>

<body>

    <form runat="server">

             <h3>Exemplo  de single-value-binding!!! </H3>

             <HR>

             <asp:TextBox

                          id="CaixaTexto"

                          Text="Valor Inicial"

                          runat="server"

/>

               <BR>

              <HR>

              <B>Rótulo: </B>

              <asp:Label

                  id="RotuloTexto"

                  Text="<%#  CaixaTexto.Text %>"

                  runat="server"

/>

    </form>

</body>

</html>

Digite o código da Listagem 11.3 e salve o mesmo em um arquivo chamado chap11ex3.aspx, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex3.aspx

Observe que o rótulo vem preenchido com o valor inicial da caixa de texto: Valor Inicial. Clique na caixa de texto e digite: “Novo Valor” e pressione Enter. Observe que o rótulo é alterado para refletir o valor digitado na caixa de texto, conforme indicado na Figura 11.3.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.3 Um exemplo de single-binding-value.

A ligação do valor do rótulo, com a propriedade Text, da caixa de texto é feita com o seguinte código:

            <asp:Label

                   id="RotuloTexto"

                   Text="<%# CaixaTexto.Text %>"

                   runat="server"

/>

Mais especificamente com a definição da propriedade Text, onde colocamos uma expressão de ligação que aponta para a propriedade Text do controle CaixaTexto:

Text="<%# CaixaTexto.Text %>"

Podemos fazer esta ligação para qualquer propriedade, desde que o valor retornada seja compatível com o tipo esperado pela propriedade.

Também é de fundamental importância observar a chamada do método DataBind do objeto Page, o qual é feito no evento Load da Página:

    void  Page_Load(Object Src,  EventArgs E )

           Page.DataBind();

Sem esta chamada a ligação não seria feita. O método DataBind, da classe Page, faz a ligação para a página ASP.NET e para todos os controles contidos na página. No nosso exemplo, o efeito prático é o mesmo que se tivéssemos chamado o método DataBind, do controle RotuloTexto – RotuloTexto.DataBind( ).

Ao invés da propriedade de um controle, poderíamos fazer a ligação com uma propriedade da página. Por exemplo, se quisermos que o controle RotuloTexto exiba o valor da propriedade EnableViewState da página, podemos fazer a seguinte ligação:

<asp:Label

                                       id="RotuloTexto"

               Text="<%#  Page.EnableViewState %>"

                                       runat="server"

/>

Data Binding de múltiplos valores - . “repeated-value-binding”.

Quando um controle é ligado a uma fonte de dados como um DataView, temos um exemplo de repeated-value-bindeng. No exemplo da Listagem 11.2, apresentamos o exemplo onde os valores de um controle do tipo DropDownList são obtidos a partir de um objeto DataView. Existem diversos controles capazes de receber dados de um objeto DataView ou DataReader, se for o caso. Neste capítulo estudaremos os seguintes controles:

CheckBoxList
DataList
DropDownList
RadioButtonList
Repeater

O controle DataGrid também recebe dados de um DataView, conforme já vimos nos exemplos do Capítulo 10. No Final deste capítulo estudaremos mais algumas características do controle DataGrid.

O controle CheckBoxList.

Este controle permite que sejam exibidos diversos checkbox, com base em dados retornados por uma objeto DataView, um objeto DataReader, um objeto DataSet, um ArrayList ou uma coleção. Por exemplo, se fizermos o controle baseado em um DataView que retorna o nome de 10 produtos, serão criados 10 CheckBox, uma com o nome de cada produto. Para dar um melhor alinhamento aos checkbox que são construídos dinamicamente, o controle CheckBoxList utiliza uma tabela. Podemos controlar a aparência desta tabela, utilizando algumas propriedades do controle CheckBoxList.

Sintaxe para o controle CheckBoxList:

<asp:CheckBoxList

id="identificação_no_código"

AutoPostBack="True|False"

            CellPadding="Distância entre as bordas e o  conteúdo das células. "

            DataSource='<%  Fonte dos dados, normalmente definida no código da página.  %>'

            DataTextField="Campo ou coluna a partir do qual  é obtido o texto de cada CheckBox"

            DataValueField="Campo  ou coluna a partir do qual é obtido o valor de cada CheckBox"

            RepeatColumns="Define  o número controles por linha"

            RepeatDirection="Vertical|Horizontal"

            RepeatLayout="Flow|Table"

            TextAlign="Right|Left"

            OnSelectedIndexChanged="Evento que executa  quando um checkbox é alterado"

            runat="server"

    <asp:ListItem

             value="value"

            selected="True|False">

            Items adicionados estaticamente.

   </asp:ListItem>

</asp:CheckBoxList>

Nota: Existem diversas outras propriedades para este controle. Para maiores informações consulte a classe CheckBoxList Class, do namespace System.Web.UI.WebControls.

O controle CheckBoxList possui uma coleção chamada Items. Esta coleção contém os elementos individuais do controle, os quais podem ser acessados através de código de programação. Para determinar quais items foram selecionados, podemos fazer um loop através dos elementos da coleção Items.

O valor padrão da propriedade RepeatLayot é Table, o que faz com que os diversos Check Box sejam arranjados na forma de uma tabela.

Exemplo: Vamos utilizar um controle CheckBoxList que exibe todas as cidades do Brasil, para as quais já foram enviados Pedidos. Obteremos esta informação a partir da tabela Pedidos, do banco de dados NorthWind.mdb. Utilizaremos o layout no formato de uma tabela, para o controle CheckBoxList. Também utilizamos algumas propriedades herdadas da classe CheckBoxList Class.

Na Listagem 11.4 temos o código para o exemplo proposto.

Listagem 11.4 – Um exemplo do controle CheckBoxList.

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

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

<html>

<script language="C#"  runat="server">

protected void Page_Load(Object Src, EventArgs  E )

//  Crio uma conexão com o banco de dados do Microsoft Access.

//  C:\Meus documentos\NorthWind.mdb.

      String DefineConexão=  "PROVIDER=MICROSOFT.JET.OLEDB.4.0;" +

                                       "DATA SOURCE=c:\\meus  documentos\\NorthWind.mdb";

      OleDbConnection  MinhaConexão = new OleDbConnection(DefineConexão);

//  Utilizamos um objeto DataAdapter para executar um comando SQL,

//  o qual retorna todos os dados da tabela "Clientes".

OleDbDataAdapter  MeuComando = new OleDbDataAdapter("SELECT CidadeDeDestino"

+  " FROM Pedidos Group By CidadeDeDestino,PaísDeDestino HAVING  PaísDeDestino='Brasil' "

+ "Order By CidadeDeDestino", MinhaConexão);

//  Criamos e preenchemos um objeto DataSet.

       DataSet ds = new DataSet();

//  Utilizo o método Fill do objeto DataAdapter, para preencher

//  o objeto DataSet, com os dados retornados pelo comando SQL.

            MeuComando.Fill(ds);

//  Criamos um objeto DataView ligado com a primeira

//  tabela, da coleção de tabelas, do objeto ds.

       DataView source = new DataView(ds.Tables[0]);

//  Para podermos comparar os resultados, vou utilizar um controle

//  DropDownList e um controle CheckBoxList.

//  ***************************************************

// Ligo  o objeto DataView a um controle do tipo

// DropDownList.

       MinhaLista.DataSource = source ;

       MinhaLista.DataBind();

//  Ligo o objeto DataView a um controle do tipo

// CheckBoxList.

       MeusCheckBox.DataSource = source;

      MeusCheckBox.DataBind();

</script>

<body>

   <h3><font  face="Verdana">Lista e CheckBox dinâmicos com  ASP.NET!!!</font></h3>

<form runat=server>

                         <asp:DropDownList

                                    id="MinhaLista"

                                    runat="server"

                                    DataTextField="CidadeDeDestino"

             </asp:DropDownList>

                <BR>

                <BR>

                <BR>

                <BR>

                <BR>

                <asp:CheckBoxList

                        id="MeusCheckBox"

                        CellPadding="2"

                        DataTextField="CidadeDeDestino"

                       DataValueField="CidadeDeDestino"

                        RepeatColumns="2"

                        RepeatDirection="Vertical"

                        RepeatLayout="Table"

                        TextAlign="Right"

                        BackColor="#c0c0c0"

                        BorderWidth="2"

                        Font-Bold="True"

                        BorderColor="Blue"

                        runat="server"

                </asp:CheckBoxList>

</form>

</body>

</html>

Digite o código da Listagem 11.4 e salve o mesmo em um arquivo chamado chap11ex4.aspx, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex4.aspx

Você obtém uma lista com o nome das cidades do Brasil para as quais existem pedidos e um grupo de controles do tipo CheckBox, com um controle para cada cidade, conforme indicado na Figura 11.4.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.4 O controle CheckBoxList.

Comentários sobre o código do exemplo:

Para retornar apenas o nome das cidades do Brasil, para as quais houve pedidos, tivemos que lançar mão de um comando SQL um pouco sofisticado:

OleDbDataAdapter  MeuComando = new OleDbDataAdapter("SELECT CidadeDeDestino"

+  " FROM Pedidos Group By CidadeDeDestino,PaísDeDestino HAVING  PaísDeDestino='Brasil' "

+ "Order By CidadeDeDestino", MinhaConexão);

Sem dúvidas o ASP.NET é uma evolução em relação ao ASP 3.0, mas o “bom e velho SQL” está sempre presente e necessário. Precisamos conhecer os comandos básicos e avançados da linguagem SQL. Um detalhe importante é que existem pequenas diferenças em relação aos comandos SQL para o Microsoft Access e para o SQL Server. No Anexo III veremos mais detalhes sobre a linguagem SQL e as diferenças entre o SQL para o Microsoft Access e para o SQL Server.

Na seção de código definimos a propriedade DataSource do controle MeusCheckBox e chamamos o método DataBind do mesmo:

MeusCheckBox.DataSource = source;

MeusCheckBox.DataBind();

Este procedimento é o mesmo que utilizamos para o controle DropDownList.

Na seção de apresentação da página utilizamos um controle CheckBoxList, onde fizemos uso de diversas propriedades deste controle.

DataTextField="CidadeDeDestino"  : Define o nome do campo do DataView, que fornecerá o texto para cada CheckBox.

DataValueField="CidadeDeDestino":  Define o nome do campo do DataView, que fornecerá o valor relacionado com cada  CheckBox, quando este for selecionado.

RepeatColumns="2":  Estamos utilizando um Layout de Tabela (RepeatLayout="Table"). Esta  opção define o número de colunas.

Em seguida definimos negrito para a fonte (Font-Bold="True"), definimos a cor de segundo plano das célula como cinza (BackColor="#c0c0c0"), o tamanho da borda em 2 pixels (BorderWidth="2") e a cor da borda azul (BorderColor="Blue").

Como detectar as opções que foram selecionadas em um controle CheckBoxList?

Para determinar as opções que foram selecionados em um controle CheckBoxList, podemos percorrer a coleção Items do controle e testar se determinado item foi selecionado. Por exemplo, se tivermos um controle chamado OpcoesDeCartao e quisermos determinar se o primeiro elemento foi selecionado, podemos fazer o seguinte teste:

               if (OpcoesDeCartao.Items[0].Selected)

                               Comando 1

                               Comando 2

...

                               Comando n

Exemplo: Vamos criar um exemplo, onde temos um controle CheckBoxList, onde as opções foram criadas de uma maneira estática. Cada vez que o usuário clica em uma opção é disparado o evento OnSelectedIndexChanged. Criaremos código para este evento, para atualizar o controle que exibe as opções selecionadas.

Na Listagem 11.5 temos o código para o exemplo proposto.

Listagem 11.5 – Detectando as opções selecionadas.

<%@ Page Language="C#" %>

<html>

 <head>

 </head>

 <body>

<script language="C#"  runat="server">

void  Verifica_Selecionados(Object sender, EventArgs e)

             Mensagem.Text="<B>Selected  Item(s):</B>" + "<br>" + "<br>";

             for (int i=0;  i<MinhasOpcoes.Items.Count; i++)

              if (MinhasOpcoes.Items[i].Selected)

                 Mensagem.Text=Mensagem.Text + MinhasOpcoes.Items[i].Text +  "<br>";

</script>

<form runat="server">

        <asp:CheckBoxList

             id="MinhasOpcoes"

             runat="server"

             AutoPostBack="True"

             CellPadding="5"

             CellSpacing="5"

             RepeatColumns="2"

             RepeatDirection="Vertical"

             RepeatLayout="Flow"

             TextAlign="Right"

            OnSelectedIndexChanged="Verifica_Selecionados">

          <asp:ListItem>Item  1</asp:ListItem>

          <asp:ListItem>Item  2</asp:ListItem>

          <asp:ListItem>Item  3</asp:ListItem>

          <asp:ListItem>Item  4</asp:ListItem>

          <asp:ListItem>Item  5</asp:ListItem>

          <asp:ListItem>Item  6</asp:ListItem>

       </asp:CheckBoxList>

       <br><br>

      <asp:label

               id="Mensagem"

               runat="server"

/>

</form>

</body>

</html>

Digite o código da Listagem 11.5 e salve o mesmo em um arquivo chamado chap11ex5.aspx, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex5.aspx

Clique no Item 1 e observe que, automaticamente o Item selecionado é informado no controle Label. Selecione o Item 5. Novamente o Item selecionado é informado. Marque o Item 4, mesma coisa. Agora desmarque o Item 5, o Label é atualizado, conforme indicado na Figura 11.5.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.5 Exemplo da coleção Items.

Comentários sobre o código do exemplo:

Na definição do controle, utilizamos o evento OnSelectedIndexChanged. Este evento é disparado toda vez que clicamos em uma das opções do controle CheckBoxList. Em resposta a este evento, criamos o procedimento Verifica_Selecionados, na seção de código da página.
O procedimento Verifica_Selecionados define a propriedade Text do label Mensagem, para exibir quais as opções estão atualmente selecionadas. Utilizamos um laço For que varia de 0 até o número de opções do controle. Para obter o número de opções do controle, utilizamos a propriedade Count da coleção Items:

MinhasOpcoes.Items.Count

No interior do laço for, se uma determinada opção estiver selecionada:

if (MinhasOpcoes.Items[i].Selected)

, concatenamos o valor desta opção a propriedade Text do label Mensagem, mais uma tag <BR> para uma quebra de linha. A tag <BR> faz com que cada opção selecionada, seja exibida em uma linha diferente.

No final do laço for, o Label Mensagem exibe as opções selecionadas, uma em cada linha. Este é exatamente o resultado desejado.

O controle DropDownList.

Utilizamos este controle nos exemplos Chap11ex2.aspx e Chap11ex4.aspx. O controle DropDownList é utilizado para a criação de uma lista de opções. A lista pode ser definida de uma maneira estática, utilizando uma série de controles ListItem ou pode ser associada a uma fonte de dados (Data Binding). Ao associarmos o controle DropDownList a uma fonte de dados, as opções da lista serão criadas, automaticamente, a partir dos dados retornados por um objeto DataView ou DataReader.

A sintaxe para o controle DropDownList:

<asp:DropDownList

id="identificação_no_código"

runat="server"

            DataSource="<% fonte de dados %>"

            DataTextField="Campo  da fonte de dados com os rótulos para os itens da lista."

            DataValueField="Campo  da fonte de dados com os valores para os itens da lista."

            AutoPostBack="True|False"

            OnSelectedIndexChanged="Método que executa  quando um elemento da lista é

       selecionado">

<asp:ListItem

value="valor do item da lista."

selected="True|False">

            Texto do item da lista.

   </asp:ListItem>

</asp:DropDownList>

O controle DropDownList é derivado da classe DropDownList, do namespace System.Web.UI.Controls. Esta classe possui uma série de propriedades que permitem a definição dos aspectos visuais do controle. Na Tabela 11.1, temos a definição das principais propriedades para o controle DropDownList.

Propriedade	Descrição
BackColor	Utilizada para definir ou retornar a cor de segundo plano do controle.
BorderColor	Utilizada para definir ou retornar a cor de borda do controle.
BorderWidth	Utilizada para definir ou retornar o tamanho, em pixels, das bordas do controle.
DataSource	Define a fonte de dados a partir da qual são gerados os itens do controle.
DataTextField	Define o campo da fonte de dados, que define o texto que será exibido para cada item.
Font	Define ou retorna informações sobre as características da fonte do controle.
AccessKey	Define um atalho de teclado para colocar o foco no controle.

Tabela 11.1 Principais propriedades do controle DropDownList.

O principal método deste controle é DataBind( ), o qual faz a ligação do controle com uma fonte de dados. Poderíamos redefinir o controle DropDownList do exemplo Chap11ex2.aspx, da seguinte maneira:

<asp:DropDownList

                         id="MinhaLista"

                         runat="server"

                         DataTextField="PaísDeDestino"

                         BackColor="#c0c0c0"

            ForeColor="Blue"

            Font-Bold="True"

            Font-Italic="True"

Com estas alterações a aparência do controle fica conforme indicado na Figura 11.6.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.6 Propriedades do controle DropDownList.

O controle RadioButtonList.

Com este controle podemos criar um grupo de Radio Buttons, dinamicamente, a partir de uma fonte de dados. Por exemplo, podemos gerar um grupo com um Radio Button para cada cidade da Alemanha, para a qual temos pedidos na tabela Pedidos. Somente um RadioButton do controle pode estar selecionado ao mesmo tempo. O comportamento é o mesmo do controle RadioButton, com a diferença que o controle RadioButtonList suporta Data Binding para a geração dinâmica dos seus itens, a partir de uma fonte de dados.

A sintaxe para este controle:

<asp:RadioButtonList

            id="identificação_no_código"

            AutoPostBack="True|False"

            CellPadding="Distância  entre as bordas e o conteúdo das células. "

             DataTextField="Campo  a partir do qual é obtido o texto de cada RadioButton"

            DataValueField="Campo  a partir do qual é obtido o valor de cada RadioButton"

            RepeatColumns="Define  o número controles por linha"

            RepeatDirection="Vertical|Horizontal"

            RepeatLayout="Flow|Table"

            TextAlign="Right|Left"

OnSelectedIndexChanged="Evento que executa  quando clicamos em um RadioButton"

            runat="server">

      <asp:ListItem

Text="Texto  do item."

            Value="Valor  do item."

            Selected="True|False"

/>

</asp:RadioButtonList>

Nota: Existem diversas outras propriedades para este controle. Para maiores informações consulte a classe RadioButtonList Class, do namespace System.Web.UI.WebControls.

O valor padrão da propriedade RepeatLayot é Table, o que faz com que os diversos Check Box sejam arranjados na forma de uma tabela. Utilizamos a propriedade RepeatColumns para definir o número de controles por linha da tabela.

Exemplo: Vamos utilizar um controle RadioButtonList que exibe todas as cidades da Alemanha, para as quais já foram enviados Pedidos. Obteremos esta informação a partir da tabela Pedidos, do banco de dados NorthWind.mdb. Utilizaremos o layout no formato de uma tabela com três colunas, para o controle RadioButtonList. Também utilizamos algumas propriedades herdadas da classe RadioButtonList Class.

Na Listagem 11.6 temos o código para o exemplo proposto.

Listagem 11.6 – Um exemplo do controle RadioButtonList.

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

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

<html>

<script language="C#"  runat="server">

   void  Page_Load(Object Src, EventArgs E )

            //  Crio uma conexão com o banco de dados do Microsoft Access.

            //  C:\Meus documentos\NorthWind.mdb.

   String DefineConexão=  "PROVIDER=MICROSOFT.JET.OLEDB.4.0;" +

                                       "DATA SOURCE=c:\\meus  documentos\\NorthWind.mdb";

    OleDbConnection MinhaConexão = new OleDbConnection(DefineConexão);

            // Utilizamos um objeto  DataAdapter para executar um comando SQL,

            // o qual retorna as cidades da  Alemanha.

            // Para maiores informações sobre a  linguagem SQL, consulte o Anexo III.

OleDbDataAdapter  MeuComando = new OleDbDataAdapter("SELECT CidadeDeDestino" +

"  FROM Pedidos Group By CidadeDeDestino,PaísDeDestino HAVING  PaísDeDestino='Alemanha' " + "Order By CidadeDeDestino",  MinhaConexão);

            // Criamos e preenchemos um objeto  DataSet.

DataSet ds = new DataSet();

            // Utilizo o método Fill do  objeto DataAdapter, para preencher

            // o objeto DataSet, com os dados  retornados pelo comando SQL.

MeuComando.Fill(ds);

            // Criamos um objeto DataView ligado  com a primeira

            // tabela, da coleção de tabelas, do  objeto ds.

DataView source = new DataView(ds.Tables[0]);

            //  Ligo o objeto DataView a um controle do tipo

            // RadioButtonList - MeusBotoes.

MeusBotoes.DataSource = source;

MeusBotoes.DataBind();

</script>

<body>

<h3><font  face="Verdana">Radio Button dinâmicos com  ASP.NET!!!</font></h3>

<form runat=server>

<HR>

                <asp:RadioButtonList

                    id="MeusBotoes"

                    CellPadding="2"

                     DataTextField="CidadeDeDestino"

                     DataValueField="CidadeDeDestino"

                    RepeatColumns="3"

                    RepeatDirection="Vertical"

                    RepeatLayout="Table"

                    TextAlign="Right"

                    BackColor="#c0c000"

                    BorderWidth="2"

                    Font-Bold="True"

                    BorderColor="Blue"

                    runat="server"

                </asp:RadioButtonList>

<HR>

</form>

</body>

</html>

Digite o código da Listagem 11.6 e salve o mesmo em um arquivo chamado chap11ex6.aspx, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex6.aspx

Você obtém o resultado indicado na Figura 11.7.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.7 O controle RadioButtonList – opções geradas dinamicamente.

Observe que utilizamos algumas propriedades para definir os aspcetos visuais do controle:

RepeatColumns="3”  : Define que os controles serão exibidos em uma tabela com três colunas, ou  seja, três controles por linha.

RepeatLayout="Table":  Os controles serão organizados no formato de uma tabela.

TextAlign="Right":  Alinhamento de texto à direita.

BackColor="#c0c000":  Cor de segundo plano da tabela, na qual são colocados os controles.

BorderWidth="2":  Tamanho da borda externa em pixels.

Font-Bold="True":  Exibe a fonte em negrito.

BorderColor="Blue":  Define a cor da borda externa.

« Lição anterior

Δ Página principal

¤ Capítulos

Próxima lição »

Júlio Battisti Livros e Cursosa sua sala de aula na internet

Conheça o Júlio Battisti

Loja Virtual do Site

Curta Nossa Fanpage

Loja Virtual

Livros

Vídeo-Aulas

E-books

Cursos Online

Conteúdo Gratuito

Institucional