[MEU 50º LIVRO]: BANCOS DE DADOS E ACESS - CURSO COMPLETO - DO BÁSICO AO VBA - 1602 páginas

Páginas: 1602 | Autor: Júlio Battisti | 40% de Desconto e 70h de Vídeo Aulas de Bônus

Você está em: PrincipalArtigosASP.NET › Capítulo 07 : 04
Quer receber novidades e e-books gratuitos?
›››
« Lição anterior Δ Página principal ¤ Capítulos Próxima lição »
ASP.NET - CURSO COMPLETO
Autor: Júlio Battisti


Promoção: Livro Windows Server 2012 R2 e Active Directory - Curso Completo, 2100 Páginas. Tudo para você se tornar um administrador de redes altamente qualificado para o mercado de trabalho e levar a sua carreira para o próximo nível!

Promoção: Livro Windows Server 2012 R2 e Active Directory

Curso Completo, 2100 páginas. Tudo para você se tornar um administrador de redes altamente qualificado para o mercado de trabalho e levar a sua carreira para o próximo nível!


Lição 056 - Capítulo 07 - HTML Server Controls disponíveis

Existem algumas propriedades que são comuns a todos os HTML Server Controls disponíveis. Isto acontece porque os mesmos herdam estas propriedades a partir de uma classe comum a todos.

A classe base System.Web.UI.HtmlControls.HtmlControl

A classe base para todos os HTML Server Controls é System.Web.UI.HtmlControls.HtmlControl. Esta classe expõe uma série de propriedades e métodos comuns a todos os HTML Server Controls.

Na Tabela 7.4 temos a descrição das principais propriedades da classe System.Web.UI.HtmlControls.HtmlControl

Propriedade Descrição
Attributes Retorna uma coleção de todos os atributos do tipo pares de nome/valor contidos na página .aspx, na qual está o controle.
ClientID Retorna a identificação do controle. Esta identificação é gerada pelo  ASP.NET e utilizada, dentre outras coisas, para manter o estado do controle.
Disabled Utilizado para retornar ou definir um valor que indica se o controle está ou não desabilitado.
EnableViewState Utilizado para retornar ou definir um valor boleano que indica se o controle de estado está habilitado (true) ou desabilitado (false), para o controle.
ID Utilizado para retornar ou definir um nome associado ao controle. Este nome é utilizado no código para acessar as propriedades e métodos do controle.
Page Retorna uma referência para a página que contém o controle.
Site Retorna informação a respeito do Web site.
Visible Utilizado para retornar ou definir um valor que indica se o controle é ou não visível.

Tabela 7.4 Principais propriedades da classe System.Web.UI.HtmlControls.HtmlControl.

Nota: Para uma referência a todas as propriedades e métodos da classe System.Web.UI.HtmlControls.HtmlControl, consulte a documentação do Framework .NET, no item “.NET Framework Reference”.

Vamos, finalmente, começar a estudar os HTML Server Controls disponíveis.

HTMLForm Control

Este controle é utilizado para a criação de formulários. É o tradicional <form> </form>.Na prática, todo controle de servidor deve ser colocado dentro de um formulário. O que define o controle como um Server Control é o atributo runat=”server”.

Sintaxe para o controle Form:

<form 
runat="server"
id="identificação_no_código"
method="POST | GET"
action="endereço"
>
            Controles  que definem os elementos do formulário
</form>

Onde temos as seguintes propriedades:

  • runat=”server”: Define que é um controle de servidor, ou seja, que será processado no servidor.
  • id=”identificação_no_código”: Um nome que atribuímos ao controle, nome este que será usado para acessar as propriedades e métodos do controle, através de programação.
  • method: Existem dois métodos para enviar um formulário para o servidor: POST e GET. O método GET é mais limitado, sendo que na grande maioria das vezes utilizamos o método POST.
  • action: O endereço de uma página que irá receber os dados digitados no formulário e realizar alguma ação com os dados. Por exemplo, podemos criar um formulário de cadastro, onde o formulário digita os seus dados para o cadastramento. O formulário de cadastro é criado como uma página ASP.NET chamada cadastro.aspx. O usuário preenche os dados e clica em um botão Enviar. Ao clicar no botão Enviar, os dados digitados pelo usuário serão passados para a página definida na propriedade action – vamos chamá-la de insere.aspx. A página insere.aspx recebe os dados digitados pelo usuário, insere os mesmos em uma tabela de um banco de dados do SQL Server 2000 e retorna uma mensagem para o usuário. As etapas do exemplo descrito, estão ilustradas na Figura 7.3.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.3 Dados de um formulário sendo processados.

Nota: Não podemos incluir mais do que um controle HtmlForm em uma página. Se você inserir mais do que um HtmlForm, uma exceção será gerada. Por padrão method é definido como POST e a propriedade action é definida com o endereço da própria página.

Vamos apresentar um exemplo.

Exemplo: Neste exemplo criaremos uma página com um controle HtmlForm. No formulário colocaremos dois controles HtmlInputText (detalharemos este controle mais adiante) e um controle HtmlButton (também detalharemos este controle mais adiante). Ao carregar a página, o usuário digita um valor no primeiro campo e clica no botão Enviar. O valor digitado pelo usuário, no primeiro campo, é repetido no segundo campo.

Na Listagem 7.3 temos a página do exemplo proposto.

Listagem 7.3 – Um formulário simples – chap7ex3.aspx.

<html>
<script language="C#"  runat="server">
      public void  Enviar_Click(Object sender,EventArgs e)
            {
         Voltou.Value  = Digitou.Value;
              
            }
</script>
<body>
<form method=post runat="server">
<table>
<tr>
     <td><h3>Digite um texto:</h3> </td>
     <td><input id="Digitou" type=text size=40  runat="server"></td> 
</tr>
<tr>
    <td><h3>Você digitou: </h3> </td>
   <td><input  id="Voltou" type=text size=40 runat="server">  </td>
</tr>
<tr>
    <td><h3>Clique no botão --></h3></td>
    <td><input  type=submit value="Enviar" OnServerClick="Enviar_Click"  runat="server"></td>
</tr>
</table>
</form>
</body>
</html>

Digite o código da Listagem 7.3 e salve o mesmo em um arquivo chamado chap7ex3.aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex3.aspx

Ao carregarmos esta página no Internet Explorer obtemos um formulário com dois campos para digitação de texto. Digite a mensagem: “Exemplo de formulário”, no primeiro controle e dê um clique no botão Enviar. A mensagem “Exemplo de formulário”, será exibida no segundo campo, conforme indicado na figura a seguir:

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.4 Um exemplo de formulário – chap7ex3.aspx.

Agora uma pequena demonstração de como o ASP.NET mantém o estado dos controles. No nosso exemplo vamos provar que o valor contido nos campos do formulário é mantido no servidor. Pressione F5 para atualizar a página do nosso exemplo (se você estiver utilizando o Netscape pressione Ctrl+R). Com o ASP 3.0 e versões anteriores, ao pressionarmos F5 a página seria recarregada e os campos apareceriam em branco ou com os seus valores padrão. No caso do ASP.NET são exibidos os valores atualmente definidos, ou seja, o estado atual da página foi mantido. Pressione F5 e observe. O texto “Exemplo de formulário” será exibido nos dois campos, o que comprova a manutenção automática de estado com o ASP.NET.

Nota: Apenas para lembrar, você pode desabilitar a manutenção automática de estado utilizando a seguinte diretiva, no início da página:

