Durante o desenvolvimento de uma página web, dependendo do que for necessário fazer, é preciso que o formulário contenha elementos que respondam e interajam de acordo com as necessidades previamente impostas pelo usuário como, por exemplo, num cadastro.

Para isso, é preciso ter em mente dois conceitos básicos do ASP .NET: Controles HTML e Web Server Controls.

Os Controles HTML são códigos com base na linguagem de marcação HTML, em que o navegador é responsável por interpretar e exibir para o usuário. Existem vários controles e alguns deles seguem abaixo:

  • Caixa de texto:
    <input type=”text”>
  • Área de texto:
     <textarea name=text></textarea>
  • Caixa de senha:
    <input type=”password”>
  • Caixa de seleção:
    <select name="teste"> <option value="teste">Teste</option></select>
  • Botões: Button:
    <input type="button">
    , Submit:
    <input type="submit" value="Enviar" /> 
    e Reset:
    <input type="reset" value="Cancelar" />
  • Botão de opção:
    <input type="radio" name="teste" value="teste"> Teste
  • Caixa de opções:
    <input type="checkbox" name="teste" value="Teste">

Já o Web Servers Controls, popularmente conhecido apenas como Server Controls, são códigos em forma de objetos a serem criados e interpretados por um servidor e exibidos para o usuário, só que no formato HTML quando a página é requisitada. Portanto, podem ser anteriormente já iniciados diretamente no sistema (os denominados estáticos) ou podem ser posteriormente criados de acordo com o modo em que o usuário impõe no sistema, de acordo com sua utilização, os chamados: Web Server Controls (denominados tempos de execução).

Conheça os melhores cursos de .NET da DevMedia agora mesmo!

Existem dois tipos de Server Controls: os comuns e os especializados. Os comuns são Label, TextBox, Button, CheckBox, RadioButton, dentre outros, e os especializados são Literal, Table, Image, ImageButton, ImageMap, Calendar, FileUpload, Panel, MultiView, View, Wizard.

Ciclo de vida de uma página ASP .NET

Dentre as várias características existentes em uma página ASP .NET, as que se mais se destacam são: a possibilidade de efetuar postback dentro da mesma página e a de efetuar controles que são executados pelo servidor.

Sempre quando a página ASP.NET for executada, há um ciclo vida onde persiste na página, entrando e percorrendo uma série de processamentos incluindo: inicialização, criação de instâncias de controles, manutenção e restauração de estado, execução dos eventos da página, processamento de código e renderização de controles. É essencial entender o ciclo de vida da página para que se saiba futuramente onde implementar o código numa fase apropriada do ciclo de vida para obter o efeito que deseja. Porém, ao desenvolver certos controles personalizados, é preciso que já tenha entendido como o ciclo de vida da página funciona, desde uma correta inicialização de controles até um preenchimento de propriedades de controles com exibição de dados executando quaisquer lógicas de comportamento dos controles.

Os Server Controls e os campos referentes a formulários que estão existentes em uma página ASP.NET podem ser executados no servidor e eles simplesmente emitem a página de volta a ela mesma realizando todos esses percursos e validações, exibindo e realizando as ações pertencentes a essa página.

Fases Iniciais do Projeto

Durante esse artigo será utilizado a versão do Microsoft Visual Studio 2010. Depois de visto os conceitos sobre Server Controls e sobre o ciclo de vida das páginas ASP.NET, será criado um projeto referente a um controle de Cartões de Créditos que consistirá em um formulário de inserção de dados básicos do usuário e também um de escolha da quantidade de cartões de créditos a serem utilizados posteriormente.

Após ter aberto o Microsoft Visual Studio, na barra de menus, selecione a opção (caso esteja em inglês): File → New → Project e selecione a opção ASP.NET Web Application, como mostra a Figura 1.

Tela de configuração para um New
Project (Novo Projeto)

Figura 1. Tela de configuração para um New Project (Novo Projeto).

É preciso colocar um Name (nome) para o projeto que, no nosso caso será ServerControl, definir uma Location (localização para o projeto onde será salvo) e um Solution name que, nesse caso, será o mesmo do Name. Feito isso, basta dar OK e a arquitetura será criada.

