Controles ASP.NET: comprobarBox, Botón de radio, ListaBox

Agregar controles ASP.Net a formularios web

ASP.Net tiene la capacidad de agregar controles a un formulario, como cuadros de texto y etiquetas.

Veamos los demás controles disponibles para los formularios web y analicemos algunas de sus propiedades comunes.

En nuestro ejemplo, crearemos un formulario que tendrá la siguiente funcionalidad.

1. La capacidad del usuario de ingresar su nombre.
2. Una opción para elegir la ciudad en la que reside el usuario.
3. La capacidad del usuario de ingresar una opción para el género.
4. Una opción para elegir un curso que el usuario quiera aprender. Habrá opciones para ambos. C# y ASP.Net.

Veamos cada control en detalle. Agreguémoslos para crear el formulario con la funcionalidad mencionada anteriormente.

Paso 1) El primer paso es abrir el Diseñador de formularios para el formulario web de demostración. Una vez que lo haga, podrá arrastrar controles desde la caja de herramientas hasta el formulario web de demostración. formulario web.

Para abrir el formulario web del diseñador:

• Haga clic con el botón derecho en el archivo Demo.aspx en el Explorador de soluciones y
• Elija la opción de menú Ver Diseñador.

Una vez que realice el paso anterior, podrá ver su Diseñador de formularios como se muestra a continuación.

Ahora vamos a empezar a añadir nuestros controles uno por uno.

Control de etiquetas

El control de etiqueta se utiliza para mostrar un texto o mensaje al usuario en el formulario. Normalmente, se usa junto con otros controles. Un ejemplo común es cuando se agrega una etiqueta junto con un cuadro de texto. La etiqueta indica al usuario qué debe ingresar en el cuadro de texto. Veamos cómo implementarlo con el ejemplo que se muestra a continuación. Usaremos una etiqueta llamada "nombre". Esta se usará junto con los cuadros de texto, que se agregarán más adelante.

Paso 1) El primer paso consiste en arrastrar el control "etiqueta" desde la caja de herramientas al formulario web, como se muestra a continuación.

Paso 2) Una vez agregada la etiqueta, siga los siguientes pasos.

1. Acceda a la ventana de propiedades haciendo clic con el botón derecho en el control de etiqueta.
2. Seleccione la opción de menú Propiedades.

Paso 3) Desde la ventana de propiedades, cambie el valor de la propiedad Texto a Nombre.

De manera similar, cambie también el valor de la propiedad ID del control a lblName. Al especificar una identificación significativa para los controles, resulta más fácil acceder a ellos durante la fase de codificación. Esto se muestra a continuación.

Una vez que realice los cambios anteriores, verá el siguiente resultado.

Salida:-

Verá que aparece la etiqueta Nombre en el formulario web.

Cuadro de texto

Un cuadro de texto se utiliza para permitir que un usuario ingrese algún texto en la aplicación de formulario web. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos un cuadro de texto al formulario en el que el usuario puede ingresar su nombre.

Paso 1) El primer paso consiste en arrastrar el control de cuadro de texto al formulario web desde la caja de herramientas, como se muestra a continuación.

A continuación se muestra cómo se vería esto en el diseñador de formularios una vez que el control Textbox esté en el formulario.

Paso 2) Una vez agregado el cuadro de texto, debes cambiar la propiedad ID.

• Acceda a la ventana de propiedades haciendo clic con el botón derecho en el control Cuadro de texto y
• Seleccione Propiedades y luego
• Cambia la propiedad ID del cuadro de texto a txtName.

Una vez que realice los cambios anteriores, verá el siguiente resultado.

Salida:-

Cuadro de lista

Un cuadro de lista se utiliza para mostrar una lista de elementos en el formulario web. Veamos cómo podemos implementar esto con el ejemplo que se muestra a continuación. Agregaremos un cuadro de lista al formulario para almacenar algunas ubicaciones de ciudades.

Paso 1) El primer paso consiste en arrastrar el control de cuadro de lista desde la caja de herramientas al formulario web, como se muestra a continuación.

Paso 2) Una vez que arrastre el cuadro de lista al formulario, aparecerá un menú lateral independiente. En este menú, seleccione la opción "Editar elementos".

Paso 3) Ahora se le presentará un cuadro de diálogo en el que podrá agregar los elementos de la lista al cuadro de lista.

1. Haga clic en el botón Agregar para agregar un elemento de la lista.
2. Asigne un nombre al valor de texto del elemento de la lista; en nuestro caso, Mumbai. Repita los pasos 1 y 2 para agregar elementos a la lista para Mangalore e Hyderabad.
3. Haga clic en el botón Aceptar.

Paso 4) Vaya a la ventana de propiedades y cambie el valor de la propiedad ID del control a lstLocation.

Una vez que realice los cambios anteriores, verá el siguiente resultado.

Salida:-

En el resultado, se puede ver claramente que el cuadro de lista se agregó al formulario.

Radiobutton

Se utiliza un botón de opción para mostrar una lista de elementos entre los cuales el usuario puede elegir uno. Veamos cómo podemos implementar esto con el ejemplo que se muestra a continuación. Agregaremos un botón de opción para una opción masculina/femenina.

Paso 1) El primer paso consiste en arrastrar el control de botones de opción desde la caja de herramientas al formulario web (ver imagen a continuación). Asegúrese de añadir dos botones de opción: uno para la opción "Masculino" y otro para la opción "Femenino".