<%@Page EnableViewState=”false” %>

Algumas observações sobre o código do nosso exemplo.

Não definimos a propriedade action do formulário. Com isso, ao clicar no botão Enviar, a página chama a si mesma, pois conforme descrito, o valor padrão para a propriedade action é o endereço da própria página, onde está o formulário.

No formulário definimos um evento a ser disparado em resposta ao clique no botão enviar. Esta definição é feita na seguinte linha de código:

<td><input type=submit value="Enviar"  OnServerClick="Enviar_Click" runat="server"></td>

Neste caso definimos que ao ocorrer o evento Click (OnServerClick), deve ser executado o procedimento Enviar_Click. O procedimento enviar Click, atribui o valor digitado no campo Digitou, a propriedade Value do campo Voltou. Isto é equivalente a copiar o conteúdo do campo Digitou para o campo Voltou. O procedimento Enviar_Click está na seção de código da página, conforme indicado na figura a seguir:

<script language="C#"  runat="server">
      public void  Enviar_Click(Object sender,EventArgs e)
      {
         Voltou.Value  = Digitou.Value;
              
      }
</script>

HTMLInputText Control

É utilizado para a criação de campos, em um formulário, onde o usuário pode digitar texto.Este controle é utilizado para criar controles que rodam no servidor, para os tipos e funções indicados na Tabela 7.5. O que define o controle como sendo de servidor é a propriedade runat=”server”.

Tipo Descrição
Texto <input type=text>. Para a digitação de informações como por exemplo: nome, endereço, telefone, e-mail, etc.
Senha <input type=password>. Para a digitação de senhas. Ao ser digitada uma senha, são exibidos somente asteriscos (*) no Windows 98, 98, NT ou 2000; já no Windows XP são exibidos pontos grandes.

Tabela 7.5 HTMLInputText Control

Sintaxe para o controle input:

<input 
type=text |  password 
runat="server" 
id="identificação_no_código" 
maxlength="número máximo de caracteres" 
size="tamanho de exibição da caixa para digitação" 
value="valor padrão para o campo"
>
  • runat=”server”: Define que é um controle de servidor, ou seja, que será processado no servidor.
  • id=”identificação_no_código”: Um nome que atribuímos ao controle, nome este que será usado para acessar as propriedades e métodos do controle, através de programação.
  • maxlength: tamanho máximo de caracteres para o campo.
  • size: tamanho da caixa que é exibida para o campo. Se for menor que o tamanho máximo do campo, ao digitar informação, quando o texto digitado atingir o tamanho máximo de exibição, o texto será deslocado para a esquerda, para que o usuário continue digitando.
  • value: Valor padrão associado ao campo. Ao carregarmos a página o controle é exibido em branco, a menso que exista um valor padrão para o mesmo, caso em que será exibido o valor padrão.

No exemplo da página chap7ex3.aspx, utilizamos dois controles do tipo <input type=text>, conforme indicado pelo trecho de código a seguir:

<td><h3>Digite um texto:</h3> </td>
<td><input id="Digitou" type=text size=40  runat="server"></td> 
            [...]
<td><h3>Você digitou: </h3> </td>
<td><input id="Voltou" type=text size=40  runat="server"> </td>

Vamos modificar algumas propriedades destes controles. Vamos definir um valor padrão para o controle Digitou. Vamos definir o valor padrão “Exemplo de ASP.NET”. Também vamos definir um tamanho máximo de 20 para a caixa de exibição do campo Digitou. Após as alterações propostas o nosso código deve ficar assim:

<td><h3>Digite um texto:</h3> </td>
<td><input id="Digitou" type=text size=20  runat="server" 
          value=”Exemplo de ASP.NET”></td> 
[...]
<td><h3>Você digitou: </h3> </td>
<td><input id="Voltou" type=text size=40  runat="server"> </td>

Faça estas alterações no código da Listagem 7.3 e salve a mesma com o nome de chap7ex4.aspx, na subpasta chap7, da pasta wwwroot descrita anteriormente. Para acessar esta nova versão da página, utilize o seguinte endereço:

http://localhost/chap7/chap7ex4.aspx

Ao carregar esta página você obterá os resultados indicados na Figura 7.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.5 Um exemplo HtmlTextControl – chap7ex4.aspx.

HTMLInputCheckBox

É utilizado para a criação de controles de seleção em um formulário. Os controles do tipo CheckBox são exibidos como pequenos quadradinhos. São controles do tipo marcado/desmarcado. Se o controle estiver marcado, ao clicarmos ele será desmarcado. Se o controle estiver desmarcado, ao clicarmos ele será marcado. Normalmente utilizado em grupos. Em um grupo de controles do tipo CheckBox podemos selecionar mais do que um controle. Por exemplo, para criar um formulário de cadastro, onde o cliente pode informar as áreas de interesse em uma livraria. Podemos utilizar controles do tipo CheckBox, onde o cliente pode selecionar uma ou mais áreas de interesse. Apresentaremos este exemplo logo em seguida.

Sintaxe para o controle CheckBox:

<input
   type=checkbox
   runat="server"
   id="identificação_no_código"
   checked

Onde temos:

  • runat=”server”: Define que é um controle de servidor, ou seja, que será processado no servidor.
  • id=”identificação_no_código”: Um nome que atribuímos ao controle, nome este que será usado para acessar as propriedades e métodos do controle, através de programação.
  • checked: Valor boleano que indica se o controle está marcado (True) ou não (False).

Vamos apresentar um exemplo.

Exemplo: Vamos criar um formulário onde o cliente digita o Nome, o E-mail e seleciona as áres de preferência, nas quais deseja receber informações por e-mail. Utilizaremos o evento Click do botão Enviar, para exibir os valores digitados pelo usuário. Para exibição dos valores vamos utilizar um controle do tipo caixa de texto HtmlTextArea control, mais adiante falaremos em detalhes sobre este controle.

Na Listagem 7.4 temos a página do exemplo proposto.

Listagem 7.4 – O controle CheckBox – chap7ex5.aspx.

<html>
<script language="C#"  runat="server">
public void   Enviar_Click(Object sender,EventArgs e)
{
             Dados.Visible  = true;              
        
             //Declaração das variáveis auxiliares
             String Aux;
             // Começo a montar uma string que será  atribuída à
             // propriedade Value do controle Dados.
             Aux = Nome.Value;
             Aux = Aux + "\n" + Email.Value;
            if (Negocios.Checked==true)
               {
                        Aux=  Aux +"\n" +"Negócios";
               }
            if  (Administração.Checked==true)
               {
                        Aux=  Aux +"\n" +"Administração";
               }
            if  (Informática.Checked==true)
               {
                        Aux=  Aux +"\n" +"Informática";
               }
            if  (Ficção.Checked==true)
               {
                        Aux= Aux +"\n"  +"Ficção";
               }
             Dados.Value = Aux;             
             
            }