Observação: A opção para a versão da plataforma .NET Framework foi a versão 4. Dependendo da versão do Microsoft Visual Studio, por padrão, são criados alguns arquivos pré-definidos como MasterPage, Default.aspx ou até pastas inclusas com arquivos js ou CSS. Então se recomenda que excluam todos esses e só deixem as pastas Properties (que são as propriedades padrões do projeto) e References (onde constam as bibliotecas existentes no projeto) e também é obrigatório que não exclua o Web.config, pois é um arquivo de configuração de execução de projetos ASP.NET.

Agora será criado um arquivo do tipo Web Form, que é arquivo padrão para criação de páginas web. Os passos para a criação no Microsoft Visual Studio 2010 são:
1 - clicar com o botão direito em cima do projeto ServerControl,
2 - ir em Add e depois selecionar New Item. O nome para o arquivo Web Form será Cartoes_Credito.aspx. A hierarquia dos arquivos ficará igual com o que demonstra a Figura 2.

Hierarquia dos arquivos criados,
das pastas de propriedades e bibliotecas e também do arquivo padrão Web.config

Figura 2. Hierarquia dos arquivos criados, das pastas de propriedades e bibliotecas e também do arquivo padrão Web.config.

Página de Cartões de Créditos

Ao abrir o arquivo Cartoes_Credito.aspx, na parte de baixo existem três opções: Design, Split e Source. Dentro da opção Source (Fonte) será implementado os códigos HTML e ASP.NET descritos na Listagem 1.

Listagem 1. Códigos HTML e ASP .NET que ficarão responsáveis pela parte visual do formulário.


  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cartoes_Credito.aspx.cs" Inherits="ServerControl.Cartoes_Credito" %>
   
  <!DOCTYPE html>
   
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title></title>
  </head>
  <body>
      <form id="form1" runat="server">
      <div style="height: 500px">
      
          <strong>CADASTRO DE CARTÕES DE CRÉDITO</strong><br />
          <br />
          <asp:Panel ID="pnlTit" runat="server" GroupingText="Titular" Height="51px" 
              Font-Bold="False" Font-Names="Tahoma" Font-Size="Small">
                        <asp:Label 
                  ID="Label8" runat="server" Text="CPF: "></asp:Label>
   <asp:TextBox ID="TextBox8" runat="server" Width="160px" MaxLength="11"></asp:TextBox>
              <br />
                    
              <asp:Label ID="Label9" runat="server" Text="Nome: "></asp:Label>
               <asp:TextBox ID="TextBox9" runat="server" Width="350px"></asp:TextBox>
              <br />
                <asp:Label ID="Label10" runat="server" Text="Endereço: "></asp:Label>
   <asp:TextBox ID="TextBox10" runat="server" style="margin-left: 2px" Width="350px"></asp:TextBox>
              <br />
                    
              <asp:Label ID="Label11" runat="server" Text="Bairro: "></asp:Label>
               <asp:TextBox ID="TextBox11" runat="server" Width="171px"></asp:TextBox>
              <br />
                    <asp:Label ID="Label12" runat="server" Text="Cidade: "></asp:Label>
               <asp:TextBox ID="TextBox12" runat="server" style="margin-left: 0px" 
                  Width="168px"></asp:TextBox>
                      
              <asp:Label ID="Label13" runat="server" Text="Estado: "></asp:Label>
               <asp:TextBox ID="TextBox13" runat="server" Width="73px" MaxLength="2"></asp:TextBox>
              <br />
                       
              <asp:Label ID="Label14" runat="server" Text="CEP: "></asp:Label>
               <asp:TextBox ID="TextBox14" runat="server" Width="168px" MaxLength="8"></asp:TextBox>
              <br />
              <br />
          </asp:Panel>
          <br /><br /><br /><br /><br /><br /><br /><br />
          <asp:Panel ID="pnlObjetos" runat="server" GroupingText="Cartões de Crédito" 
              Font-Names="Verdana" Font-Size="Small">
          </asp:Panel>
          <br />
          <asp:Label ID="Label20" runat="server" Font-Names="Verdana" 
              Text="Selecione a quantidade de cartões" Font-Size="Small"></asp:Label>
          <br />
          <asp:RadioButtonList ID="rblAdCart" runat="server" RepeatDirection="Horizontal" 
              Font-Names="Tahoma" Font-Size="Small">
              <asp:ListItem>0</asp:ListItem>
              <asp:ListItem>1</asp:ListItem>
              <asp:ListItem>2</asp:ListItem>
              <asp:ListItem>3</asp:ListItem>
              <asp:ListItem>4</asp:ListItem>
              <asp:ListItem>5</asp:ListItem>
          </asp:RadioButtonList>
          <asp:Button ID="btnAdNCartao" runat="server" Text="[ Adicionar Quantidade ]" 
              Font-Bold="True" Font-Names="Courier New" Font-Size="Small" ForeColor="#000099" 
              onclick="btnAdNCartao_Click" />
          <br />
          <br />
          <asp:Button ID="btnGravar" 
              runat="server" Text="Gravar" Font-Bold="True" Font-Size="Medium" 
              ForeColor="#006600" onclick="btnGravar_Click" />
              
          <asp:Button ID="btnCancelar" 
              runat="server" Text="Cancelar" Font-Bold="True" Font-Size="Medium" 
              ForeColor="#CC3300" onclick="btnCancelar_Click" />
           
          <br /><br />
          <asp:Label ID="lblVal" runat="server" Text="-" Font-Names="Verdana"></asp:Label>
          <br />
          <asp:Label ID="lblValores" runat="server" Text="-" Font-Names="Verdana"></asp:Label>
          <br /><br /><br />
      </div>
      </form>
  </body>
  </html>

