Exemplos de código WebForm1.aspx: Listas.aspx: TestaMarcadores.aspx:

Apresentação em tema: "Exemplos de código WebForm1.aspx: Listas.aspx: TestaMarcadores.aspx:"— Transcrição da apresentação:

1 Exemplos de código WebForm1.aspx: Listas.aspx: TestaMarcadores.aspx:
Caixa de Texto (TextBox) e Label (Label); Listas.aspx: Caixa de Listagem Simples (DropDownList), Caixa de Listagem Múltipla (ListBox); TestaMarcadores.aspx: Caixa de Checagem (CheckBox), Lista de caixas de checagem (CheckBoxList); TestaRadio.aspx: Botão de Rádio (RadioButton), Lista de botões de rádio (RadioButtonList). Tabela.aspx: Tabela HTML (Table); TesteExpressoesRegulares.aspx

2 Controle WebForm – TextBox
Caixa de entrada de texto. Substitui o Input Text e o Text Area do HTML; Exemplo: <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>). Text: o texto digitado no controle; AutoPostBack: boolean que indica se após a mudança do texto a validação será chamada automaticamente (recarrega a página!).

3 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: ID: o nome do objeto associado ao controle. CausesValidation: indica se o botão invoca o procedimento de validação no servidor.

4 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: ID: nome do objeto associado ao componente. Text: o texto associado ao controle.

5 Formulário Nome e Senha (WebForm1.aspx):
Projeto Exemplo Formulário Nome e Senha (WebForm1.aspx):

6 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).

7 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.

8 Projeto Exemplo Em seguida, digite os textos da página.
Insira os TextBox nos lugares apropriados e mude as propriedades: 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.

9 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.

10 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 botão Limpar deve apagar os dados nos componentes digitáveis. Para criar cada método, basta clicar com o mouse duas vezes sobre o componente.

11 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;

12 Projeto Exemplo Código para limpar os campos: txtNome.Text = "";
txtSenha.Text = ""; labelNome.Text = "Nome digitado: "; labelSenha.Text = "Senha digitada: ";

13 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.

14 Controle WebForm – DropDownList
Propriedades importantes do DropDownList: ID: mesmo que nos outros controles. AutoPostBack: indica se o servidor é invocado automaticamente quando o elemento é modificado. Items: coleção de opções da lista. SelectedItem: o ítem selecionado. SelectedIndex: índice do elemento selecionado na lista.

15 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): 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.

16 Controle WebForm – DropDownList
O controle permite a inclusão de itens em duas formas distintas: Estaticamente: via Visual Studio. Dinâmicamente: via código (utilizando o método Add).

17 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.

18 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.

19 Isto irá fornecer um diálogo para a inclusão de itens:
Projeto Exemplo 2 Isto irá fornecer um diálogo para a inclusão de itens:

20 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.

21 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.

22 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."; case "M": labelSelecionado.Text = "A motocicleta foi selecionada."; default: labelSelecionado.Text = "Nada foi selecionado."; }

23 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. Permite a seleção múltipla de elementos.

24 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.

25 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.

26 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.

27 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.

28 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;

29 Checkbox em Asp.Net Disponíveis em duas formas:
CheckBox: controle equivalente ao Input Checkbox do HTML. 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.

30 Checkbox em Asp.Net Propriedades de Checkbox:
ID: nome do objeto associado ao controle no code behind. Text: o texto HTML associado ao controle. Checked: booleano que indica se o controle está ou não selecionado.

31 Checkbox em Asp.Net O controle CheckBoxList é mais parecido com o controle ListBox no modo de seleção múltipla. Propriedades importantes: 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.

32 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”));

33 Checkbox em Asp.Net Todos os componentes que trabalham com uma coleção de items possuem um par de propriedades para cada item: Text: o texto associado ao item (exibido no HTML). Value: o valor (string) do item. Pode ser usado em comparações.

34 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.

35 Projeto Exemplo Adicione dois CheckBox, com o ID cb1 e cb2, associados aos textos “Parque” e “Escola”, respectivamente. Adicione um CheckBoxList com os itens: Casa Trabalho Shopping

36 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.

37 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; }

38 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.";

39 RadioButton em Asp.Net Como o checkbox HTML, o radiobutton é representado no Asp.Net por dois componentes diferentes: 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.

40 RadioButton em Asp.Net Propriedades de RadioButton:
ID: nome do objeto associado ao controle no code behind. Text: o texto HTML associado ao controle. Checked: booleano que indica se o controle está ou não selecionado. GroupName: nome do grupo ao qual o radio button pertence. Apenas um radio do grupo pode estar selecionado.

41 RadioButton em Asp.Net Propriedades de RadioButtonList:
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.

42 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.

43 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.

44 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: Carro Ônibus Avião Trem O procedimento para adicionar itens é idêntico ao exercício anterior.

45 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.

46 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; lb2.Text = "O usuário não informou o seu meio de transporte favorito.";

47 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.

48 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.

49 Tabelas em Asp.Net Rows é a propriedade mais importante da Table. É o vetor de TableRows, as linhas em si. Métodos importantes de Rows: Add: adiciona um TableRow Clear: elimina todas as linhas Remove: elimina uma linha.

50 Tabelas em Asp.Net Cells é a propriedade importante de TableRows. É a coleção de células da linha. Métodos importantes de Rows: Add: adiciona uma TableCell Clear: elimina todas as células Remove: elimina uma célula.

51 Tabelas em Asp.Net Proriedades importantes de TableCell:
BackColor: cor de fundo (baseado na enumeração Color). ForeColor: cor do texto (também baseado na enumeração Color). Width: largura, baseada na classe Unit. Text: o texto associado à célula.

52 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.

53 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.

54 Projeto Exemplo Evento da troca dos dropdownlist:
int lin = linhas.SelectedIndex+1; int col = colunas.SelectedIndex+1; ajustaTabela(lin, col);

55 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;

56 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+")"; }

57 Projeto Exemplo O código pode ser otimizado, passando a leitura de coluna e linha para dentro de ajustaTabela.