Exemplos de código
• WebForm1.aspx:
o
Caixa de Texto (TextBox) e Label (Label);
• Listas.aspx:
o
Caixa de Listagem Simples (DropDownList), Caixa de Listagem Múltipla
(ListBox);
• TestaMarcadores.aspx:
o
Caixa de Checagem (CheckBox), Lista de caixas de checagem (CheckBoxList);
• TestaRadio.aspx:
o
Botão de Rádio (RadioButton), Lista de botões de rádio (RadioButtonList).
• Tabela.aspx:
o
Tabela HTML (Table);
• TesteExpressoesRegulares.aspx
Controle WebForm – TextBox
• Caixa de entrada de texto.
• Substitui o Input Text e o Text Area do HTML;
• Exemplo:
o
<asp:TextBox id=“txtNome” AutopostBack=“false” Text=“Olá mundo”
TextMode=“Single | Multiline | Password”
OnTextChange=“OnTextChangeMethod” runat=“server”/>
• Propriedades importantes:
ID: nome do objeto associado ao componente.
TextMode: indica se o controle é do tipo texto (SingleLine - <input
type=‘text’>), senha (Password - <input type=‘password’>) ou com
múltiplas linhas (MultiLine - <textarea>).
o Text: o texto digitado no controle;
o AutoPostBack: boolean que indica se após a mudança do texto a
validação será chamada automaticamente (recarrega a página!).
o
o
Controle WebForm – Button
• Fornece a funcionalidade de um botão.
• Ao contrário de HTML comum, não existe o conceito
do botão submit.
• Cada botão recebe em código a sua funcionalidade.
• Propriedades importantes:
o
ID:
 o nome do objeto associado ao controle.
o
CausesValidation:
 indica se o botão invoca o procedimento de validação no servidor.