Por ser um formulário no formato HTML e ASP.NET, o mesmo contém elementos utilizando os dois aspectos, mas por padrão, na notação que está no topo do arquivo contém a linguagem de programação que usada que, nesse caso, será o C#, de acordo com o comando Page Language="C#" e juntamente para o chamado Code Behind que contém a referência para o arquivo Cartoes_Credito.aspx.cs.

Dentro das tags

<body><form id="form1" runat="server"></form></body>
temos todos os elementos dos formulários que serão interpretados pelo servidor, de acordo com a tag runat=”server”.

Há dois painéis declarados e o primeiro (pnlTit) contém os campos para a inserção de dados básicos do usuário: CPF, Nome, Endereço, Bairro, Cidade, Estado e CEP. Cada elemento tem sua largura (Width) e em alguns contém o máximo de caracteres permitidos (MaxLength) para serem inseridos na caixa de texto.

Já no segundo painel (pnlObjetos) apenas foi declarado um modo estrutural e seu design CSS sem campos ou informações na parte interior, a fim de ser utilizado posteriormente.

Além disso, contém um RadioButtonList (caixa de seleções) com o nome rblAdCart para que o usuário coloque o número de cartões de créditos a serem inseridos (de 0 a 5, mas você pode ser mais flexível com esse valor limite) e um botão para adicionar os cartões de acordo com a quantidade informada.

E por fim, são inseridos dois botões: o primeiro é o btnGravar para “gravar” todos os dados inseridos que estão dentro dos campos referentes ao primeiro painel (pnlTit) a serem mostrados para o primeiro Label: lblVal, os dados registrados no segundo painel (pnlObjetos) serão concatenados para o segundo Label lblValores; e o segundo botão btnCancelar usado para “cancelar”, apagando todos os dois labels, retirando o valor que está selecionado na caixa de seleções RadioButtonList e limpando os objetos do segundo painel.

Após isso, selecione a opção Design que está no canto inferior do projeto, e aperte F7, ou com o botão direito vá para a opção View Code, ou se preferir ainda, é só dar duplo clique em cima do arquivo Cartoes_Credito.aspx.cs. Coloque o seguinte código que está descrito na Listagem 2.

