Controles ASP.NET: comprobarBox, Botón de radio, ListaBox, Cuadro de texto, Etiqueta
jacob lee
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 otros controles disponibles para formularios web y veamos algunas de sus propiedades comunes.
En nuestro ejemplo, crearemos un formulario que tendrá la siguiente funcionalidad.
- La capacidad del usuario de ingresar su nombre.
- Una opción para elegir la ciudad en la que reside el usuario.
- La capacidad del usuario de ingresar una opción para el género.
- 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 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 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. Un ejemplo común es cuando se agrega una etiqueta junto con el control de cuadro de texto. La etiqueta le indica al usuario qué se espera que complete en el cuadro de texto. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Usaremos una etiqueta llamada "nombre". Esta se usará junto con los controles de cuadro de texto, que se agregarán en la sección posterior.
Paso 1) El primer paso es arrastrar el control 'etiqueta' al formulario web desde la caja de herramientas como se muestra a continuación.
Paso 2) Una vez agregada la etiqueta, siga los siguientes pasos.
- Vaya a la ventana de propiedades haciendo clic derecho en el control de etiqueta
- Elija la opción de menú Propiedades
Paso 3) Desde la ventana de propiedades, cambie el nombre 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 es arrastrar el control del 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.
- Vaya a la ventana de propiedades haciendo clic derecho en el control Cuadro de texto y
- Elija propiedades entonces
- Cambie 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 es arrastrar el control del cuadro de lista al formulario web desde la caja de herramientas 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 el menú "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.
- Haga clic en el botón Agregar para agregar un elemento de la lista.
- 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.
- 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 lstUbicación.
Una vez que realice los cambios anteriores, verá el siguiente resultado
Salida:-
Desde el resultado, se puede ver claramente que se agregaron los cuadros de lista 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 "radiobutton" desde la caja de herramientas hasta el formulario web (ver imagen a continuación). Asegúrese de agregar dos botones de opción, uno para la opción "Masculino" y el otro para "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 "Mujer".
- 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, puede ver claramente que el botón de opción se agregó al formulario.
Checkbox
Una casilla de verificación se utiliza para proporcionar una lista de opciones en las 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 brindarán una opción al usuario sobre si desea obtener más información. C# o ASP.Net.
Paso 1) El primer paso es arrastrar el control de casilla de verificación al formulario web desde la caja de herramientas como se muestra a continuación
Paso 2) Una vez que se hayan agregado las casillas de verificación, cambie la propiedad de identificación de la casilla de verificación a 'chkASP'.
- 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".
- Cambie la propiedad ID de la casilla de verificación a 'chkASP'
- Cambiar la propiedad ID de la casilla de verificación a chkC
Una vez que realice los cambios anteriores, verá el siguiente resultado
Salida:-
Desde el resultado, se puede ver claramente que se agregaron las casillas de verificación al formulario.
Elemento de
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 caja de herramientas 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 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;
}
Explicación del código: -
- La línea de código anterior hace lo más simple. Toma el valor del control del cuadro de texto Nombre y lo envía al cliente a través del objeto Respuesta. Por lo tanto, si desea ingresar la cadena "Guru99" en el cuadro de texto Nombre, el valor de txtName. Un texto sería 'Guru99'.
- La siguiente línea de código toma el valor seleccionado del cuadro de lista a través de la propiedad 'lstLocation.SelectedItem.text'. Luego, escribe este valor a través del método Response.Write en el cliente.
- 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á el siguiente resultado
Salida:-
En la pantalla de Salida, realice los siguientes pasos
- Indique el nombre Guru99 en el cuadro de texto del nombre.
- Seleccione una ubicación en el cuadro de lista de Bangalore
- Haga clic en el botón Enviar
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, cuadros de texto, cuadros de lista, 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.