Controle WebForm – Label
• Elementos utilizados para indicar textos
dinâmicos no HTML a partir de código C#
externo;
• Semelhante ao div do HTML;
• Propriedades importantes:
o ID: nome do objeto associado ao
componente.
o Text: o texto associado ao controle.
Projeto Exemplo
• Formulário Nome e Senha (WebForm1.aspx):
Projeto Exemplo
• Atenção! Siga os passos seguintes para
recriar o Projeto Exemplo!
• Crie um projeto novo no Visual Studio
(usaremos este projeto mais tarde, então
guarde-o).
• Crie um novo WebForm ou utilize o que já está
disponível no próprio projeto
(WebForm1.aspx).
Projeto Exemplo
• Para utilizar o layout normal de HTML, primeiro
clique na área do formulário.
• Em seguida, no menu Layout > Position,
selecione o layout que preferir.
Projeto Exemplo
• Em seguida, digite os textos da página.
• Insira os TextBox nos lugares apropriados e
mude as propriedades:
o
o
o
O primeiro deve ser chamado de txtNome (ID).
O segundo deve ser chamdo de txtSenha (ID).
O segundo ainda deve ser selecionado com o estilo
de senha.
Projeto Exemplo
• Insira os botões, chamando-os de enviar e
limpa.
• Modifique os textos dos botões para indicar a
sua funcionalidade.
• Insira os dois labels para indicar a saída.
• Dê a estes os nomes labelNome e
labelSenha.
• Modifique os textos dos labels.
Projeto Exemplo
• Em seguida, crie os métodos associados aos
botões:
O botão Enviar deve processar os valores e colocálos nos labels associados.
o O botão Limpar deve apagar os dados nos
componentes digitáveis.
o Para criar cada método, basta clicar com o mouse
duas vezes sobre o componente.
o
Projeto Exemplo
• Código para copiar os dados das entradas
para os labels:
labelNome.Text = "Nome digitado: " +
txtNome.Text;
labelSenha.Text = "Senha digitada: " +
txtSenha.Text;
Projeto Exemplo
• Código para limpar os campos:
txtNome.Text = "";
txtSenha.Text = "";
labelNome.Text = "Nome digitado: ";
labelSenha.Text = "Senha digitada: ";
Controle WebForm – DropDownList
• Comando que oferece uma lista drop down.
• O usuário faz uma seleção de várias
disponíveis.
• As opções ficam escondidas até o usuário
selecionar o campo, tornando visíveis as
opções para seleção.
Controle WebForm – DropDownList
• Propriedades importantes do DropDownList:
ID: mesmo que nos outros controles.
AutoPostBack: indica se o servidor é invocado
automaticamente quando o elemento é modificado.
o Items: coleção de opções da lista.
o SelectedItem: o ítem selecionado.
o SelectedIndex: índice do elemento selecionado na
lista.
o
o
Controle WebForm – DropDownList
• Ao adicionar um elemento, podemos
ordená-lo em conjunto com os já
presentes.
• Também podemos fornecer
informações referentes ao elemento
do DropDownList (ver Propriedade
Items):
o
o
o
o
Enabled: elemento habilitado ou
não;
Selected: indica se o elemento é
marcado (true) ou não (false) por
default.
Text: o texto associado ao elemento.
Value: o valor associado ao elemento.
Controle WebForm – DropDownList
• O controle permite a inclusão de itens em duas
formas distintas:
1.Estaticamente: via Visual Studio.
2.Dinâmicamente: via código (utilizando o método
Add).
Projeto Exemplo 2
• Crie um novo formulário no seu projeto.
• Formate o projeto para utilizar o flow layout.
• Em seguida, adicione um controle
DropDownList.
• Modifique o identificador para lista1.
Projeto Exemplo 2
• Para adicionar opções na lista, basta
selecioná-la e nas propriedades, ir em Items.
• Clique nos três pontos ao lado da propriedade.
Projeto Exemplo 2
• Isto irá fornecer um diálogo para a inclusão de
itens:
Projeto Exemplo 2
• Insira na lista as opções “Carro”, “Ônibus” e
“Motociceta”, associadas, aos valores “C”, “O”
e “M”, respectivamente.
• Modifique a propriedade AutoPostBack para
True.
Projeto Exemplo 2
• Insira um label para indicar a opção
selecionada, atribuindo a este o id
labelSelecionado.
• Em seguida, clique duas vezes para criar o
método que é invocado toda vez que o
controle for modificado.
Projeto Exemplo 2
•
Código do método:
switch(lista1.SelectedItem.Value)
{
case "C":
labelSelecionado.Text = "O carro foi selecionado.";
break;
case "O":
labelSelecionado.Text = "O ônibus foi selecionado.";
break;
case "M":
labelSelecionado.Text = "A motocicleta foi selecionada.";
break;
default:
labelSelecionado.Text = "Nada foi selecionado.";
break;
}
Controle WebForm –ListBox
• Controle bastante parecido com o
DropDownList.
• Diferenças:
Pode mostrar mais de uma opção por vez, com uma
barra de rolagem.
o Permite a seleção múltipla de elementos.
o
Controle WebForm –ListBox
• No caso de controle com seleção múltipla,
devemos verificar um a um os elementos
marcados.
• Isto é feito através da propriedade Items da
lista.
• A propriedade Items é um vetor, assim possui
a propriedade Count que indica o número de
elementos existem na lista e o iterador [ ] para
acessar um elemento.
Controle WebForm –ListBox
• Assim, podemos acessar os elementos um a
um e verificar se eles estão selecionados
(propriedade Selected).
• Se selecionados, podemos acessar o seu valor
através de Value.
Projeto Exemplo 3
• Modifique o formulário anterior para incluir uma
Listbox chamada lista2.
• Adicione um segundo label, chamado
labelSelecionado2.
• Adicione os itens “Escola”, “Casa” e “Parque” à
nova lista.
• Deixe os valores iguais aos nomes dos itens.
Projeto Exemplo 3
• Em seguida, permita o AutoPostBack nesta
lista e crie o método associado à alteração da
lista.
• Imprima no label as opções selecionadas.
Projeto Exemplo 3
• Código do evento:
String texto = "Itens selecionados: ";
for(int i=0;i<lista2.Items.Count;i++)
if(lista2.Items[i].Selected)
texto += lista2.Items[i].Value;
labelSelecionado2.Text = texto;
Checkbox em Asp.Net
• Disponíveis em duas formas:
CheckBox: controle equivalente ao Input Checkbox
do HTML.
o CheckBoxList: controle que integra diversos
checkboxes em um único componente.
o
• Estes componentes suportam, apesar de não
ser o caso geral de uso, a propriedade
AutoPostBack.
Checkbox em Asp.Net
• Propriedades de Checkbox:
ID: nome do objeto associado ao controle no code
behind.
o Text: o texto HTML associado ao controle.
o Checked: booleano que indica se o controle está ou
não selecionado.
o
Checkbox em Asp.Net
• O controle CheckBoxList é mais parecido com
o controle ListBox no modo de seleção
múltipla.
• Propriedades importantes:
o
o
o
ID: mesmo que nos outros controles.
Items: coleção de opções da lista.
RepeatColumns: número de colunas para fazer o
layout do componente.
Checkbox em Asp.Net
• Como no caso do ListBox, podemos colocar
itens manualmente na IDE do VisualStudio, ou
diretamente na propriedade Item do controle
via código:
• Ex:
checklist.Item.Add(new Item(“Texto do
Item”, “Valor”));
Checkbox em Asp.Net
• Todos os componentes que trabalham com
uma coleção de items possuem um par de
propriedades para cada item:
o
o
Text: o texto associado ao item (exibido no HTML).
Value: o valor (string) do item. Pode ser usado em
comparações.
Projeto Exemplo 4
• Como nos anteriores, iremos utilizar o
controles WebForms.
• Assim, evite utilizar como componentes os
HTML Controls.
• Crie um projeto para testar os componentes
discutidos.
Projeto Exemplo
• Adicione dois CheckBox, com o ID cb1 e cb2,
associados aos textos “Parque” e “Escola”,
respectivamente.
• Adicione um CheckBoxList com os itens:
o
o
o
Casa
Trabalho
Shopping
Projeto Exemplo
• Adicione um botão, associando-o ao texto
“Envia” e com o ID “envia”.
• Adicione dois labels com o ID lb1 e lb2.
• Adicione o código de clique no botão envia,
implementando a lógica para indicar em lb1 as
opções selecionadas em cb1/cb2 e em lb2 as
opções selecionada no cblist.
Projeto Exemplo
•
Código do evento (parte 1):
String texto;
// Processa os checkbox
if(!cb1.Checked && !cb2.Checked)
lb1.Text = "Selecione alguma opção na primeira lista.";
else
{
texto = "Opções selecionadas na primeira lista:";
if(cb1.Checked)
texto+=" Parque";
if(cb2.Checked)
texto+=" Escola";
lb1.Text = texto;
}
Projeto Exemplo
•
Código do evento (parte final):
// Processa o checkbox list
int count = 0;
texto = "Opções selecionadas na primeira lista:";
for(int i=0;i<cblist.Items.Count;i++)
if(cblist.Items[i].Selected)
{
texto+= " "+cblist.Items[i].Text;
count++;
}
if(count != 0)
lb2.Text = texto;
else
lb2.Text = "Selecione alguma opção na segunda lista.";
RadioButton em Asp.Net
• Como o checkbox HTML, o radiobutton é representado
no Asp.Net por dois componentes diferentes:
o
o
RadioButton: equivalente direto ao radio do HTML.
RadioButtonList: similar ao CheckBoxList, fornece uma
lista de radio buttons, porém permite a seleção de um único
elemento.
• Estes componentes suportam, apesar de não ser o
caso geral de uso, a propriedade AutoPostBack.
RadioButton em Asp.Net
• Propriedades de RadioButton:
ID: nome do objeto associado ao controle no code
behind.
o Text: o texto HTML associado ao controle.
o Checked: booleano que indica se o controle está ou
não selecionado.
o GroupName: nome do grupo ao qual o radio button
pertence. Apenas um radio do grupo pode estar
selecionado.
o
RadioButton em Asp.Net
• Propriedades de RadioButtonList:
o
o
o
o
o
ID: mesmo que nos outros controles.
AutoPostBack.
Items: coleção de opções da lista.
SelectedItem: o ítem selecionado.
SelectedIndex: índice do elemento selecionado na
lista.
RadioButton em Asp.Net
• É possível acessar cada elemento da lista de Items
como no CheckBoxList, porém como há apenas um
elemento selecionado, temos disponível qual item está
selecionado.
• Quando há um item selecionado, a propriedade
SelectedIndex é maior ou igual a 0.
• Quando não há item selecionado, ela é igual a -1.
• Isto vale tanto para RadioButtonList como para
DropDownList.
Projeto Exemplo
• Crie um novo formulário no projeto para testar
os componentes discutidos.
• Para executar a aplicação e ter este formulário
como o principal, basta na árvore de arquivos
do Visual Studio clicar com o botão direito do
mouse neste novo formulário e indicá-lo como
a página inicial.
Projeto Exemplo
• Adicione dois RadioButton, com o ID rb1 e rb2,
associados aos textos “Masculino” e “Feminino”,
respectivamente. Ambos devem pertencer ao
GroupoName Sexo.
• Adicione um RadioButtonList com os itens:
o
o
o
o
Carro
Ônibus
Avião
Trem
• O procedimento para adicionar itens é idêntico ao
exercício anterior.
Projeto Exemplo
• Adicione um botão, associando-o ao texto
“Envia” e com o ID “envia”.
• Adicione dois labels com o ID lb1 e lb2.
• Adicione o código de clique no botão envia,
implementando a lógica para indicar em lb1 as
opções selecionadas em rb1/rb2 e em lb2 as
opções selecionada no rblist.
Projeto Exemplo
•
Código do evento:
// Testa os radio buttons
if(rb1.Checked)
lb1.Text = "O usuário é homem.";
else if(rb2.Checked)
lb1.Text = "O usuário é mulher.";
else
lb1.Text = "O usuário não informou o seu sexo.";
// Testa o grupo de radio buttons
if(rblist.SelectedIndex >= 0)
lb2.Text = "O meio de transporte favorito do usuário é: " +
rblist.SelectedItem.Text;
else
lb2.Text = "O usuário não informou o seu meio de transporte favorito.";
Tabelas em Asp.Net
• Podemos criar tabelas via código em Asp.Net.
• Isto é bastante prático do ponto de vista de
programação, já que a tabela em si é um
elemento de código ativo.
• A tabela é dividida em três níveis hierárquicos.
Tabelas em Asp.Net
• O primeiro é a classe Table, que cria a tabela
em si.
• A tabela é composta por linhas, representadas
pela classe TableRow.
• Enfim, cada linha é composta por um conjunto
de células, da classe TableCell.
Tabelas em Asp.Net
• Rows é a propriedade mais importante da
Table. É o vetor de TableRows, as linhas em si.
• Métodos importantes de Rows:
o
o
o
Add: adiciona um TableRow
Clear: elimina todas as linhas
Remove: elimina uma linha.
Tabelas em Asp.Net
• Cells é a propriedade importante de
TableRows. É a coleção de células da linha.
• Métodos importantes de Rows:
o
o
o
Add: adiciona uma TableCell
Clear: elimina todas as células
Remove: elimina uma célula.
Tabelas em Asp.Net
• Proriedades importantes de TableCell:
BackColor: cor de fundo (baseado na enumeração
Color).
o ForeColor: cor do texto (também baseado na
enumeração Color).
o Width: largura, baseada na classe Unit.
o Text: o texto associado à célula.
o
Projeto Exemplo
• Crie um formulário novo, chamado de Tabela.
• Neste formulário, insira dois DropDownList,
com o identificador linha e coluna.
• Preencha-os com os valores de 1 a 5 (Items).
• Ative o evento de AutoPostBack de ambos.
Projeto Exemplo
• Insira uma tabela vazia, com o ID tab.
• Crie o método associado ao evento da troca de valor
dos DropDownList.
• No código, recupere os valores selecionados em
ambas as listas.
• Modifique a tabela para que tenha o número de linhas
e colunas indicados pelos DropDownList.
• Cada célula deve indicar o número de sua linha e
coluna.
Projeto Exemplo
• Evento da troca dos dropdownlist:
int lin = linhas.SelectedIndex+1;
int col = colunas.SelectedIndex+1;
ajustaTabela(lin, col);
Projeto Exemplo
• Método ajustaTabela:
private void ajustaTabela(int linhas, int colunas)
{
// Primeiramente, elimina todas as linhas e colunas antigas
tab.Rows.Clear();
// Agora, adiciona as linhas e colunas
for(int i=0;i<linhas;i++)
{
tab.Rows.Add(new TableRow());
tab.Rows[i].BorderStyle= BorderStyle.Solid;
tab.Rows[i].BorderWidth=Unit.Pixel(2);
tab.Rows[i].BorderColor=Color.Black;
Projeto Exemplo
for(int j=0;j<colunas;j++)
{
tab.Rows[i].Cells.Add(new TableCell());
tab.Rows[i].Cells[j].BackColor=Color.Aquamarine;
tab.Rows[i].Cells[j].Width=Unit.Pixel(50);
tab.Rows[i].Cells[j].ForeColor = Color.Black;
tab.Rows[i].Cells[j].Text = "("+i+","+j+")";
}
}
}
Projeto Exemplo
• O código pode ser otimizado, passando a
leitura de coluna e linha para dentro de
ajustaTabela.