Listagem 2. Arquivo Cartoes_Credito.aspx.cs e seus métodos onde possam fazer parte todas as funcionalidades da página.


  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
   
  namespace ServerControl
  {
      public partial class Cartoes_Credito : System.Web.UI.Page
      {
          protected void Page_PreInit(object sender, EventArgs e)
          {
              if (!string.IsNullOrEmpty(Request.Form["rblAdCart"]))
              {
                  int qtd = int.Parse(Request.Form["rblAdCart"]);
                  for (int i = 1; i <= qtd; i++)
                  {
                      Label lblaux = new Label
                      {
                          ID = "lblaux" + i.ToString(),
                          Text = "<br/>Cartão número: "+i.ToString()
                      };
                      Label lbl = new Label
                      {
                          ID = "lbl" +i.ToString(),
                          Text = "<br/>Nome: "
                      };
                      TextBox txt = new TextBox
                      {
                          ID = "txt" + i.ToString(),
                          Columns = 50,
                      };
                      Label lbl1 = new Label
                      {
                          ID = "lbl1" + i.ToString(),
                          Text = "<br/>Dt. Nascimento: "
                      };
                      TextBox txt1 = new TextBox
                      {
                          ID = "txt1" + i.ToString(),
                          Columns = 10,
                          MaxLength = 10
                      };
                      Label lbl2 = new Label
                      {
                          ID = "lbl2" + i.ToString(),
                          Text = "<br/>Tipo: "
                      };
                      RadioButtonList rbl = new RadioButtonList();
                      rbl.ID = "rblID" + i.ToString();
                      rbl.RepeatDirection = RepeatDirection.Horizontal;
                      rbl.Items.Add(new ListItem("Conjuge", "1"));
                      rbl.Items.Add(new ListItem("Filho", "2"));
                      rbl.Items.Add(new ListItem("Pai", "3"));
                      rbl.Items.Add(new ListItem("Mãe", "4"));
                      rbl.Items.Add(new ListItem("Outro", "5"));
                      pnlObjetos.Controls.Add(lblaux);
                      pnlObjetos.Controls.Add(lbl);
                      pnlObjetos.Controls.Add(txt);
                      pnlObjetos.Controls.Add(lbl1);
                      pnlObjetos.Controls.Add(txt1);
                      pnlObjetos.Controls.Add(lbl2);
                      pnlObjetos.Controls.Add(rbl);
                  }
              }
          }
          protected void Page_Load(object sender, EventArgs e)
          {
              lblVal.Text = "";
              lblValores.Text = "";
          }
   
          protected void btnAdNCartao_Click(object sender, EventArgs e)
          {
          }
   
          protected void btnGravar_Click(object sender, EventArgs e)
          {
              lblVal.Text = "";
              foreach (Control c in pnlTit.Controls)
              {
                  if (c.GetType().FullName == "System.Web.UI.WebControls.Label")
                  {
                      Label l = c as Label;
                      lblVal.Text += l.Text;
                  }
                  if (c.GetType().FullName == "System.Web.UI.WebControls.TextBox")
                  {
                      TextBox aux = c as TextBox;
                      lblVal.Text += aux.Text + "<br/>";
                  }
              }
              lblValores.Text = "";
              foreach (Control c in pnlObjetos.Controls)
              {
                  if (c.GetType().FullName == "System.Web.UI.WebControls.Label")
                  {
                      Label l = c as Label;
                      lblValores.Text += l.Text;
                  }
                  if (c.GetType().FullName == "System.Web.UI.WebControls.TextBox")
                  {
                      TextBox aux1 = c as TextBox;
                      lblValores.Text += aux1.Text;
                  }
                  if (c.GetType().FullName == "System.Web.UI.WebControls.RadioButtonList")
                  {
                      RadioButtonList rbl = c as RadioButtonList;
                      lblValores.Text += rbl.SelectedItem + "<br/><br/>";
                  }
              }
          }
   
          protected void btnCancelar_Click(object sender, EventArgs e)
          {
              pnlObjetos.Controls.Clear();
              rblAdCart.SelectedIndex = -1;
              lblVal.Text = "";
              lblValores.Text = "";
          }
      }
  }

Primeiramente, é preciso entender as diferenças entre os eventos Page_PreInit e Page_Load.

O evento Page_PreInit é o momento ideal para definir a aparência dos elementos na tela e serve para uma redefinição de como os objetos ainda não renderizados serão tratados antes da inicialização da página. Esse evento é utilizado para fazer uma verificação para ver se a propriedade postback está sendo executada primeira vez, definir uma página dinamicamente, ler ou definir propriedades e seus valores e criar ou recriar controles dinâmicos.

Entretanto, o evento Page_Load tem finalidade para que quando existir algum um código dentro desse evento, sua chamada é executada através de um evento tipo como base que foi clicado ou carregado dentro de acordo com algum controle, logo a ação é executada. E por fim o conteúdo da página é devolvido para o navegador e a página é destruída. Esse evento é utilizado para chamar o método OnLoad (padrão de carregamento da página, usado para definir propriedades controles e conexões com banco de dados) até que todos os seus elementos sejam carregados para a página.

