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 075 - Capítulo 09 - Panel Web Server Control

Este controle funciona como um Container para outros controles, ao ser processado é gerada uma cláusula HTML - <DIV>. Utilizamos este controle quando precisamos adicionar controles á pagina, dinamicamente através de programação, ou quando precisamos ocultar e exibir um grupo de controles através do código de programação. Por exemplo, vamos supor que você queira que um conjunto de controles somente seja visível quando o valor de um determinado valor de uma caixa de combinação, seja selecionado. Neste caso você pode colocar os diversos controles em um controle Panel e tornar o controle Panel não visível. Quando um valor é selecionado na caixa de combinação, utilizamos um evento associado a esta seleção para detectar qual foi o valor selecionado. Dependendo do valor selecionado, podemos tornar True a propriedade Visible do controle Panel, com isso todos os controles que foram colocados no controle Panel, também serão exibidos.

NOTA: O controle Panel Web Server Control é derivado da classe base Panel, do namespace System.Web.UI.WebControls. Para uma referência completa à todas as propriedades e métodos deste controle, consulte a documentação do Framework .NET.

A sintaxe para este controle é a seguinte:

<asp:Panel

     id="Identificação_no_código"

     BackImageUrl="endereço da imagem de  segundo plano."

     HorizontalAlign="Center|Justify|Left|NotSet|Right"

      Wrap="True|False"

      runat="server">

   Outros controles que terão o controle Panel  como Container.

</asp:Panel>

Vamos analisar um exemplo retirado da documentação do Framework .NET. Neste exemplo é apresentado um formulário com os seguintes controles:

Um controle Panel, com uma linha de texto de conteúdo estático. Durante o processamento da página, mais especificamente, durante o evento Load da página, vamos adicionar controles à este Panel, utilizando programação.
Dois controles do tipo DrowpDownList (Caixa de Combinação). Em um controle o usuário seleciona o número de rótulos a serem inseridos no Panel (de 0 a 4 rótulos). Em outro controle o usuário seleciona o número de Caixas de texto a serem inseridas no Panel.
Um controle do tipo CheckBox que se estiver marcado faz com que o Panel seja ocultado, o que também oculta todos os controles adicionados ao Panel.

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

Listagem 9.6 – O controle Panel – chap9ex6.aspx.

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

<html>