</script>
<body>
   <form  method=post runat="server">
            <table>
            <tr>
                <td><h3>Nome:</h3>  </td>
                <td><input id="Nome"  type=text size=40 runat="server"></td> 
            </tr>
            <tr>
                <td><h3>E-mail: </h3>  </td>
                <td><input id="Email"  type=text size=40 runat="server"> </td>
            </tr>
            <tr>
                <td colspan="2">Selecione  as áres de interesse:</td>
            </tr>
            <tr>
                <td><h3>Negócios:</h3>  </td>
                <td><input id="Negocios"  type=checkbox runat="server"> </td>
            </tr>
            <tr>
                 <td><h3>Administração:</h3> </td>
                <td><input  id="Administração" type=checkbox runat="server">  </td>
            </tr>
            <tr>
                <td><h3>Informática:</h3>  </td>
                <td><input  id="Informática" type=checkbox runat="server">  </td>
            </tr>
            <tr>
                <td><h3>Ficção:</h3>  </td>
                <td><input id="Ficção"  type=checkbox runat="server"> </td>
            </tr>
            <tr>
                <td><h3>Dados do  cliente:</h3> </td>
                 <td><textarea  id="Dados" cols="60" rows="10"  visible="false" runat="server"></textarea>  </td>
            </tr>
            <tr>
               <td><h3>Clique no botão  --></h3></td>
                <td><input  type=submit value="Enviar" OnServerClick="Enviar_Click"  runat="server"></td>
            </tr>
            </table>
   </form>
</body>
</html>

Digite o código da Listagem 7.4 e salve o mesmo em um arquivo chamado chap7ex5.aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex5.aspx

Ao carregarmos esta página no Internet Explorer obtemos um formulário com dois campos para digitação de texto. Um para o nome do usuário e outro para o e-mail. Também são exibidos quatro controles do tipo checkbox onde o usuário pode escolher uma ou mais das seguintes opções:

  • Negócios
  • Administração
  • Informática
  • Ficção

Ao carregar a página pela primeira vez, o controle do tipo textarea está oculto, pois definimos sua propriedade visible como false. Para o nome digite José da Silva e para o e-mail digite josedasilva@abc.com.br. Selecione as opções Negócios e Informática, conforme indicado na Figura 7.6

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.6 Um exemplo com controles checkbox – chap7ex5.aspx.

Dê um clique no botão Enviar. Um controle do tipo textarea será exibido na parte final da página, com os dados que você digitou para o Nome e o email do usuário, além das informações selecionadas, conforme indicado na Figura 7.7.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.7 Exibição dos dados digitados e das opções selecionadas.

Desmarque a opção Negócios e marque as opções Administração e Ficção. Dê um clique no botão Enviar e observe que as novas opções já são exibidas no controle do tipo textarea.

Alguns comentários sobre o código do nosso exemplo.

  • Na seção de apresentação (entre as tags <body> e </body>) criamos um formulário. Neste formulário colocamos dois controles do tipo text para que o usuário possa digitar o nome e o email. Depois incluimos quatro controles do tipo checkbox para que o usuário possa selecionar uma ou mais preferências. Novamente utilizamos uma tabela para fazer o alinhamento dos controles.

Nota: Para maiores informações sobre os comandos básicos da linguagem HTML consulte o Anexo I.

  • Na seção de código utilizamos o evento Click do botão Enviar. Dentro deste evento tornamos o controle Dados visível e depois declaramos uma variável do tipo String – Aux. Aí vamos concatenando os valores digitados para o nome e o email à variável Aux, conforme indicado no trecho de código a seguir:
Dados.Visible = true; 
             //Declaração das variáveis auxiliares
             String Aux;
             // Começo a montar uma string que será  atribuída à
             // propriedade Value do controle Dados.
             Aux = Nome.Value;
             Aux = Aux + "\n" + Email.Value;

Lembrando do Capítulo 3, o + é o operador de concatenação e o \n é o código para troca de linha.

  • Na seqüência utilizamos a instrução if para determinar se o controle Negócios foi selecionado. Em caso afirmativo concatenamos “Negócios” à variável Aux, conforme indicado no trecho de código a seguir:
            if (Negocios.Checked==true)
            {
                        Aux=  Aux +"\n" +"Negócios";
            }

O mesmo procedimento é utilizado para determinar se as demais opções foram ou não selecionadas.

  • Na última linha da seção de código definimos a propriedade Value do controle Dados (controle do tipo textarea) como sendo igual a variável Aux, conforme indicado no seguinte comando:
Dados.Value = Aux;

HtmlTextArea control.

Utilizamos este controle no exemplo da Listagem 7.4. Vamos apresentar mais alguns detalhes sobre este controle. O controle textarea é utilizado para a digitação ou exibição de grandes quantidades de texto. A sua função é semelhante a função dos campos do tipo memo no Microsoft Access.

Sintaxe para o controle CheckBox:

<textarea
    runat="server"
    id="identificação_no_código"
   cols="número  de colunas"
   name="nome  enviado para o navegador"
   rows="número  de linhas"
   onserverchange="onserverchangehandler"
Texto para ser exibido no controle.
</textarea>

A propriedade onserverchange é utilizada para definir um evento que será executado em resposta ao envio da página para processamento no servidor.

Observe que este controle possuí uma tag de abertura <textarea> e uma de fechamento </textarea>. Utilizamos esta sintaxe no exemplo do item anterior:

<td><textarea id="Dados"  cols="60" rows="10" visible="false"  runat="server"></textarea>

Ao invés desta sintaxe tradicional podemos utilizar a seguinte sintaxe:

<textarea id="TextArea1" cols=40 rows=4  runat=server />

Observe que simplesmente colocamos uma barra antes do sinal de fechamento >. Podemos utilizar qualquer uma das duas sintaxes.

HTMLInputRadioButton control.

É utilizado para a criação de controles de seleção em um formulário. Os controles do tipo RadioButton são exibidos como pequenos círculos. São controles do tipo marcado/desmarcado. Se o controle estiver marcado, ao clicarmos ele será desmarcado. Se o controle estiver desmarcado, ao clicarmos ele será marcado. Normalmente utilizado em grupos. Em um grupo de controles do tipo RadioButton podemos selecionar somente um controle. Ao clicarmos em um controle, se outro controle do grupo estava marcado, será desmarcado.Por exemplo, para criar um formulário de cadastro, onde o cliente o tipo do cartão de crédito. Para criar um grupo de controles do tipo RadioButton definimos todos os controles com o mesmo valor para a propriedade name.

Sintaxe para o controle CheckBox:

<input
   type=checkbox
    runat="server"
   id="identificação_no_código"
   checked
   name="nome do  grupo"

Onde temos:

  • runat=”server”: Define que é um controle de servidor, ou seja, que será processado no servidor.
  • id=”identificação_no_código”: Um nome que atribuímos ao controle, nome este que será usado para acessar as propriedades e métodos do controle, através de programação.
  • checked: Valor boleano que indica se o controle está marcado (True) ou não (False).
  • name: nome do grupo. Para criar um grupo de controles do tipo RadioButton basta definir o mesmo nome para todos os controles do grupo.

Vamos apresentar um exemplo.

Exemplo: Vamos criar um formulário onde com três controles do tipo RadioButton. O usuário seleciona uma opção e clica no botão Enviar. Para processar as informações enviadas pela página vamos utilizar a propriedade OnServerChange do controle RadioButton. Esta propriedade permite que seja definido um procedimento que será executado quando a página for processada, em resposta a uma alteração no controle. Este procedimento detecta o tipo de cartão selecionado e exibi o tipo de cartão em um controle do tipo text.

Na Listagem 7.5 temos a página do exemplo proposto.

Listagem 7.5 – Controles do tipo RadioButton – chap7ex6.aspx.

<html>
   <script  language="C#" runat="server">
      void  Server_Change(object Source, EventArgs e) 
      {
         if  (Visa.Checked == true)
            Exibe.Value="O  SEU CARTÃO É VISA!";
         else if  (Master.Checked == true)
            Exibe.Value="O  SEU CARTÃO É MASTER CARD!";
         else if  (Outros.Checked == true)
                Exibe.Value="OUTROS TIPOS DE  CARTÃO!";
      }
   </script>
