A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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.

Apresentações semelhantes


Apresentação em tema: "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."— Transcrição da apresentação:

1 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

2 Controle WebForm – TextBox Caixa de entrada de texto. Substitui o Input Text e o Text Area do HTML; Exemplo: o Propriedades importantes: o ID: nome do objeto associado ao componente. o TextMode: indica se o controle é do tipo texto (SingleLine - ), senha (Password - ) ou com múltiplas linhas (MultiLine - ). 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!).

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

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

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

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

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

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

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

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

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

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

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

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: o Text: o texto associado ao item (exibido no HTML). o 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: o Casa o Trabalho o 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

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

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

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

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: o Carro o Ônibus o Avião 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; else 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: o Add: adiciona um TableRow o Clear: elimina todas as linhas o 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: o Add: adiciona uma TableCell o Clear: elimina todas as células o Remove: elimina uma célula.

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

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

56 Projeto Exemplo for(int j=0;j

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


Carregar ppt "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."

Apresentações semelhantes


Anúncios Google