<head>

     <script runat="server">

        void Page_Load(Object sender, EventArgs e) {

          // Exibe/Oculta o controle Panel.

          if  (Check1.Checked)

                               Panel1.Visible=false;

           else

                   Panel1.Visible=true;

          // Adiciona controles do tipo Label  ao controle Panel.

          int  numlabels = Int32.Parse(DropDown1.SelectedItem.Value);

           for (int i=1; i<=numlabels; i++)

                        // O nome da variável do  tipo Label é um ele (l) e não o número um (1).

                                   Label l = new Label();

             l.Text = "Rótulo " +  (i).ToString();

                                    l.ID = "Rótulo " + (i).ToString();

             Panel1.Controls.Add(l);

                                    Panel1.Controls.Add(new  LiteralControl("<br>"));

          // Adiciona controles do tipo Caixa  de Texto ao controle Panel.

         int  numtexts = Int32.Parse(DropDown2.SelectedItem.Value);

           for (int i=1; i<=numtexts; i++)

                                    TextBox t =  new TextBox();

             t.Text = "Caixa de Texto " +  (i).ToString();

              t.ID = "Caixa de Texto" + (i).ToString();

                                    Panel1.Controls.Add(t);

              Panel1.Controls.Add(new LiteralControl("<br>"));

     </script>

</head>

<body>

<h3><font  face="Verdana">Exemplo do controle Panel!!</font></h3>

<form runat=server>

        <asp:Panel id="Panel1" runat="server"

            BackColor="gainsboro"

             Height="200px"

            Width="400px"

              style="color:White;

                       background-color:Black;

                       border-color:Red;

                       border-width:6px;

                        border-style:Double;"

            Panel1: Conteúdo estático, definido  no próprio controle

<p>

        </asp:Panel>

       <p>Adicionar quantos rótulos?:

        <asp:DropDownList id=DropDown1 runat="server">

          <asp:ListItem  Value="0">0</asp:ListItem>

          <asp:ListItem  Value="1">1</asp:ListItem>

          <asp:ListItem  Value="2">2</asp:ListItem>

          <asp:ListItem  Value="3">3</asp:ListItem>

          <asp:ListItem  Value="4">4</asp:ListItem>

       </asp:DropDownList>

       <br>

       Adicionar quantas caixas de texto?:

        <asp:DropDownList id=DropDown2 runat="server">

          <asp:ListItem  Value="0">0</asp:ListItem>

          <asp:ListItem  Value="1">1</asp:ListItem>

          <asp:ListItem  Value="2">2</asp:ListItem>

          <asp:ListItem  Value="3">3</asp:ListItem>

          <asp:ListItem  Value="4">4</asp:ListItem>

       </asp:DropDownList>

<p>

        <asp:CheckBox id="Check1" Text="Ocultar o Painel"  runat="server"/>

<p>

        <asp:Button Text="Atualiar o Painel"  runat="server"/>

        </font>

</form>

</body>

</html>

Digite o código da Listagem 9.6 e salve o mesmo em um arquivo chamado chap9ex6.aspx, na pasta chap9, 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/chap9/chap9ex6.aspx

É carregado o formulário com o controle Panel, dois controles Caixa de Combinação e um controle do tipo CheckBox, além do botão enviar, evidentemente.Você vai obter o resultado indicado na Figura 9.8.

Curso Completo de ASP.NET - Júlio Battisti
Figura 9.8 Utilizando o controle Panel – chap9ex6.aspx.

Na lista “Adicionar quantos rótulos?”, selecione 3.

Na lista “Adicionar quantas caixas de texto?”, selecione 2.

Certifique-se que a opção “Ocultar Painel” esteja desmarcada.

Dê um clique no botão Enviar, você obterá os resultados indicados na Figura 9.9.

Curso Completo de ASP.NET - Júlio Battisti
Figura 9.9 Controles adicionados dinâmicamente, através do evento Load da página.

Agora marque a opção “Ocultar Painel” e dê um clique no botão Enviar. Observe que o controle Panel foi ocultado e também todos os controles a ele adicionados.

Alguns comentários sobre o código:

No início do procedimento Load, testamos se o controle Check1 foi selecionado. Em caso afirmativo, tornamos a propriedade Visible do controle Panel1 igual a False. Isso faz com que o controle Panel e todos os seus controles sejam ocultados.
Para adicionar o número de rótulos e o número de caixas de texto selecionados pelo usuário, utilizamos o evento Load da página.

O código para adicionar rótulos é o seguinte:

 int  numlabels = Int32.Parse(DropDown1.SelectedItem.Value);

           for (int i=1; i<=numlabels; i++)

              Label l = new Label();

             l.Text =  "Rótulo " + (i).ToString();

             l.ID = "Rótulo " +  (i).ToString();

             Panel1.Controls.Add(l);

              Panel1.Controls.Add(new LiteralControl("<br>"));

Em primeiro lugar declaramos e inicializamos uma variável numlabels, do tipo int. Atribuímos o valor selecionado na lista DropDown1 para a variável numlabels. Observe a utilização do método Parse, da estrutura Int32. Este método é utilizado para converter a String retornada pelo controle DropDown1, em um número Int32, equivalente.

Em seguida iniciamos um laço for. A cada passado do laço um controle l, do tipo Label é criado. Depois definimos as suas propriedades Rótulo e ID. Em seguida utilizamos o método Add, da coleção Controls, do controle Panel, para adicionar o rótulo recém criado – Panel1.Controls.Add(l). Para finalizar, utilizamos LiteralControl para enviar uma tag <br>, para fazer uma quebra de linha. Sem esta tag <br>, os rótulos seriam colocados um ao lado do outro e não um em cada linha.

As mesmas observações são válidas para a adição dos controles do tipo Caixa de texto.

Este exemplo saliente os recursos que temos a disposição, quando utilizamos os Web Server Controls. Observe que temos acesso a uma infinidade de métodos e propriedades, todas bem definidas e documentadas na documentação do Framework .NET, no item “.NET Framework Class Library.”