Controles ASP.NET: VerifiqueBox, botão de opção, listaBox

Adicionando controles ASP.Net a formulários da Web

O ASP.Net tem a capacidade de adicionar controles a um formulário, como caixas de texto e rótulos.

Vamos analisar os outros controles disponíveis para Formulários Web e observar algumas de suas propriedades comuns.

Em nosso exemplo, criaremos um formulário que terá a seguinte funcionalidade.

1. A capacidade do usuário inserir seu nome.
2. Uma opção para escolher a cidade onde o usuário reside.
3. A capacidade do usuário inserir uma opção para o gênero.
4. 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 do mouse no arquivo Demo.aspx no Explorador de Soluções 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 de rótulo é usado para exibir um texto ou uma mensagem para o usuário no formulário. Normalmente, o controle de rótulo é usado em conjunto com outros controles. Um exemplo comum é quando um rótulo é adicionado junto com o controle de caixa de texto. O rótulo indica ao usuário o que deve ser preenchido na caixa de texto. Vejamos como podemos implementar isso com um exemplo mostrado abaixo. Usaremos um rótulo chamado 'nome'. Ele será usado em conjunto com os controles de caixa de texto, que serão adicionados na seção posterior.

Passo 1) O primeiro passo é arrastar o controle 'rótulo' da caixa de ferramentas para o Formulário Web, conforme mostrado abaixo.

Passo 2) Depois que o rótulo for adicionado, siga as etapas a seguir.

1. Acesse a janela de propriedades clicando com o botão direito do mouse no controle de rótulo.
2. Selecione a opção de menu Propriedades.

Passo 3) Na janela de propriedades, altere o valor da propriedade Texto para Nome.

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.

Após efetuar 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) O primeiro passo é arrastar o controle de caixa de texto da caixa de ferramentas para o formulário da Web, conforme mostrado abaixo.

Veja abaixo como isso ficaria no designer de formulários depois que o controle Textbox fosse adicionado ao formulário.

Passo 2) Depois que a caixa de texto for adicionada, você deverá alterar a propriedade do ID.

• Acesse a janela de propriedades clicando com o botão direito do mouse no controle Caixa de Texto e
• Selecione Propriedades e, em seguida,
• 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) O primeiro passo é arrastar o controle de caixa de listagem da caixa de ferramentas para o formulário da Web, conforme mostrado abaixo.

Passo 2) Depois de arrastar a caixa de listagem para o formulário, um menu lateral separado será exibido. Nesse menu, escolha a opção "Editar itens".

Passo 3) Agora será apresentada uma caixa de diálogo na qual você pode adicionar os itens da lista à caixa de listagem.

1. Clique no botão Adicionar para adicionar um item da lista.
2. Dê um nome ao valor de texto do item da lista – no nosso caso, Mumbai. Repita os passos 1 e 2 para adicionar itens à lista para Mangalore e Hyderabad.
3. Clique no botão OK.

Passo 4) Acesse a janela de propriedades e altere o valor da propriedade ID do controle para lstLocation.

Após efetuar as alterações acima, você verá a seguinte saída.

Resultado:-

Pela saída, você pode ver claramente que a Listbox foi adicionada 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' da caixa de ferramentas para o formulário da Web (veja a imagem abaixo). Certifique-se de adicionar dois botões de opção, um para '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 o mesmo passo para alterar para 'Feminino'.
• Além disso, altere as propriedades de ID dos respectivos controles para rdMale e rdFemale.

Após efetuar as alterações acima, você verá a seguinte saída.

Resultado:-

Pelo resultado, 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 na qual o usuário pode escolher várias opções. Vejamos como podemos implementar isso com um exemplo mostrado abaixo. Adicionaremos duas caixas de seleção aos nossos formulários da Web. Essas caixas de seleção darão ao usuário a opção de escolher se deseja aprender C# ou ASP.Net.

Passo 1) O primeiro passo é arrastar o controle de caixa de seleção da caixa de ferramentas para o formulário da Web, conforme mostrado abaixo.

Passo 2) Após adicionar as caixas de seleção, altere a propriedade ID da caixa de seleção.

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

1. Altere a propriedade ID da caixa de seleção para 'chkASP'.

2. Altere a propriedade ID da caixa de seleção para chkC.

Após efetuar as alterações acima, você verá a seguinte saída.

Resultado:-

Pelo resultado, você pode ver claramente que as caixas de seleção foram adicionadas ao formulário.

Botão

Um botão é usado para permitir que o usuário clique nele, iniciando o processamento do formulário. Vejamos como podemos implementar isso em nosso exemplo atual, conforme mostrado abaixo. Adicionaremos um botão simples chamado "Enviar". Ele será usado para enviar todas as informações do formulário.

Passo 1) O primeiro passo é arrastar o controle de botão da caixa de ferramentas para o formulário da Web, 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'.

Após efetuar 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;
}

Code Explicação:-

1. A linha de código acima faz a coisa mais simples. Ela pega o valor do controle de caixa de texto Nome e o envia para o cliente através do objeto Response. Então, se você quiser inserir a string “GuruSe o valor de txtName.Text for "99" na caixa de texto do nome, ele será 'Guru99'.
2. A próxima linha de código obtém o valor selecionado da caixa de listagem por meio da propriedade 'lstLocation.SelectedItem.Text'. Em seguida, grava esse valor de volta para o cliente usando o método Response.Write.
3. Por fim, tornamos todos os controles do formulário invisíveis. Se não fizermos isso, todos os controles, juntamente com os valores da resposta, serão exibidos. Normalmente, quando uma pessoa insere todas as informações no formulário, como nome, localização, sexo etc., a próxima página exibida ao usuário deve conter apenas as informações que não foram inseridas. O usuário não deseja ver os controles de nome, sexo e localização novamente. Mas o ASP.NET não sabe disso e, portanto, por padrão, exibirá todos os controles novamente quando o usuário clicar no botão "Enviar". Assim, precisamos escrever um código para garantir que todos os controles sejam ocultados, para que o usuário veja apenas a saída desejada.

Após efetuar as alterações acima, você verá a seguinte saída.

Resultado:-

Na tela de Saída, execute os seguintes passos:

1. Dê um nome de GuruDigite 99 no campo de texto do nome.
2. Selecione uma localização na lista de Bangalore.
3. Clique no botão Enviar.

Depois de fazer isso, você verá 'Guru99' e a localização 'Bangalore' exibida na página.

Perguntas Frequentes