<body>
   <form  runat="server">
      <h3><font  face="Verdana">Selecione o tipo de cartão:</font></h3>
      <input  type="radio" 
             id="Visa" 
              name="Cartao
             OnServerChange="Server_Change" 
             runat="server"/>
      Visa<br>
      <input  type="radio" 
              id="Master" 
              name="Cartao”
              OnServerChange="Server_Change" 
              runat="server"/>
      Master  Card<br>
      <input  type="radio" 
              id="Outros" 
             name="Cartao”
              OnServerChange="Server_Change" 
              runat="server"/>
      Outros
      <p>
      <input  id="Exibe" type=text size=60 runat="server">
      <p>
      <input  type=submit id="Enviar" 
              value="Enviar" 
             runat="server">
   </form>
</body>
</html>

Digite o código da Listagem 7.5e salve o mesmo em um arquivo chamado chap7ex6aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex6aspx

Ao carregarmos esta página no Internet Explorer obtemos um formulário com três controles do tipo RadioButton. Podemos selecionar um dos controles. Dê um clique na opção Visa. Agora dê um clique na opção Master Card. Observe que a opção Visa foi, automaticamente, desmarcada. Dê um clique no botão Enviar. Você obterá o resultado indicado na Figura 7.8;

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.8 Um exemplo com controles RadioButton - chap7ex6.aspx.

A novidade neste exemplo é que, ao invés de utilizar o evento Click do botão de comando, utilizamos um evento definido pela propriedade OnServerChange dos controles do tipo RadioButton.

Controles para a criação de tabelas: HtmlTable, HtmlTableRow e HtmlTableCell Controls.

Os controles HtmlTable, HtmlTableRow e HtmlTableCell são os controles de servidor, equivalentes as tags HTML para a criação de tabelas: <table> </table>, <tr> </tr> e <td> </td>, respectivamente.

A vantagem de utilizarmos os controles de servidor é que temos acesso a  uma série de propriedades e métodos dos controles de servidor. Por exemplo, podemos adicionar ou remover linhas e colunas dinamicamente, com base em eventos ocorridos na página. Através de programação podemos utilizar os métodos das coleções HtmlTableRowCollection e HtmlTableCellCollection para adicionar ou remover elementos da tabela.

Vamos estudar cada um dos controles individualmente, depois vamos apresentar alguns exemplos de utilização.

O controle HtmlTable.

Temos a seguinte sintaxe para este controle:

<table
    runat="server"
    id="identificação_no_código"
   align=left | center  | right
   bgcolor="cor  de fundo"
    border="tamanho da borda em pixels"
    bordercolor="cor da borda"
    cellpadding="espaço entre a borda e o conteúdo da célula, em  pixels."
   cellspacing="  espaço entre as células, em pixels "
   height="altura  da tabela"
   rows="um  objeto do tipo coleção de linhas - HtmlTableRowCollection "
   width="largura  da tabela"
            <tr><td></td></tr>
            <tr><td></td></tr>
</table>

Observe que além de definir uma coleção de linhas, no parâmetro rows, também podemos acrescentar linhas e células utilizando as tags tradicionais: <tr> </tr> para adicionar linhas e <td> </td> para adicionar células dentro de uma linha (colunas da tabela).

Quando utilizamos um server control HtmlTable para criar uma tabela, podemos imaginar a tabela como sendo formada por uma coleção de linhas. Podemos adicionar ou remover itens desta coleção, através do código de programação. Também podemos imaginar cada linha, como uma coleção de células. Podemos adicionar ou remover itens desta coleção, utilizando código de programação. No final deste item veremos um exemplo prático de adição de linhas e células utilizando código de programação.

O controle HtmlTableRow.

Temos a seguinte sintaxe para este controle:

<tr
    runat="server"
    id="identificação_no_código"
    align="alinhamento para o conteúdo da linha"
   bgcolor="cor  de segundo plano"
    bordercolor="cor da borda"
   height="altura  da linha"
   cells="um objeto  do tipo HtmlTableCellCollection "
    valign="alinhamento vertical do conteúdo da linha"
<td>Conteúdo da célula</td>
<td> Conteúdo da célula </td>
<td> Conteúdo da célula </td>
</tr>

O controle HtmlTableCell

Temos a seguinte sintaxe para este controle:

<td ou th
    runat="server"
   id="identificação_no_código"
    align="alinhamento para o conteúdo da linha"
   bgcolor="cor  de segundo plano"
    bordercolor="cor da borda"
   height="altura  da célula"
   nowrap="true |  false"
   rowspan ou colspan=”número  de linhas ou células para mesclar”
    valign="alinhamento vertical do conteúdo da linha"
   width="largura  da célula"
   Conteúdo da célula.
</td or /th>

Duas propriedades merecem maiores comentários.

  • nowrap: Pode ter o seu valor definido como true, neste caso ocorre o retorno automático do texto ao alcançar o final da célula, caso o conteúdo da célula não caiba no tamanho definido para a célula. Se o valor for definido em false, não ocorrerá o retorno automático.
  • colspan ou rowspan: esta propriedade é utilizada para mesclar células. Por exemplo, se temos uma tabela com duas colunas, porém em uma das linhas queremos mesclar as duas colunas, utilizamos o seguinte código:
<tr>
    <td  width="100%" colspan="2">Conteúdo da Célula</td>
</tr>

Um exemplo prático.

Vamos apresentar um exemplo,onde demonstramos a capacidade de adicionar linhas e células, dinamicamente, a uma tabela, utilizando código de programação. Ao carregar a página é exibida uma tabela de uma única célula. Vamos criar um formulário onde são apresentados dois campos para o usuário. No primeiro, o usuário digita o número de linhas para a tabela. No segundo campo, o usuário digita o número de colunas. Ao clicar no botão Enviar, utilizaremos o evento Load da página, para criar uma tabela com o número de linhas e colunas especificadas pelo usuário.

Na Listagem 7.6 temos a página do exemplo proposto.

Listagem 7.6 – Adicionando linhas e células, dinamicamente – chap7ex7.aspx.

<html>
<head>
<script language="C#"  runat="server">
void Page_Load(Object sender, EventArgs e) {
int row = 0;
// Vamos gerar, dinamicamente, uma tabela
// com o número de linhas e células, especificado
// pelo usuário.
int numrows = Convert.ToInt32(Linhas.Value);
int numcells = Convert.ToInt32(Colunas.Value);
// O laço de fora define o número de linhas.
// para cada linha, isto é, para cada passagem do laço
// de fora, o laço mais interno é executado tantas vezes
// quantas forem o número de colunas especificadas.          
for (int j=0; j<numrows; j++) 
    {
                        //Declaramos uma variável do tipo  HtmlTableRow
            HtmlTableRow  r = new HtmlTableRow();
            // Define  a cor de segundo plano, alternadamente 
            // para  linhas pares e ímpares.
           if (row%2  == 1)
                  r.BgColor="Gainsboro";
      row++;
             for (int  i=0; i<numcells; i++) 
                        {
                           // Declaro e crio um novo objeto do tipo  HtmlTableCell()
            
                   HtmlTableCell  c = new HtmlTableCell();
                   
           // Defino o  conteúdo da célula que foi recém criada.
            c.Controls.Add(new LiteralControl("Linha " + j.ToString() +  ", Coluna " + i.ToString()));
                  // Adiciono a célula à coleção de células  da linha.
                   r.Cells.Add(c);
            }
                  // Adiciono a linha à coleção de linhas  da tabela.           
                    Table1.Rows.Add(r);
          }
       }
    </script>
