Exemplos de código WebForm1.aspx: o Caixa de Texto (TextBox) e Label (Label); Listas.aspx: o Caixa...
Transcript of Exemplos de código WebForm1.aspx: o Caixa de Texto (TextBox) e Label (Label); Listas.aspx: o Caixa...
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.