Olá pessoal, nesta parte veremos os conceitos e exemplos práticos de mais 10 controles da aba Standard, do ASP.NET. Acompanhem:
Abra a solução ControlesAspNetStandard criada anteriormente e crie uma nova página, dando o nome a ela de Standard02-03.aspx e dê OK:
Como feito anteriormente veremos os conceitos dos controles, seguidos de exemplos práticos:
RadioButton – O RadioButton é um controle muito usado, que representa uma opção que o usuário clica ou não, ou seja, o estado dele sempre será ou clicado (True) ou não clicado (False), isso dependendo da ação do usuário no momento da execução da aplicação. A tag deste controle no aspx é a seguinte:
<asp:RadioButton ID="rbtOpcao" runat="server" />
RadioButtonList – O RadioButtonList é o mesmo tipo de controle explicado anteriormente, mais em uma lista, ou seja, são vários botões, cada um tendo um valor e sofrendo uma ação (True ou False) de acordo com o clique ou não do usuário. No aspx, o RadioButtonList é representado dessa forma:
<asp:RadioButtonList ID="rblOpcoes" runat="server">
<asp:ListItem>Opção 1asp:ListItem>
<asp:ListItem>Opção 2asp:ListItem>
<asp:ListItem>Opção 3asp:ListItem>
<asp:ListItem>Opção 4asp:ListItem>
<asp:ListItem>Opção 5asp:ListItem>
asp:RadioButtonList>
Image – O Image, como o próprio nome diz, é um controle que nos permite inserir uma imagem em nossa aplicação. Entre suas propriedades destaco a DescriptionURL, que nos redireciona para outra página quando clicado em cima da imagem, e a ToolTip, que nos permite colocar um texto de ajuda ao usuário no momento em que o mesmo passar o mouse sobre a imagem. Sua tag no aspx é esta:
<asp:Image ID="imgImagem" ImageUrl="~/Play.png" Width="25" Height="25" runat="server" />
Como você pode perceber, com a propriedade ImageUrl, posso indicar o caminho em que está localizada a imagem que quero representar na página.
Vamos fazer um exemplo: adicione a página criada anteriormente o controle RadioButtonList, um Image e arraste para sua solução uma imagem, ficando assim com duas no projeto. Faremos com que, ao clicar em uma determinada opção, apareça uma imagem específica, ao clicar em outra opção, apareça mais uma imagem e ao clicar na terceira opção as duas imagens irão desaparecer.
Para isso, configure o RadioButtonList no aspx desta forma:
<asp:RadioButtonList ID="rblOpcoes" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="rblOpcoes_SelectedIndexChanged">
<asp:ListItem Value="0">Imagem 1 vísivelasp:ListItem>
<asp:ListItem Value="1">Imagem 2 vísivelasp:ListItem>
<asp:ListItem Value="2">Nenhuma imagem vísivelasp:ListItem>
asp:RadioButtonList>
Reparem que declarei o atributo AutoPostBack como true, ou seja, ao clicar em qualquer uma das três opções a página sofrerá uma atualização (conhecido também como PostBack). Chamei também o evento SelectedIndexChanged, que é acionado a cada momento em que uma opção é checada.
Para acioná-lo em nossa página de códigos, vá ao modo Design, clique no RadioButtonList, vá em Propriedades (aperte F4), clique em Events (sinal parecido com um raio) e dê dois cliques no evento SelectedIndexChanged, como a imagem abaixo ilustra:
Você será redirecionado diretamente à página de códigos dentro do evento clicado. Volte para a aspx e, no modo Source, configure o controle Image:
<asp:Image ID="imgImagem" Visible="false" Width="25" Height="25" runat="server" />
Note que usei o atributo Visible com o valor false, ou seja, ao ser iniciado nossa aplicação a imagem não irá aparecer, somente após alguma opção ser clicada pelo usuário. Para fazermos isso, vá à página de códigos e, no evento chamado anteriormente, faça a seguinte verificação:
protected void rblOpcoes_SelectedIndexChanged(object sender, EventArgs e)
{
if (rblOpcoes.SelectedValue == "0")
{
imgImagem.Visible = true;
imgImagem.ImageUrl = @"~/Add.png";
}
else if (rblOpcoes.SelectedValue == "1")
{
imgImagem.Visible = true;
imgImagem.ImageUrl = @"~/Play.png";
}
else
{
imgImagem.Visible = false;
}
}
Assim, é verificado qual value foi selecionada, qual opção foi clicada, se for a 1ª uma imagem aparece, se for a 2ª outra aparece, e se for a 3ª não aparece imagem alguma.
Salve o projeto, compile e faça o teste:
ImageMap – Basicamente o ImageMap é um controle que permite que se trabalhe com regiões delimitadas definidas por coordenadas X e Y dentro de uma imagem. Para saber mais sobre este controle e ver um exemplo prático de uso, clique aqui. A tag dela no aspx é a seguinte:
<asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack">
asp:ImageMap>
Table – O Table nada mais são que as tabelas muito usadas em HTML, só que a diferença é que esta é em ASP.NET. Sua tag no aspx é a seguinte:
<asp:Table ID="tbTable" runat="server">
<asp:TableRow ID="trRow" runat="server">
<asp:TableCell ID="tcCell" runat="server">Célulaasp:TableCell>
asp:TableRow>
asp:Table>
É recomendado o uso da tabela em modo HTML, para evitar processamento desnecessário do servidor, já que de qualquer forma será enviada ao servidor a tabela em formato HTML. Fonte: Fórum da MSDN.
A tag para as tabelas em HTML é a seguinte:
<table>
<tr>
<td>
Célula
td>
tr>
table>
BulletedList – O BulletedList é basicamente uma lista de itens que são formatados com marcadores (igual os marcadores do Word) e que podem ser alterados do seu gosto. Ele é bem parecido com outros controles como o DropDownList, CheckBoxList e RadioButtonList por exemplo, pois armazena diversos itens que podem ser inseridos manualmente ou ter como fonte de dados um banco de dados específico. Mais sobre este controle aqui. Sua tag no aspx é a seguinte:
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem>Item 1asp:ListItem>
<asp:ListItem>Item 2asp:ListItem>
<asp:ListItem>Item 3asp:ListItem>
asp:BulletedList>
HiddenField – O HiddenField, como o próprio nome diz, é um controle oculto ao usuário. Usamos ele quando desejamos armazenar informações pertinentes somente à aplicação, como configurações específicas de um determinado usuário, por exemplo. Sua tag no aspx é a seguinte:
<asp:HiddenField ID="HiddenField1" runat="server" Visible="false" />
Literal – O controle Literal é uma das opções que temos para adicionar conteúdo em nossa aplicação. Com ele adicionamos conteúdo dinamicamente na página. Diferente do Label, por exemplo, o Literal não permite que sejam adicionadas formatações a ele com estilos. Em contrapartida definimos o conteúdo do controle programaticamente. Veja alguns exemplos práticos deste controle aqui. Sua tag no aspx é a seguinte:
<asp:Literal ID="Literal1" runat="server">asp:Literal>
Calendar – O Calendar é um controle que nos exibe um calendário simples, que pode ser personalizado melhorando seu estilo, contendo diversas propriedades de formatações. Entre elas temos a DayStyle, a OtherMonthStyle e SelectedDayStyle só pra ficar nessas três. Sua tag no aspx é a seguinte:
<asp:Calendar ID="Calendar1" runat="server">asp:Calendar>
AdRotator – O AdRotator é um componente muito interessante, pois com ele podemos adicionar diversas imagens, sendo cada uma um banner por exemplo e fazer com que, a cada PostBack que a página sofra, apareça uma imagem diferente na página. Sua tag no aspx é a seguinte:
<asp:AdRotator ID="AdRotator1" runat="server" />
Clicando aqui você vê um artigo com um exemplo prático do AdRotator em ação.
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 3ª parte veremos os últimos 9 controles da aba Standard, aguardem!
Até o próximo artigo!
