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:o ID: nome do objeto associado ao componente.o 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!).

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.

oText: 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 primeiro deve ser chamado de txtNome (ID).o O segundo deve ser chamdo de txtSenha (ID).o 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 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.

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:o ID: mesmo que nos outros controles.o 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.

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 Enabled: elemento habilitado ou

não;o Selected: indica se o elemento é

marcado (true) ou não (false) por default.

o Text: o texto associado ao elemento.o 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:o Pode mostrar mais de uma opção por vez, com uma

barra de rolagem.o Permite a seleção múltipla de elementos.

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:o CheckBox: controle equivalente ao Input Checkbox

do HTML.o CheckBoxList: controle que integra diversos

checkboxes em um único componente.• Estes componentes suportam, apesar de não

ser o caso geral de uso, a propriedade AutoPostBack.

Checkbox em Asp.Net

• Propriedades de Checkbox:o 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.

Checkbox em Asp.Net

• O controle CheckBoxList é mais parecido com o controle ListBox no modo de seleção múltipla.

• Propriedades importantes:o ID: mesmo que nos outros controles.o Items: coleção de opções da lista. o 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 Text: o texto associado ao item (exibido no HTML).o 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 Casao Trabalhoo 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 checkboxif(!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 listint 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;elselb2.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 RadioButton: equivalente direto ao radio do HTML.o 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:o 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.

RadioButton em Asp.Net

• Propriedades de RadioButtonList:o ID: mesmo que nos outros controles.o AutoPostBack.o Items: coleção de opções da lista.o SelectedItem: o ítem selecionado.o 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 Carroo Ônibuso Aviãoo 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 buttonsif(rb1.Checked)lb1.Text = "O usuário é homem.";else if(rb2.Checked)lb1.Text = "O usuário é mulher.";elselb1.Text = "O usuário não informou o seu sexo.";// Testa o grupo de radio buttonsif(rblist.SelectedIndex >= 0)lb2.Text = "O meio de transporte favorito do usuário é: " + rblist.SelectedItem.Text;elselb2.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 Add: adiciona um TableRowo Clear: elimina todas as linhaso 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 Add: adiciona uma TableCello Clear: elimina todas as célulaso Remove: elimina uma célula.

Tabelas em Asp.Net

• Proriedades importantes de TableCell:o 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.

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 antigastab.Rows.Clear();// Agora, adiciona as linhas e colunasfor(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.