Controles ASP.NET: VerifiqueBox, botão de opção, listaBox, Caixa de texto, Rótulo
Jacó Lee
Adicionando controles ASP.Net a formulários da Web
ASP.Net tem a capacidade de adicionar controles a um formulário, como caixas de texto e rótulos.
Vejamos os outros controles disponíveis para formulários da Web e vejamos algumas de suas propriedades comuns.
Em nosso exemplo, criaremos um formulário que terá a seguinte funcionalidade.
- A capacidade do usuário inserir seu nome.
- Opção para escolher a cidade em que o usuário reside
- A capacidade do usuário inserir uma opção para o gênero.
- Opção de escolher o curso que o usuário deseja aprender. Haverá opções para ambos C# e ASP.Net
Vejamos cada controle em detalhes. Vamos adicioná-los para construir o formulário com a funcionalidade mencionada acima.
Passo 1) A primeira etapa é abrir o Forms Designer para o formulário web Demo. Depois de fazer isso, você poderá arrastar os controles da caixa de ferramentas para o Formulário da web.
Para abrir o formulário web do Designer,
- Clique com o botão direito no arquivo Demo.aspx no Solution Explorer e
- Escolha a opção de menu Exibir Designer.
Depois de executar a etapa acima, você poderá ver seu Form Designer conforme mostrado abaixo.
Agora vamos começar a adicionar nossos controles um por um
Controle de etiqueta
O controle rótulo é usado para exibir um texto ou mensagem ao usuário no formulário. O controle rótulo normalmente é usado junto com outros controles. Exemplos comuns são quando um rótulo é adicionado junto com o controle de caixa de texto. O rótulo dá uma indicação ao usuário sobre o que deve ser preenchido na caixa de texto. Vamos ver como podemos implementar isso com um exemplo mostrado abaixo. Usaremos um rótulo chamado 'nome'. Isso será usado em conjunto com os controles de caixa de texto, que serão adicionados na seção posterior.
Passo 1) A primeira etapa é arrastar o controle 'label' para o Web Form a partir da caixa de ferramentas, conforme mostrado abaixo.
Passo 2) Depois que o rótulo for adicionado, siga as etapas a seguir.
- Vá para a janela de propriedades clicando com o botão direito no controle de rótulo
- Escolha a opção de menu Propriedades
Passo 3) Na janela de propriedades, altere o nome da propriedade Text para Name
Da mesma forma, altere também o valor da propriedade ID do controle para lblName. Ao especificar um ID significativo para os controles, fica mais fácil acessá-los durante a fase de codificação. Isso é mostrado abaixo.
Depois de fazer as alterações acima, você verá a seguinte saída
Resultado:-
Você verá que o rótulo Nome aparece no formulário da Web.
Caixa de texto
Uma caixa de texto é usada para permitir que um usuário insira algum texto no aplicativo de formulário da Web. Vamos ver como podemos implementar isso com um exemplo mostrado abaixo. Adicionaremos uma caixa de texto ao formulário na qual o usuário poderá inserir seu nome.
Passo 1) A primeira etapa é arrastar o controle de caixa de texto para o formulário da Web a partir da caixa de ferramentas, conforme mostrado abaixo
Abaixo está como isso ficaria no designer de formulários quando o controle Textbox estivesse no formulário
Passo 2) Depois que a caixa de texto for adicionada, você deverá alterar a propriedade do ID.
- Vá para a janela de propriedades clicando com o botão direito no controle Textbox e
- Escolha as propriedades então
- Altere a propriedade id da caixa de texto para txtName.
Depois de fazer as alterações acima, você verá a seguinte saída.
Resultado:-
Caixa de listagem
Uma caixa de listagem é usada para mostrar uma lista de itens no formulário da Web. Vamos ver como podemos implementar isso com um exemplo mostrado abaixo. Adicionaremos uma caixa de listagem ao formulário para armazenar algumas localizações de cidades.
Passo 1) A primeira etapa é arrastar o controle da caixa de listagem para o Web Form a partir da caixa de ferramentas, conforme mostrado abaixo
Passo 2) Depois de arrastar a caixa de listagem para o formulário, um menu lateral separado aparecerá. Neste menu escolha o menu 'Editar Itens'.
Passo 3) Agora será apresentada uma caixa de diálogo na qual você pode adicionar os itens da lista à caixa de listagem.
- Clique no botão Adicionar para adicionar um item da lista.
- Dê um nome para o valor de texto do item da lista – No nosso caso, Mumbai. Repita as etapas 1 e 2 para adicionar itens de lista para Mangalore e Hyderabad.
- Clique no botão OK
Passo 4) Vá para a janela de propriedades e altere o valor da propriedade ID do controle para lstLocalização.
Depois de fazer as alterações acima, você verá a seguinte saída
Resultado:-
Na saída, você pode ver claramente que as caixas de listagem foram adicionadas ao formulário.
Radiobutton
Um botão de opção é usado para mostrar uma lista de itens entre os quais o usuário pode escolher um. Vamos ver como podemos implementar isso com um exemplo mostrado abaixo. Adicionaremos um botão de opção para uma opção masculina/feminina.
Passo 1) O primeiro passo é arrastar o controle 'radiobutton' para o Web Form a partir da caixa de ferramentas. (veja imagem abaixo). Certifique-se de adicionar 2 botões de opção, um para a opção 'Masculino' e outro para 'Feminino'.
Passo 2) Depois que o Radiobutton for adicionado, altere a propriedade 'texto'.
- Vá para a janela de propriedades clicando em 'Controle de botão de opção'.
- Altere a propriedade de texto do botão de opção para 'Masculino'.
- Repita a mesma etapa para alterá-lo para ‘Feminino’.
- Além disso, altere as propriedades de ID dos respectivos controles para rdMale e rdFemale.
Depois de fazer as alterações acima, você verá a seguinte saída
Resultado:-
Na saída, você pode ver claramente que o botão de opção foi adicionado ao formulário
Caixa de seleção
Uma caixa de seleção é usada para fornecer uma lista de opções nas quais o usuário pode escolher várias opções. Vamos ver como podemos implementar isso com um exemplo mostrado abaixo. Adicionaremos 2 caixas de seleção aos nossos formulários da Web. Essas caixas de seleção fornecerão uma opção ao usuário sobre se ele deseja aprender C# ou ASP.Net.
Passo 1) A primeira etapa é arrastar o controle da caixa de seleção para o formulário da Web a partir da caixa de ferramentas, conforme mostrado abaixo
Passo 2) Depois que as caixas de seleção forem adicionadas, altere a propriedade id da caixa de seleção para 'chkASP'.
- Vá para a janela de propriedades clicando no controle Checkbox.
- Altere as propriedades de ID dos respectivos controles para 'chkC' e 'chkASP'.
Além disso, altere a propriedade de texto do controle Checkbox para 'C#'. Faça o mesmo para o outro controle Checkbox e altere-o para 'ASP.Net'.
- Altere a propriedade ID da caixa de seleção para 'chkASP'
- Altere a propriedade ID da caixa de seleção para chkC
Depois de fazer as alterações acima, você verá a seguinte saída
Resultado:-
Na saída, você pode ver claramente que as caixas de seleção foram adicionadas ao formulário.
Botão
Um botão é usado para permitir ao usuário clicar em um botão que iniciaria o processamento do formulário. Vamos ver como podemos implementar isso com nosso exemplo atual, conforme mostrado abaixo. Adicionaremos um botão simples chamado botão 'Enviar'. Ele será usado para enviar todas as informações do formulário.
Passo 1) A primeira etapa é arrastar o controle de botão para o Web Form a partir da caixa de ferramentas, conforme mostrado abaixo
Passo 2) Depois que o botão for adicionado, vá para a janela de propriedades clicando no controle do botão. Altere a propriedade de texto do controle de botão para Enviar. Além disso, altere a propriedade ID do botão para 'btnSubmit'.
Depois de fazer as alterações acima, você verá a seguinte saída
Resultado:-
Na saída, você pode ver claramente que o botão foi adicionado ao formulário.
Manipulador de eventos em ASP.Net
Ao trabalhar com um formulário web, você pode adicionar eventos aos controles. Um evento é algo que acontece quando uma ação é executada. Provavelmente a ação mais comum é clicar em um botão em um formulário.
Em formulários da web, você pode adicionar código ao arquivo aspx.cs correspondente. Este código pode ser usado para realizar determinadas ações quando um botão é pressionado no formulário. Geralmente, esse é o evento mais comum em Web Forms. Vamos ver como podemos conseguir isso.
Vamos tornar isso simples. Basta adicionar um evento ao controle do botão para exibir o nome inserido pelo usuário. Vamos seguir as etapas abaixo para conseguir isso.
Passo 1) Primeiro você deve clicar duas vezes no botão no formulário da web. Isso abrirá o código do evento do botão no Visual Studio.
O evento btnSubmit_Click é adicionado automaticamente pelo Visual Studio quando você clica duas vezes no botão no designer de formulários da web.
Passo 2) Vamos agora adicionar código ao evento submit para exibir o valor da caixa de texto do nome e o local escolhido pelo usuário.
protected void btnSubmit_Click(object sender,EventArgs e)
{
Response.Write(txtName.Text + "</br>");
Response.Write(lstLocation.SelectedItem.Text + "</br>");
lblName.Visible = false;
txtName.Visible = false;
lstLocation.Visible = false;
chkC.Visible = false;
chkASP.Visible = false;
rdFemale.Visible = false;
btnSubmit.Visible = false;
}
Explicação do código: -
- A linha de código acima faz a coisa mais simples. Ele pega o valor do controle da caixa de texto Name e o envia ao cliente por meio do objeto Response. Portanto, se você quiser inserir a string “Guru99” na caixa de texto do nome, o valor de txtName. Um texto seria 'Guru99'.
- A próxima linha de código pega o valor selecionado da caixa de listagem através da propriedade 'lstLocation.SelectedItem.text'. Em seguida, ele grava esse valor por meio do método Response.Write de volta ao cliente.
- Finalmente, tornamos todos os controles do formulário invisíveis. Se não fizermos isso, todos os controles mais nossos valores de resposta serão exibidos juntos. Normalmente, quando uma pessoa insere todas as informações no formulário, como Nome, localização, Sexo, etc. deverá conter apenas as informações que não foram inseridas. O usuário não deseja ver os controles Nome, Sexo e localização novamente. Mas o ASP.Net não sabe disso e, portanto, por padrão, ele mostrará novamente todos os controles quando o usuário clicar no botão Enviar. Portanto, precisamos escrever código para garantir que todos os controles estejam ocultos para que o usuário veja apenas a saída desejada.
Depois de fazer as alterações acima, você verá a seguinte saída
Resultado:-
Na tela Saída, execute as seguintes etapas
- Dê o nome de Guru99 na caixa de texto do nome
- Escolha um local na caixa de listagem de Bangalore
- Clique no botão Enviar
Depois de fazer isso, você verá ‘Guru99’ e o local ‘Bangalore’ será exibido na página.
Resumo
- In ASP.Net, você pode adicionar controles padrão a um formulário, como rótulos, caixas de texto, caixas de listagem, etc.
- Cada controle pode ter um evento associado a ele. O evento mais comum é o evento de clique de botão. Isso é usado quando as informações precisam ser enviadas ao servidor web.