</head>
<body>
    <h3><font  face="Verdana">HtmlTable Example</font></h3>
<form runat="server">
    <font  face="Verdana" size="-1">
        <p>
        <table  id="Table1" 
                CellPadding=5 
                CellSpacing=0 
                Border="1" 
                BorderColor="black" 
                runat="server" /> 
        <p>
        Número de  linhas  :
            <input  id="Linhas" type=text size=10 value="1"  runat="server">        
            <BR>
        Número de  colunas  :
            <input  id="Colunas" type=text size=10 value="1"  runat="server">        
            <BR>
        <input  type="submit" value="Gerar a tabela dinamicamente."  runat="server">
   </font>
</form>
</body>
</html>

Digite o código da Listagem 7.6 e salve o mesmo em um arquivo chamado chap7ex7aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex7aspx

Ao carregarmos esta página no Internet Explorer obtemos uma tabela com uma linha e uma coluna e um formulário com dois campos para digitação. O valor padrão destes campos é definido como 1, conforme indicado na Figura 7.9.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.9 Formulário para geração automática de tabela - chap7ex7.aspx.

Digite 3 para o número de linhas e 3 para o número de colunas. Dê um clique no botão “Gerar a tabela dinamicamente”. Uma tabela com três linhas e três colunas por linha, será automaticamente gerada, conforme indicado na Figura 7.10.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.10 Um exemplo de tabela gerada dinamicamente.

Alguns comentários sobre o código da página chap7ex7.aspx.

  • Na seção de apresentação da página, criamos um formulários com dois campos para digitação do número de linhas e colunas da tabela a ser gerada dinamicamente. Também colocamos um botão do tipo Submit.
  • Na seção de código é interessante observar que não utilizamos o evento Click do botão Enviar do formulário. Poderíamos ter utilizado este evento, como já fizemos em exemplos anteriores. No exemplo da página chap7ex7.aspx optamos por utilizar o evento Load do objeto Page. Lembrando, do que foi apresentado no início do capítulo, toda página APS.NET, ao ser carregada, é compilada e um objeto do tipo Page é gerado. Este objeto é baseado na classe Page do namespace System.Web.UI. Sendo um objeto, temos aceso a seus métodos, propriedades e demais membros. A seguir temos o código para a declaração do evento Load da página:
void Page_Load(Object sender, EventArgs e)

Importante: Uma tabela dinâmica é formada por uma coleção de linhas, onde cada linha é formada por uma coleção de células. Com esta idéia em mente é que, através do código do evento Load, vamos criar uma tabela com o número de linhas e colunas digitado pelo usuário.

Iniciamos o procedimento declarando três variáveis do tipo inteiro:

int row = 0;
int numrows = Convert.ToInt32(Linhas.Value);
int numcells = Convert.ToInt32(Colunas.Value);

A variável row é utilizada para definir se estamos em uma linha ímpar (1ª, 3, etc) ou em uma linha par (2ª, 4ª, etc). Para as linhas pares definiremos uma cor de fundo diferente, para dar um efeito especial na apresentação da tabela.

A variável numrows contém o número de linhas digitado pelo usuário. Observe que temos que converter o valor digitado pelo usuário para um tipo Int32. Esta operação é necessária porque os valores digitados em um campo de um formulário são considerados valores de texto. A variável numcells contém o número de colunas digitado pelo usuário. Também convertemos este número para Int32.

Em seguida iniciamos dois laços for. O laço for externo varia de 0 até o número de linhas especificado pelo usuário. O laço for interno varia, para cada valor do laço externo, de 0 até o número de colunas especificado pelo usuário, conforme indicado pelo trecho de código a seguir:

for (int j=0; j<numrows; j++) 
                {
                        //Declaramos uma variável do tipo  HtmlTableRow
                        HtmlTableRow  r = new HtmlTableRow();
               // Define a cor de segundo plano,  alternadamente 
                   // para linhas pares e ímpares.
            
               if  (row%2 == 1)
                   r.BgColor="Gainsboro";
                 row++;
             for (int  i=0; i<numcells; i++) 
                        {
                           // Declaro e crio um novo objeto do tipo  HtmlTableCell()
            
                   HtmlTableCell  c = new HtmlTableCell();
                   
                           // Defino o conteúdo da célula que foi recém  criada.
                    c.Controls.Add(new LiteralControl("Linha " + j.ToString() +  ", Coluna " + i.ToString()));
                           // Adiciono a célula à coleção de células da  linha.
                   r.Cells.Add(c);
            }
                 // Adiciono a linha à coleção de linhas da  tabela.            
             Table1.Rows.Add(r);
          }

No início do laço, declaramos e inicializamos uma variável r, do tipo HtmlTableRow. Estamos criando um objeto do tipo HtmlTableRow. Isto é feito com o seguinte código:

                        HtmlTableRow  r = new HtmlTableRow();

Em seguida um texte para definir se estamos em uma linha par ou ímpar. O teste divide o número da linha por 2 e retorna o resto da divisão. Se este resto for igual a 1 estamos em uma linha ímpar e a cor de segundo plano é alterada. Observe que para alterar a cor de segundo plano utilizamos a propriedade BgColor do objeto r, que é um objeto do tipo HtmlTableRow(). Isto é feito pelo seguinte trecho de código:

               if  (row%2 == 1)
                   r.BgColor="Gainsboro";
                 row++;

Gainsboro é o nome de uma cor. Ao invés do nome poderíamos utilizar os tradicionais códigos de seis dígitos hexadecimais. Por exemplo: #000000 para preto #FFFFFF para branco, #FF0000 para vermelho e assim por diante. Após definirmos o nome da cor, incrementamos a variável inteira row. Observe que com ASP.NET e a biblioteca de classes do Framework .NET, a programação para Web ficou muito mais parecida com a programação tradicional para Windows, orientada a eventos.

Na seqüência do código entramos no laço for interno. Neste laço é declarada e inicializada uma variável c, do tipo HtmlTableCell(). Para cada passagem do laço interno vamos adicionar uma célula, a coleção de células do objeto HtmlTableRow atual. Na prática estamos adicionando as colunas para a linha atual. Também é feita a definição do conteúdo para a célula.

A declaração da variável do tipo HtmlTableCell() é feita com o seguinte comando:

HtmlTableCell c = new HtmlTableCell();

A definição do conteúdo da célula é feita com o seguinte comando:

c.Controls.Add(new LiteralControl("Linha " +  j.ToString() + ", Coluna " + i.ToString()));

A adição da célula  c, à coleção de  células da linha r é feita com o seguinte comando:

r.Cells.Add(c);

Para cada passada do laço interno uma nova célula é adicionada a linha. Ao final a linha terá tantas células quantas forem as colunas especificadas pelo usuário.

Uma vez que adicionamos várias células a coleção de células da linha, o passo final é adicionar a linha a coleção de linhas da tabela. Isto é feito no seguinte comando:

Table1.Rows.Add(r);

Para cada passada do laço externo uma nova linha é adicionada a coleção de linhas da tabela. Ao final teremos uma tabela com tantas linhas quantas especificadas pelo usuário e em cada linha, tantas células quanto o número de colunas especificado pelo usuário. Em resumo: exatamente o resultado proposto pelo exemplo.