As using(s) foram declaradas automaticamente a criação do projeto, por serem padrões das bibliotecas do sistema, e elas ficarão desse mesmo jeito.

O namespace se refere ao nome do projeto no qual o arquivo está sendo referenciado, que no caso é ServerControl.

A classe Cartoes_Credito que é do tipo partial e foi criada automaticamente tem como da using declarada anteriormente System.Web.UI.Page, que é padrão para interface de páginas web.

Dentro do evento Page_PreInit contém a seguinte condição: if(!string.IsNullOrEmpty(Request.Form["rblAdCart"])). Isso quer dizer que se existir um valor e for diferente de nulo ou não estiver vazio para o RadioButtonList “rblAdCart”, então será iniciado um laço de repetição “for” que vai de 1 até a quantidade referente ao índice da posição clicada no RadioButtonList e, com isso, serão criados os objetos sempre com o ID acrescentando o valor da atual posição do índice concatenados com + i.ToString(), que serve para que o mesmo ID não se repita no decorrer da renderização.

Em seguida, serão criados dois labels um com o ID de lblaux e o texto Cartão com o número concatenando com a atual posição do índice e o outro label com o ID de lbl e o texto para que o usuário insira o Nome.

Depois será criado um TextBox com o ID de txt que ficará responsável por receber os dados do Nome.

Logo após são criados um Label com o ID lbl1 e um TextBox com o ID txt1 para que o usuário digite a Data de Nascimento.

E por fim é criado um Label com o ID lbl2 e um RadioButtonList (caixa de seleções) com o ID rbl, que serve para o usuário selecionar uma dessas opções: Cônjuge, Filho, Pai, Mãe ou Outro. Para finalizar, todos esses objetos serão anexados dentro de um painel, e o comando pnlObjetos.Controls.Add() é responsável por fazer esse acréscimo.

Dentro do evento Page_Load serão definidos os valores para os dois labels lblVal e lblValores, porque posteriormente, quando a página for carregada, eles ficarão vazios.

No evento click do botão btnAdNCartao_Click não existem códigos porque isso prova que já foi predefinido o seu evento dentro do Page_PreInit.

O evento do botão btnGravar_Click fica responsável por receber os valores contidos dentro do formulário para serem passados diretamente aos labels lblVal e lblValores, onde o lblVal serve para receber os dados referentes ao painel pnlTit (painel de inserção dos dados pessoais), fazendo uma aferição se existem objetos do tipo Label e TextBox, concatenando seus valores ao lblVal; e o lblValores fica responsável por receber os dados referentes ao painel pnlObjetos (painel de inserção de informações dos cartões de créditos), fazendo uma aferição se existem objetos do tipo Label, TextBox e RadioButtonList, concatenando seus valores ao lblValores.

O evento click do botão btnCancelar_Click fica responsável por limpar o conteúdo do painel pnlObjetos, tirar a seleção do RadioButtonList rblAdCart e também por limpar os conteúdos dos Labels lblVal e lblValores.

E para finalizar, basta salvar o projeto e depois dar CTRL + F5 para executar o projeto), ou se preferir clique com o botão direito em cima da Web Form Cartoes_Credito.aspx (localizada no Solution Explorer) e após clique na opção View in Browser.

Após ter executado a página, o resultado será o mesmo que o apresentado na Figura 3.

Projeto sendo executado no
navegador Internet Explorer

Figura 3. Projeto sendo executado no navegador Internet Explorer.

Para testar a funcionalidade da página e dos Server Controls, basta inserir os dados nos campos indicados no painel Titular, informando a quantidade de cartões. Em seguida, clique no no botão “Adicionar Quantidade” onde, dependendo da quantidade informada, vão aparecer novos campos dentro do painel Cartões de Crédito para serem inseridos. Em seguida, clique no botão Gravar que os dados aparecerão em forma de Labels. Para que os dados desses Labels, da caixa de seleção da quantidade e do painel Cartões de Crédito sejam limpos, basta clicar no botão Cancelar. Testando a página, a mesma ficará como mostra a Figura 4.

Testando a página web: Cartoes_Credito.aspx

Figura 4. Testando a página web: Cartoes_Credito.aspx.