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

Agregar controles ASP.Net a formularios web

ASP.Net tiene la capacidad de agregar controles a un formulario como textoboxes y etiquetas.

Veamos los otros controles disponibles para formularios web y veamos algunas de sus propiedades comunes.

En nuestro ejemplo, crearemos un formulario que tendrá lo siguientewing 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 hagas esto, podrás arrastrar controles desde la herramienta.box En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. formulario web.

Para abrir el formulario web del Diseñador,

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

Agregar controles ASP.Net a formularios web

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

Agregar controles ASP.Net a formularios web

Ahora comencemos a agregar nuestros controles uno por uno.

Control de etiquetas

El control de etiqueta se utiliza para mostrar un texto o un mensaje al usuario en el formulario. El control de etiqueta se utiliza normalmente junto con otros controles. Los ejemplos comunes son aquellos en los que se agrega una etiqueta junto con el texto.box control. La etiqueta le da una indicación al usuario sobre lo que se espera que complete en el texto.box. Veamos cómo podemos implementar esto con el ejemplo que se muestra a continuación. Usaremos una etiqueta llamada "nombre". Esto se usará junto con el textobox controles, que se agregarán en el later .

Paso 1) El primer paso es arrastrar el control 'etiqueta' al formulario web desde la herramientabox como se muestra a continuación.

Control de etiquetas

Paso 2) Una vez agregada la etiqueta, siga el siguientewing pasos.

  1. Vaya a la ventana de propiedades haciendo clic derecho en el control de etiqueta
  2. Elija la opción de menú Propiedades

Control de etiquetas

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

Control de etiquetas

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.

Control de etiquetas

Una vez que realice los cambios anteriores, verá lo siguientewing salida

Salida:-

Control de etiquetas

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

Textobox

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

Paso 1) El primer paso es arrastrar el texto.box control en el Formulario Web desde la herramientabox como se muestra a continuación

Textobox

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

Textobox

Paso 2) Una vez que el textobox se ha agregado, debe cambiar la propiedad ID.

  • Vaya a la ventana de propiedades haciendo clic derecho en el Textobox control y
  • Elija propiedades entonces
  • Cambiar la propiedad id del texto.box a txtName.

Textobox

Una vez que realice los cambios anteriores, verá lo siguientewing salida.

Salida:-

Textobox

Lista box

Una listabox 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 una lista box al formulario para almacenar algunas ubicaciones de la ciudad.

Paso 1) El primer paso es arrastrar la lista. box control al formulario web desde la herramientabox como se muestra a continuación

Lista box

Paso 2) Una vez que arrastre la listabox al formulario, aparecerá un menú lateral separado. En este menú, elija el menú 'Editar elementos'.

Lista box

Paso 3) Ahora se le presentará un cuadro de diálogo. box en el que puede agregar los elementos de la lista a la listabox.

  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 de la lista para Mangalore y Hyderabad.
  3. Haga clic en el botón Aceptar.

Lista box

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

Lista box

Una vez que realice los cambios anteriores, verá lo siguientewing salida

Salida:-

Lista box

En el resultado, puede ver claramente que la Listaboxes fue añadido 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 es arrastrar el control "botón de radio" al formulario web desde la herramientabox. (ver imagen a continuación). Asegúrese de agregar 2 botones de opción, uno para la opción "Masculino" y el otro para "Mujer".

Radiobutton

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 "Mujer".
  • Además, cambie las propiedades de ID de los controles respectivos a rdMale y rdFemale.

Radiobutton

Una vez que realice los cambios anteriores, verá lo siguientewing salida

Salida:-

Radiobutton

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

chequebox

Un chequebox se utiliza para proporcionar una lista de opciones en las que el usuario puede elegir múltiples opciones. Veamos cómo podemos implementar esto con el ejemplo que se muestra a continuación. Agregaremos 2 chequesboxes a nuestros formularios web. estos chequeboxes proporcionará una opción al usuario sobre si desea aprender C# o ASP.Net.

Paso 1) El primer paso es arrastrar el cheque.box control en el Formulario Web desde la herramientabox como se muestra a continuación

chequebox

Paso 2) Una vez que el chequeboxSe han agregado es, cambie el cheque.box propiedad de identificación a 'chkASP'.

  • Vaya a la ventana de propiedades haciendo clic en Verificarbox controlar.
  • Cambie las propiedades de ID de los controles respectivos a 'chkC' y 'chkASP'.

Además, cambie la propiedad de texto del cheque.box controle a 'C#'. Haz lo mismo con el otro cheque.box controle y cámbielo a 'ASP.Net'.

  1. Cambiar la propiedad ID del chequebox a 'chkASP'

chequebox

  1. Cambiar la propiedad ID del chequebox para comprobar C

chequebox

chequebox

Una vez que realice los cambios anteriores, verá lo siguientewing salida

Salida:-

chequebox

En el resultado, puede ver claramente que Checkboxes fue añadido al formulario.

Botón

Se utiliza un botón para permitir al usuario hacer clic en un botón que luego iniciaría el procesamiento del formulario. Veamos cómo podemos implementar esto con nuestro ejemplo actual como se muestra a continuación. Agregaremos un botón simple llamado botón "Enviar". Esto se utilizará para enviar toda la información en el formulario.

Paso 1) El primer paso es arrastrar el control del botón al formulario web desde la herramientabox como se muestra a continuación

Botó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".

Botón

Una vez que realice los cambios anteriores, verá lo siguientewing salida

Salida:-

Botón

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 tienes que double-Haga clic en el botón del formulario web. Esto mostrará el código de evento para el botón en Visual Studio.

Controlador de eventos en ASP.Net

El evento btnSubmit_Click se agrega automáticamente por Visual Studio cuando tú double haga 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 texto del nombre.box valor y la ubicación elegida por el usuario.

Controlador de eventos en ASP.Net

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

Explicación del código: -

  1. La línea de código anterior hace lo más simple. Toma el valor del texto Nombre.box controla y lo envía al cliente a través del objeto Respuesta. Entonces, si desea ingresar la cadena "Guru99" en el texto del nombre box, el valor de txtName. Un texto sería 'Guru99'.
  2. La siguiente línea de código toma el valor seleccionado de la lista.box a través de la propiedad 'lstLocation.SelectedItem.text'. Luego escribe este valor a través del método Response.Write en el cliente.
  3. Finalmente, hacemos que todos los controles del formulario sean invisibles. Si no hacemos esto, todos los controles más nuestros valores de respuesta se mostrarán juntos. Normalmente, cuando una persona ingresa toda la información en el formulario, como el nombre, la ubicación, el género, etc., la siguiente página se muestra al usuario. Sólo debe tener la información que no fue ingresada. El usuario no quiere volver a ver los controles de Nombre, Género y Ubicación. Pero ASP.Net no lo sabe y, por lo tanto, de forma predeterminada, volverá a mostrar todos los controles cuando el usuario haga 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á lo siguientewing salida

Salida:-

Controlador de eventos en ASP.Net

En la pantalla Salida, realice lo siguientewing pasos

  1. Da un nombre de Guru99 en el texto del nombre.box
  2. Elija una ubicación en la listabox de Bangalore
  3. Haga clic en el botón Enviar

Controlador de eventos en ASP.Net

Una vez que haga esto, verá "Guru99" y la ubicación "Bangalore" se muestra en la página.

Resumen

  • In ASP.Net, puede agregar los controles estándar a un formulario como etiquetas, textoboxes, listaboxes, etc
  • Cada control puede tener un evento asociado. El evento más común es el evento de clic en el botón. Esto se utiliza cuando es necesario enviar información al servidor web.