HTMLSelect control.

É utilizado para a criação de controles do tipo caixa de seleção, onde são apresentados diversos itens em uma lista, onde o usuário pode selecionar um determinado item. A funcionalidade é idêntica a tag <SELECT> </SELECT) do HTML.

Sintaxe para o controle Select:

<select
    runat="server"
    id="identificação_no_código"
   OnServerChange="onserverchangehandler"
    DataSource="fonte de dados"
    DataTextField="descrição do campo ao qual é vinculada a caixa de  seleção"
    DataValueField="valor do campo ao qual é vinculada a caixa de  seleção"
   Multiple
   Items="coleção  de elementos do tipo options"
    SelectedIndex="índice do elemento atualmente selecionado"
   Size="número  de itens visíveis ao mesmo tempo. Por padrão é 1"
   Value="Valor  do item atualmente selecionado"
<option>Texto para a opção 1</option>
<option>Texto para a opção 2</option>
...
<option>Texto para a opção n</option>
</select>

Eu não me canço de repetir: “Sendo este um controle de servidor, o mesmo é criado como um objeto no momento  da compilação da página ASP.NET. Sendo um objeto temos acesso a suas propriedades e métodos.

Temos duas maneiras de definir os elementos da lista:

  • Utilizando a maneira tradicional, onde cada elemento é definido através de um conjunto de tags <option> Texto </option>, com uma tag para cada elemento da lista.
  • Utilizando a coleção Items, à qual podemos adicionar, dinamicamente através de programação, elementos do tipo options. Esta coleção é uma instância da classe ListItemCollection, a qual pertenco ao namespace System.Web.UI.WebControls. Esta classe possui métodos para adicionar e remover elementos, utilizando programação.

Vamos apresentar um exemplo.

Exemplo: Vamos criar um formulário onde temos três controles:

  • Uma lista com alguns nomes de cores. Ao lado desta lista temos um botão Aplicar. Ao clicar neste botão, a cor selecionada na lista será aplicada como cor de segundo plano de um controle do tipo texto existente no formulário.
  • Um campo onde o usuário pode adicionar uma cor à lista de cores. Ao lado deste campo temos um botão. Ao clicar neste botão a cor digitada no campo será adicionada a lista de cores. Para isso utilizaremos o evento Click deste botão.
  • Um campo onde exibimos um determinado texto e onde é aplicada a cor de segundo plano selecionada na lista de cores.

Na Listagem 7.7 Temos a página do exemplo proposto.

Listagem 7.7– Adicionando elementos dinamicamente a uma lista – chap7ex8.aspx.

<html>
<head>
<script language="C#"  runat="server">
void Aplicar_Click(object Source, EventArgs e) 
   {
        Span1.Style["background-color"] = ColorSelect.Value;
   }
void AdicionaALista_Click(object Source, EventArgs e) 
  {
       ColorSelect.Items.Add(Text1.Value);
   }
</script>
</head>
<body>
<h3><font face="Verdana">Exemplo de  lista dinâmica!</font></h3>
<form runat="server">
Selecione uma cor:<br>
<select id="ColorSelect"  runat="server">
             <option>SkyBlue</option>
             <option>LightGreen</option>
            <option>Gainsboro</option>
             <option>LemonChiffon</option>
</select>
<input type="button" runat="server"  Value="Aplicar" OnServerClick="Aplicar_Click">
<p> A cor desejada não está na lista?  Digite a cor desejada:<br>
<input type="text" id="Text1"  runat="server">
<input type="button" runat="server"  Value="AdicionaALista"  OnServerClick="AdicionaALista_Click">
<p>
<span id="Span1" runat="server">
           Clique no  botão Aplicar para definir a cor de segundo plano!
</span>
</form>
</body>
</html>

Digite o código da Listagem 7.7 e salve o mesmo em um arquivo chamado chap7ex8aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex8.aspx

Na lista de cores selecione SkyBlue e dê um clique no botão Aplicar. Observe que a cor de segundo plano do texto, no final do formulário, é alterada, conforme indicado na Figura 7.11.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.11 Alterando a cor de fundo usando uma lista - chap7ex8.aspx.

Agora vamos adicionar uma cor à lista. No campo para digitação de texto digite Red e dê um clique no botão AdicionaALista. Abra a lista e observe que a cor Red (vermelho) já faz parte das opções da Lista, conforme indicado na Figura 7.12.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.12 Elemento adicionado dinamicamente à lista.

Alguns comentários sobre o código da página chap7ex8.aspx.

  • Quando o usuário seleciona uma cor na lista de cores e clica no botão Aplicar, é disparado e evento Click do botão. Em resposta a este evento é executado o procedimento Aplicar_Click. Este procedimento utiliza a propriedade Style do controle Span1 para definir a cor de segundo plano como sendo a cor selecionada na lista de cores. O procedimento Aplicar_Click está indicado no trecho de código a seguir:
  void  Aplicar_Click(object Source, EventArgs e) 
       {
           Span1.Style["background-color"] = ColorSelect.Value;
       }

Nota: A propriedade Style é utilizada para definir aspectos visuais dos elementos, como cor da fonte, tamanho, negrito, itálico, etc. Existe uma definição para os vários atributos visuais possíveis de serem alterados. Estes atributos fazem parte das chamadas CSS – Cascading Style Sheets. Para maiores informações sobre CSS e uma referência completa sobre os diversos atributos disponíveis, consulte um dos seguintes  endereços: www.w3.org  ou www.wdsl.com.

  • Para adicionar um elemento à lista de cores, utilizamos o evento Click do botão AdicionaALista. Neste procedimento utilizamos o método Add da coleção Items da lista, conforme indicado no trecho de código a seguir:
       void  AdicionaALista_Click(object Source, EventArgs e) 
       {
           ColorSelect.Items.Add(Text1.Value);
       }

Passamos para o método Add,o valor digitado no campo Text1 do formulário: Text1.Value.

Vou repetir mais uma vez: Observe o quanto o modelo de programação para o ASP.NET se parece com a programação tradicional de aplicações Windows orientada a eventos.

HTMLAnchor control.

É utilizado para a criação de links em páginas ASP.NET. A funcionalidade é idêntica a tag <a> </a) do HTML. A diferença é que por ser um controle de servidor, o mesmo é processado pelo Framework .NET no servidor IIS, o que nos disponibiliza uma série de métodos e propriedades para o controle HtmlAnchor.

Sintaxe para o controle HtmlAnchor:

<a
    runat="server"
    id="identificação_no_código"
   href="enereço  absoluto ou relativo"
   name="nome  quando adicionado à lista de favoritos do navegador"
    OnServerClick="nome do procedimento a ser executado em resposta a  um click no link"
   target="abre  na mesma janela, em uma nova janela, em um frame da janela atual, etc"
   title="título  a ser exibido na janela de título do navegador"
Texto do link.
</a>

Vamos apresentar um exemplo simples.

Exemplo: Vamos criar um formulário com dois links. Um link aponta para a página chap7ex8.aspx e outro para a página chap7ex7.aspx.

Na Listagem 7.8 Temos a página do exemplo proposto.

Listagem 7.8– O controle HtmlAnchor – chap7ex9.aspx.

