Componentes Básicos Controles ASP.NET – Menu Standard – Parte 1

Olá pessoal, nesta série de três artigos veremos os conceitos e exemplos práticos dos controles da aba Standard, do ASP.NET. Acompanhem:

PS: para todos os artigos que faço, uso o ASP.NET 3.5 com o Visual Studio 2008 Professional SP1, mais nada os impedem de usar outras versões.

Vá em File > New > WebSite (SHIFT + ALT + N), escolha a linguagem C#, dê o nome de ControlesAspNetStandard e clique em Ok, como mostra a imagem:

Renomeie o nome da Default.aspx para Standard01-03.aspx (como são muitos controles, iremos criar uma aspx para cada artigo) e vá ao modo Design da página para começarmos a inserir os controles. Vamos a eles:

Label – Ao lado do TextBox e do Button, é um dos controles mais usados em ASP.NET. No arquivo aspx, que é o arquivo em que inserimos todo o design de nossa página e, nesse caso, as tags para denominar os controles do ASP.NET, o Label é representado como mostra a imagem abaixo:

<asp:Label ID="lblLabel" runat="server">Labelasp:Label>

Nunca podemos nos esquecer de usar o atributo runat=”server”, que indica que este controle será executado no servidor, seja o servidor do seu PC ou mesmo da Web.

Importante também usar o atributo ID, para o identificarmos quando aplicarmos um código ao mesmo. Usamos o Label para escrever qualquer tipo de texto, tendo a opção de aplicar diversos tipos de formatações, como a imagem abaixo nos sugere:

TextBox – O TextBox, que como o próprio nome diz, são as famosas caixas de texto. Podemos usá-las de três modos diferentes: no modo SingleLine, que é o modo padrão, usado para campos de texto comuns, no modo Multiline, usado geralmente em campos de observações, por exemplo, que nos permite digitar uma quantidade maior e mais descritiva. Podemos usar também o modo Password, exemplo de campos de senha. Para alterarmos o modo que o TextBox irá se comportar, é só alterarmos a propriedade TextMode, como a imagem abaixo nos mostra:

No aspx, o TextBox é representado dessa forma:

<asp:TextBox ID="txtTexto" runat="server" TextMode="MultiLine">asp:TextBox>

Adicione ao seu form, um TextBox, um Button e um Label, como mostra a imagem abaixo:

Altere os respectivos ID’s para: txtTexto, btnBotao e lblLabel. Agora dê dois cliques no botão para ir a página de códigos no evento do btnBotao. Insira o seguinte código:

protected void btnBotao_Click(object sender, EventArgs e)

    {

        lblLabel.Text = txtTexto.Text;

    }

Com este simples código, quando digitarmos algo na caixa de texto e clicarmos no botão, o conteúdo digitado aparecerá no label. Exemplo apenas para vermos o funcionamento dos 3 controles. Agora compile sua aplicação, apertando F5, como é a primeira vez que fazemos isso na aplicação, aparecerá uma mensagem perguntando se você deseja modificar a Web.Config para permitir a compilação do projeto. Clique em OK e aguarde.

Após compilado, digite um texto qualquer no TextBox e clique no Botão, deverá aparecer um resultado como o da imagem abaixo:

O Button é usado no aspx com a seguinte tag:

<asp:Button ID="btnBotao" runat="server" />

LinkButton – O LinkButton nada mais é do que um simples Label com um link que nos redireciona pra outra página. A tag dela no aspx é a seguinte:

<asp:LinkButton ID="lnkButton" runat="server">Linkasp:LinkButton>

ImageButton – Como o próprio nome diz, o ImageButton é uma imagem, que ao mesmo tempo é também um botão. Sua tag no aspx é a seguinte:

<asp:ImageButton ID="imgButton" runat="server" />

HyperLink – O HyperLink é quase igual ao LinkButton, a diferença é que o Hyperlink, como o próprio nome sugere, redireciona para uma url da Web, já o LinkButton é usado para “linkar” com outras páginas de sua aplicação. Sua tag no aspx é a seguinte:

<asp:HyperLink ID="hlkButton" runat="server">HyperLinkasp:HyperLink>

Para que este exemplo funcione, crie uma página, pode dar o nome a ela de Default.aspx.

Agora insira os três controles que acabamos de descrever e dê os nomes no ID de lnkButton, imgButton e hlkButton. No atributo Text do LinkButton, insira a mensagem: Clique aqui para ir a Default.aspx. Já no Text do HyperLink, insira a mensagem: Clique aqui para ir ao site do Google.

No LinkButton adicione a propriedade PostBackUrl, como mostrada abaixo para que, ao clicarmos nele, sejamos redirecionados para a Default.aspx:

<asp:LinkButton ID="lnkButton" runat="server" PostBackUrl="~/Default.aspx">Clique aqui para ir a Default.aspx!asp:LinkButton>

No HyperLink adicione a propriedade NavigateUrl, como mostrada abaixo para que, ao clicarmos nele, sejamos redirecionados para a página do Google:

<asp:HyperLink ID="hlkButton" runat="server" NavigateUrl="http://www.google.com.br">Clique aqui para ir ao site do Google!asp:HyperLink>