Paso 2) Una vez que se haya agregado el botón de radio, cambie la propiedad "texto".

• Vaya a la ventana de propiedades haciendo clic en el 'Control del botón de radio'.
• Cambie la propiedad de texto del botón de opción a "Masculino".
• Repita el mismo paso para cambiarlo a 'Femenino'.
• Además, cambie las propiedades de ID de los controles respectivos a rdMale y rdFemale.

Una vez que realice los cambios anteriores, verá el siguiente resultado.

Salida:-

En el resultado, se puede ver claramente que el botón de opción se agregó al formulario.

Casilla de verificación

Una casilla de verificación se utiliza para proporcionar una lista de opciones en la que el usuario puede elegir varias opciones. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos 2 casillas de verificación a nuestros formularios web. Estas casillas de verificación le darán al usuario la opción de aprender C# o ASP.Net.

Paso 1) El primer paso consiste en arrastrar el control de casilla de verificación desde la caja de herramientas al formulario web, como se muestra a continuación.

Paso 2) Una vez que se hayan agregado las casillas de verificación, cambie la propiedad ID de la casilla de verificación.

• Vaya a la ventana de propiedades haciendo clic en el control Casilla de verificación.
• Cambie las propiedades de ID de los controles respectivos a 'chkC' y 'chkASP'.

Además, cambie la propiedad de texto del control Checkbox a "C#". Haga lo mismo con el otro control Checkbox y cámbielo a "ASP.Net".

1. Cambie la propiedad ID de la casilla de verificación a 'chkASP'.

2. Cambia la propiedad ID de la casilla de verificación a chkC.

Una vez que realice los cambios anteriores, verá el siguiente resultado.

Salida:-

En el resultado, se puede ver claramente que las casillas de verificación se agregaron al formulario.

Botón

Un botón permite al usuario hacer clic en él para iniciar el procesamiento del formulario. Veamos cómo implementarlo con nuestro ejemplo, como se muestra a continuación. Añadiremos un botón sencillo llamado "Enviar". Este se utilizará para enviar toda la información del formulario.

Paso 1) El primer paso consiste en arrastrar el control del botón desde la caja de herramientas al formulario web, como se muestra a continuación.

Paso 2) Una vez agregado el botón, vaya a la ventana de propiedades haciendo clic en el control del botón. Cambie la propiedad de texto del control del botón a Enviar. Además, cambie la propiedad ID del botón a "btnSubmit".

Una vez que realice los cambios anteriores, verá el siguiente resultado.

Salida:-

En el resultado, puede ver claramente que el botón se agregó al formulario.

Controlador de eventos en ASP.Net

Cuando trabaja con un formulario web, puede agregar eventos a los controles. Un evento es algo que sucede cuando se realiza una acción. Probablemente la acción más común sea hacer clic en un botón de un formulario.

En formularios web, puede agregar código al archivo aspx.cs correspondiente. Este código se puede utilizar para realizar ciertas acciones cuando se presiona un botón en el formulario. Este es generalmente el evento más común en Web Forms. Veamos cómo podemos lograrlo.

Vamos a hacer esto simple. Simplemente agregue un evento al control del botón para mostrar el nombre ingresado por el usuario. Sigamos los pasos a continuación para lograrlo.

Paso 1) Primero, debe hacer doble clic en el botón del formulario web. Esto mostrará el código de evento del botón en Visual Studio.

Visual Studio agrega automáticamente el evento btnSubmit_Click cuando se hace doble clic en el botón en el diseñador de formularios web.

Paso 2) Ahora agreguemos código al evento de envío para mostrar el valor del cuadro de texto del nombre y la ubicación elegida por el usuario.

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 Explicación:-

1. La línea de código anterior hace lo más simple. Toma el valor del control de cuadro de texto Nombre y lo envía al cliente a través del objeto Response. Entonces, si quieres ingresar la cadena “Guru99” en el cuadro de texto del nombre, el valor de txtName.Text sería 'Guru99 '.
2. La siguiente línea de código obtiene el valor seleccionado del cuadro de lista mediante la propiedad 'lstLocation.SelectedItem.Text'. A continuación, envía este valor al cliente mediante el método Response.Write.
3. Finalmente, ocultamos todos los controles del formulario. Si no lo hacemos, se mostrarán todos los controles junto con los valores de respuesta. Normalmente, cuando una persona ingresa toda la información del formulario, como nombre, ubicación, género, etc., la siguiente página que se muestra al usuario solo debería contener la información que no ingresó. El usuario no quiere volver a ver los controles de nombre, género y ubicación. Sin embargo, ASP.Net desconoce esto y, por lo tanto, de forma predeterminada, vuelve a mostrar todos los controles cuando el usuario hace clic en el botón Enviar. Por lo tanto, necesitamos escribir código para asegurarnos de que todos los controles estén ocultos para que el usuario solo vea el resultado deseado.

Una vez que realice los cambios anteriores, verá el siguiente resultado.

Salida:-

En la pantalla de Salida, siga los siguientes pasos:

1. Dar un nombre de Guru99 en el cuadro de texto del nombre.
2. Seleccione una ubicación en la lista desplegable de Bangalore.
3. Haga clic en el botón Enviar.

Una vez que hagas esto, verás:Guru99' y la ubicación 'Bangalore' que se muestra en la página.

Preguntas Frecuentes