<%@ Import Namespace="System" %>
<html>
<script language="C#"  runat="server">
</script>
<body>
<H1>Selecione um dos links abaixo  !!! </H1>
<TABLE>
<TR>
              <TD>
                        <a href="chap7ex7.aspx"  runat="server" id="link1">
                        Exemplo  7 do Capítulo 7.
                        </a>
            </TD>
</TR>
<TR>
              <TD>
                        <a  href="chap7ex8.aspx" runat="server"  id="link2">
                        Exemplo  8 do Capítulo 7.
                        </a>
              </TD>
</TR>
</TABLE>
</body>

</html>

Digite o código da Listagem 7.8 e salve o mesmo em um arquivo chamado chap7ex9aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex9.aspx

Você obterá o resultado indicado na Figura 7.13.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.13 O controle HtmlAnchor – chap7ex9.aspx.

HtmlInputButton control.

É utilizado para a criação de um botão de comando em um formulário. O botão de comando normalmente é utilizado para enviar os dados do formulário para processamento. Já tivemos diversos exemplos de utilização deste controle. Para vê-lo em funcionamento, inclusive com código para responder ao evento Click do botão, consulte os seguintes exemplos deste capítulo:

  • chap7ex3.aspx
  • chap7ex4.aspx
  • chap7ex5.aspx
  • chap7ex8.aspx

Sintaxe para o controle HtmlInputButton:

<input
   type=button |  submit | reset
    runat="server"
    id="identificação_no_código"
    OnServerClick="nome do procedimento a ser executado em resposta ao  evento Click"
>

HtmlButton control.

É utilizado para a criação de botões de comandos mais sofisticados dos que os criados pelo controle HtmlInputButton. Com este controle temos acesso a uma série de métodos e eventos, os quais permitem a criação de alguns efeitos interessantes. Além do texto podemos associar uma determinada figura com o botão de comando.

Sintaxe para o controle HtmlButton:

<button
    runat="server"
    id="identificação_co_código"
    OnServerClick="procedimento a ser executado ao clicarmos no  botão"
texto ou image
</button>

Este elemento é bastante rico em funcionalidade. Podemos aplicar uma série de efeitos interessantes ao mesmo. Vamos criar um formulário, baseado em um exemplo da documentação do Framework .NET, onde temos dois controles HtmlButton. Vamos utilizar o evento Click de cada controle para informar quando um dos controles foi clicado. Também vamos utilizar a propriedade Style para definir algumas características visuais de cada controle. Em um dos controles além do texto, adicionaremos uma pequena imagem. A imagem está em um arquivo chamado seta.gif, o qual deve estar gravado na pasta Chap7. Para o segundo botão vamos aplicar um efeito onmouseover, ou seja, quando o usuário estiver com o mouse sobre alguma parte do botão, faremos com que a cor de segundo plano do botão seja modificada. Quando o mouse sair da área do botão, volta a cor de segundo plano original.

Na Listagem 7.9 Temos a página do exemplo proposto.

Listagem 7.9– O controle HtmlButton – chap7ex10.aspx.

<html>
<head>
    <script  language="C#" runat="server">
       void  Button1_OnClick(object Source, EventArgs e) 
       {
           Span1.InnerHtml="Você clicou no botão 1";
       }
       void  Button2_OnClick(object Source, EventArgs e) 
       {
           Span1.InnerHtml="Você clicou no botão 2";
       }
</script>
</head>
<body>
    <h3><font  face="Verdana">Exemplo do controle  HtmlButton!</font></h3>
    <form  runat="server">
    <font  face="Verdana" size="-1">
        <p>
        <button  id="Button1" 
                 OnServerClick="Button1_OnClick" 
                style="font: 8pt verdana;
                        background-color:lightgreen;
                        border-color:black;
                        height=30;
                        width:110" 
                 runat="server">
            <img  src="seta.gif"> Clique em mim!
         </button>
        Além do texto  temos uma figura no botão.
        <p>
        <p>
        <button  id=Button2 
                 OnServerClick="Button2_OnClick" 
                 style="font: 8pt verdana;
                        background-color:lightgreen;
                        border-color:black;
                        height=30;
                        width:110"
                 onmouseover="this.style.backgroundColor='yellow'"
                 onmouseout="this.style.backgroundColor='lightgreen'"
                runat="server">
            Clique em  mim!
         </button>
        Com efeito  onmouseover.
        <p>        
        <p>
         <b><span id=Span1 runat="server" /></b>
    </font>
    </form>
</body>
</html>

Digite o código da Listagem 7.9 e salve o mesmo em um arquivo chamado chap7ex10aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex10.aspx

Clique no primeiro botão. Observe que o texto “Você clicou no botão 1” é exibido. Agora passe o mouse sobre o segundo botão. Observe que a cor de fundo trocou para amarelo. Afaste o mouse do segundo botão. Observe que a cor de fundo voltou ao normal. Agora clique no segundo botão, o texto “Você clicou no botão 2” é exibido, conforme indicado na Figura 7.14.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.14 O controle HtmlButton – chap7ex10.aspx.

Alguns comentários sobre o exemplo.

  • Mais uma vez utilizamos o evento Click de cada botão para enviar uma mensagem informando qual o botão foi clicado.
  • A aparência dos botões foi definida através da sua propriedade style. Por exemplo, para o primeiro botão fizemos as seguintes definições:
style="font: 8pt verdana;
            background-color:lightgreen;
            border-color:black;
           height=30;
            width:110"

Observe que através da propriedade style podemos definir uma série de elementos visuais para o botão. Neste exemplo estamos definindo as seguintes propriedades:

font:                            tamanho e tipo da fonte.

background-color:      cor de segundo plano.

border-color:               cor das bordas do botão.

heigut:                                    altura do botão, em pixels.

width:                                     largura do botão, em pixels.

Nota: Para uma referência completa a todas as definições de estilo existentes, consulte www.w3.org ou www.wdvl.com.

  • Para o segundo botão, utilizamos os eventos onmouseover para definir uma cor diferente quando o mouse estiver sobre o botão e onmouseout para retornar a cor original, quando o mouse fosse afastado do botão, conforme indicado no trecho de código a seguir:
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='lightgreen'"

Importante! Algumas destas definições fazem parte do HTML 4.0 e somente funcionarão corretamente com o Internet Explorer 4.0 ou superior.

HtmlImage control.

É utilizado para Inserir figuras em uma página ASP.NET. A sua funcionalidade é idêntica a tag <img> da linguagem HTML,  com a diferença que, em sendo um controle de servidor, temos acesso a uma série de métodos e eventos do controle.

Sintaxe para o controle HtmlImage:

<img
    id="identificação_no_código"
   runat="server"
   alt="texto  exibido quando o usuário aponta o mouse para a imagem"
   align= top | middle  | bottom | left | right
   border="largura  da borda"
   height="altura  da imagem"
    src="localização da imagem"
   width="largura  da imagem"

Vamos a um exemplo adaptado da documentação do Framework .NET.

Exemplo: Vamos criar um formulário onde é exibida uma imagem. Também exibimos uma lista de seleção com nomes de outras imagens. Esta lista é criada utilizando o controle HtmlSelect explicado anteriormente. O usuário seleciona um nome de imagem na lista e clica no botão Aplicar. O evento Click do botão faz com que a imagem associada a opção selecionada na lista, seja exibida.

Na Listagem 7.10 Temos a página do exemplo proposto.

Listagem 7.10– O controle HtmlImage – chap7ex11.aspx.

<html>
<head>
<script language="C#"  runat="server">
       void  SubmitBtn_Click(Object Sender, EventArgs e) 
       {
           Image1.Src=Select1.Value;
       }