Insira também uma imagem qualquer de seu PC no projeto. Para isso é simples, é só arrastar a imagem para o projeto. Agora adicione a propriedade ImageUrl no ImageButton, passando o nome de sua imagem, com largura e altura pré-definidas:

<asp:ImageButton ID="imgButton" runat="server" ImageUrl="~/Play.png" Width="25" Height="25" />

Lembre-se de substituir o nome da imagem acima pelo nome da sua imagem.

Salve e compile o projeto. Clique nos links e veja os resultados.

DropDownList – O DropDownList é um controle parecido com o TextBox, mais com a diferença que ele armazena uma lista de opções, que podem ser inseridas manualmente, por meio da propriedade Items, ou podem vir de uma fonte de dados, como uma tabela do SQL Server, por exemplo. Sua tag no aspx é a seguinte:

<asp:DropDownList ID="DropDownList1" runat="server">

        asp:DropDownList>

ListBox – O ListBox é uma lista de itens, que, a exemplo do DropDownList podem ser inseridas manualmente, por meio da propriedade Items, ou podem vir por meio de uma fonte de dados. Entre suas propriedades, temos a SelectionMode, em que podemos escolher se queremos selecionar uma ou várias opções, por meio dos valores Single ou Multiple. Sua tag no aspx é a seguinte:

<asp:ListBox ID="ListBox1" runat="server">

            <asp:ListItem>Item 01asp:ListItem>

            <asp:ListItem>Item 02asp:ListItem>

            <asp:ListItem>Item 03asp:ListItem>

            <asp:ListItem>Item 04asp:ListItem>

            <asp:ListItem>Item 05asp:ListItem>

        asp:ListBox>

CheckBox – O CheckBox são as famosas caixas de seleção, onde podemos escolher uma ou várias opções pré-definidas por nós e nomeadas por meio da propriedade Text. Outra propriedade que merece destaque é a Checked. Quando a mesma está com o valor True, nosso CheckBox já vem checado. No aspx sua tag é a seguinte:

<asp:CheckBox ID="CheckBox1" runat="server" Text="Opção" />

CheckBoxList – Temos também o CheckBoxList que, como o próprio nome sugere, é uma lista em que podemos armazenar diversos checkboxes, por meio da tag ListItem, representada logo abaixo:

<asp:CheckBoxList ID="CheckBoxList1" runat="server">

            <asp:ListItem Selected="True">Opção 01asp:ListItem>

            <asp:ListItem>Opção 02asp:ListItem>

            <asp:ListItem Selected="True">Opção 03asp:ListItem>

            <asp:ListItem>Opção 04asp:ListItem>

            <asp:ListItem Selected="True">Opção 05asp:ListItem>

        asp:CheckBoxList>

Perceba que temos a propriedade Selected, equivalente à Checked do CheckBox simples, tendo o mesmo resultado, checando ou não um valor.

Insira os controles descritos em sua página e também um Button, dando a eles os seguintes ID’s: ddlCursos, chkModulo, chkModulo2, chkFormaPagamento, lstEscolhas e btnConfirmar.

Sua página deverá ficar desta forma:

Neste exemplo simples, iremos escolher uma das opções do DropDownList, escolher as opções do CheckBox e do CheckBoxList e clicar no Confirmar. Ao clicar neste botão as opções escolhidas irão para o ListBox. Para fazer isso vá ao código e crie o seguinte método:

private void PopulaListBox()

    {

        try

        {

            //Verifico qual opção foi selecionada no DropDownList e adiciono no ListBox com o método Add

            if (ddlCursos.SelectedIndex == 0)

            {

                lstEscolhas.Items.Add("ASP.NET");

            }

            else if (ddlCursos.SelectedIndex == 1)

            {

                lstEscolhas.Items.Add("C#");

            }

            else

            {

                lstEscolhas.Items.Add("SQL Server");

            }

            //Verifico quais opções foram checadas no CheckBox e adiciono no ListBox

            if (chkModulo.Checked == true)

            {

                lstEscolhas.Items.Add("Módulo I");

            }

            if (chkModulo2.Checked == true)

            {

                lstEscolhas.Items.Add("Módulo II");

            }

            //Faço um foreach para "varrer" somente as opções que foram checadas e adicionar no ListBox

            foreach (ListItem item in chkFormaPagamento.Items)

            {

                if (item.Selected == true)

                {

                    lstEscolhas.Items.Add(item.Text);

                }

            }

        }

        catch (Exception ex)

        {

            throw new Exception(ex.Message);

        }

    }

Agora chame este método no evento Click do botão Confirmar (para chamar o evento é só ir ao modo Design e dar dois cliques no botão):

protected void btnConfirmar_Click(object sender, EventArgs e)

    {

        PopulaListBox();

    }

Agora salve, compile seu projeto e faça o teste:

Perceba que somente os valores que estão checados e o que foi selecionado no DropDownList que foram para o ListBox.

Assim finalizo o artigo.

Quaisquer dúvidas mandem emails para wellingtonbalbo@gmail.com ou deixem nos comentários deste artigo que responderei o mais breve possível.

Na próxima parte iremos ver mais 10 controles da aba Standard, aguardem!

Até o próximo artigo!