</script>
</head>
<body>
    <h3><font  face="Verdana">Exemplo do controle  HtmlImage!!!</font></h3>
    <form  runat="server">
        <img  ID="Image1" src="cereal1.gif" runat="server"/>
        <p>
        <p>
        Selecione a  Imagem a ser exibida e clique em Aplicar:
        <select  id="Select1" runat="server">
            <option  Value="Cereal1.gif">Healthy Grains</option>
            <option  Value="Cereal2.gif">Corn Flake Cereal</option>
            <option  Value="Cereal3.gif">U.F.O.S</option>
            <option  Value="Cereal4.gif">Oatey O's</option>
            <option  Value="Cereal5.gif">Strike</option>
            <option  Value="Cereal7.gif">Fruity Pops</option>
         </select>
        <p>
        <p>
<input type="submit" runat="server"  Value="Aplicar"   OnServerClick="SubmitBtn_Click">
    </form>
</body>
</html>

Digite o código da Listagem 7.10 e salve o mesmo em um arquivo chamado chap7ex11aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço:

http://localhost/chap7/chap7ex11.aspx

Será exibida a figura para o cereal “Healthy Grains”, conforme indicado  na Figura 7.15.

Curso Completo de ASP.NET - Júlio Battisti
Figura 7.15 O controle HtmlImage – chap7ex11.aspx.

Selecione uma outra opção na lista, por exemplo, selecione U.F.O.S e dê um clique no botão Aplicar. A figura correspondente será exibida.

Nota: Para que este exemplo funcione, as figuras devem estar na pasta Chapt7. Se as figuras estiverem em outra pastas, você precisa fornecer o caminho ao definir o valor da propriedade Src, do controle HtmlImage.

Alguns comentários sobre o exemplo.

  • Na seção de apresentação temos um formulário com três controles. Um controle para exibição da imagem, um para a criação da lista com as opções disponíveis e um botão de comando.
  • Utilizamos o evento Click do botão de comando para redefinir a propriedade Src do controle que exibe a imagem. A propriedade Src define o caminho para a imagem a ser exibida. Aqui temos mais um exemplo do poder dos controles de servidor, ou seja, conseguimos alterar suas propriedades através de código de programação. A evento Click para o botão de comando está indicado no trecho de código a seguir:
      void SubmitBtn_Click(Object Sender,  EventArgs e) 
       {
           Image1.Src=Select1.Value;
       }
  • Também é interessante observarmos o código que é retornado, como resultado do processamento da página. Por exemplo, quando você seleciona U.F.O.S e clica em aplicar a figura associada a opção U.F.O.S é exibida. Agora vamos dar uma olhada no código HTML que foi enviado pelo servidor, como resultado do processamento da página.

Para visualizar o código HTML correspondente, utilize o seguinte comando no Internet Explorer: Exibir -> Código fonte. Selecionando este comando será exibido o código a seguir:

<html>
<head>
</head>
<body>
    <h3><font  face="Verdana">Exemplo do controle  HtmlImage!!!</font></h3>
    <form  name="ctrl0" method="post" action="chap7ex11.aspx"  id="ctrl0">
<input type="hidden"  name="__VIEWSTATE"
value="dDwtMTkzMzU5NzEzMDt0PDtsPGk8Mj47PjtsPHQ8O2w8aTwxPjs+O2w8dDxwPGw8c3JjOz47bDxDZXJlYWwzLmdpZjs+Pjs7Pjs+Pjs+Pjs+"
/>
        <img  src="/chap7/Cereal3.gif" id="Image1" />
        <p>
        <p>
        Selecione a  Imagem a ser exibida e clique em Aplicar:
        <select  name="Select1" id="Select1">
            <option  value="Cereal1.gif">Healthy Grains</option>
            <option  value="Cereal2.gif">Corn Flake Cereal</option>
            <option  selected="selected"  value="Cereal3.gif">U.F.O.S</option>
            <option  value="Cereal4.gif">Oatey O's</option>
            <option  value="Cereal5.gif">Strike</option>
            <option  value="Cereal7.gif">Fruity Pops</option>
</select>
        <p>
        <p>
        <input  name="ctrl1" type="submit" value="Aplicar" />
    </form>
</body>
</html>

Nada de diferente, com exceção do seguinte elemento:

<input type="hidden"  name="__VIEWSTATE"
value="dDwtMTkzMzU5NzEzMDt0PDtsPGk8Mj47PjtsPHQ8O2w8aTwxPjs+O2w8dDxwPGw8c3JjOz47bDxDZXJlYWwzLmdpZjs+Pjs7Pjs+Pjs+Pjs+"
/>

Este é um campo oculto (type=”hidden”), o qual é utilizado para manter o estado dos controles do formulário entre uma chamada e outra da página. Para maiores informações sobre a manutenção de estado consulte os tópicos iniciais deste capítulo


Promoção: Livro Windows Server 2012 R2 e Active Directory - Curso Completo, 2100 Páginas. Tudo para você se tornar um administrador de redes altamente qualificado para o mercado de trabalho e levar a sua carreira para o próximo nível!

Promoção: Livro Windows Server 2012 R2 e Active Directory

Curso Completo, 2100 páginas. Tudo para você se tornar um administrador de redes altamente qualificado para o mercado de trabalho e levar a sua carreira para o próximo nível!


« Lição anterior Δ Página principal ¤ Capítulos Próxima lição »

Best Sellers de Programação do Julio Battisti

Todos com Vídeo Aulas, E-books ou Exemplos de Brinde!

Aprenda com Júlio Battisti: SQL Server 2008 R2

 

Autor: Júlio Battisti | Páginas: 1164 | Editora: Instituto Alpha

 

Macros e Programação VBA no Excel 2010

 

Autor: Júlio Battisti | Páginas: 1124 | Editora: Instituto Alpha

 

Access 2010 Avançado, Macros e Programação VBA - Passo a Passo

 

Autor: Júlio Battisti | Páginas: 828 | Editora: Instituto Alpha

 

 

Todos os livros com dezenas de horas de vídeo aulas de bônus, preço especial (alguns com 50% de desconto). Aproveite. São poucas unidades de cada livro e por tempo limitado.

Dúvidas?

Utilize a área de comentários a seguir.

Me ajude a divulgar este conteúdo gratuito!

Use a área de comentários a seguir, diga o que achou desta lição, o que está achando do curso.
Compartilhe no Facebook, no Google+, Twitter e Pinterest.

Indique para seus amigos. Quanto mais comentários forem feitos, mais lições serão publicadas.

Quer receber novidades e e-books gratuitos?
›››

Novidades e E-books grátis

Fique por dentro das novidades, lançamento de livros, cursos, e-books e vídeo-aulas, e receba ofertas de e-books e vídeo-aulas gratuitas para download.



Institucional

  • Quem somos
  • Garantia de Entrega
  • Formas de Pagamento
  • Contato
  • O Autor
  • Endereço

  • Júlio Battisti Livros e Cursos Ltda
  • CNPJ: 08.916.484/0001-25
  • Rua Vereador Ivo Cláudio Weigel, 537 Universitário
  • Santa Cruz do Sul/RS
  • CEP 96816-208
  • Todos os direitos reservados, Júlio Battisti 2001-2017 ®

    [LIVRO]: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2010 - PASSO-A-PASSO

    APRENDA COM JULIO BATTISTI - 1124 PÁGINAS: CLIQUE AQUI