El control RadioButton y el control RadioButtonList permiten a los usuarios seleccionar entre un pequeño conjunto de opciones predefinidas mutuamente excluyentes.
1. Función
Puede utilizar el control CheckBox y el control CheckBoxList para realizar las siguientes operaciones:
· Provoca una devolución de página cuando se selecciona un botón de opción.
·Capture la interacción del usuario cuando el usuario selecciona un botón de opción.
· Vincular cada botón de opción a los datos de la base de datos.
2. Antecedentes
Al agregar botones de opción a una página web ASP.NET, puede utilizar dos controles de servidor web: un único control RadioButton o un control RadioButtonList. Ambos controles permiten al usuario elegir entre un pequeño conjunto de opciones predefinidas mutuamente excluyentes. Puede utilizar estos controles para definir cualquier número de botones de opción etiquetados y organizarlos horizontal o verticalmente.
Puede agregar controles RadioButton individuales a la página y usar los controles individualmente. Por lo general, se agrupan dos o más botones separados.
Alternativamente, puede usar el control RadioButtonList, que es un control único que se puede usar como control principal para un grupo de elementos de la lista de botones de opción. Este control se deriva de la clase base ListControl y, por lo tanto, funciona de manera muy similar a los controles de servidor web ListBox, DropDownList, BulletedList y CheckBoxList. Muchos de los procedimientos para utilizar el control RadioButtonList son los mismos que para otros controles de servidor web de listas.
Ambos tipos de controles tienen sus propias ventajas. El uso de un único control RadioButton le brinda más control sobre el diseño del grupo de botones de opción que el uso de un control RadioButtonList. Por ejemplo, puede incluir texto que no sea un botón de opción entre los botones de opción.
Si desea crear un conjunto de botones de opción basados en datos de una fuente de datos, el control RadioButtonList es una mejor opción. También es un poco más sencillo en términos de escribir código para comprobar qué botón está seleccionado.
Nota: También puede utilizar el control de servidor HtmlInputRadioButton para agregar botones de opción a páginas web ASP.NET.
Si desea proporcionar al usuario una lista larga de opciones o una lista que puede cambiar de longitud en tiempo de ejecución, utilice el control de servidor web ListBox o DropDownList.
1. Botones de opción de grupo
Los botones de opción rara vez se utilizan solos, sino que se agrupan para proporcionar un conjunto de opciones mutuamente excluyentes. Dentro de un grupo, solo se puede seleccionar un botón de opción a la vez. Puede crear botones de opción agrupados de las siguientes maneras:
Comience agregando un único control de servidor web RadioButton a la página y luego asigne manualmente todos los controles a un grupo. El nombre del grupo puede ser cualquier cosa; todos los botones de opción con el mismo nombre de grupo se consideran parte de un solo grupo.
Agregue un control de servidor web RadioButtonList a la página. Los elementos de la lista en este control se agrupan automáticamente.
2. Eventos RadioButton y RadioButtonList
Los eventos funcionan de forma diferente entre un único control RadioButton y un control RadioButtonList.
3. Control de botón de radio único
Un único control RadioButton genera el evento CheckedChanged cuando el usuario hace clic en el control. (Este evento se hereda del control CheckBox). De forma predeterminada, este evento no hace que la página se envíe al servidor. Sin embargo, puede forzar al control a realizar una devolución de datos inmediatamente estableciendo la propiedad AutoPostBack en verdadero.
Nota: La función de devolución automática requiere que el navegador admita ECMAScript (Jscript o JavaScript) y que las secuencias de comandos estén habilitadas en el navegador del usuario.
Es posible que necesites crear un controlador de eventos para el evento CheckedChanged. Puede probar qué botón de opción está seleccionado en cualquier código que se ejecute como parte de la página. Normalmente, crea un controlador de eventos para el evento CheckedChanged solo cuando necesita saber que un botón de opción ha cambiado, en lugar de simplemente leer la selección actual.
4. Control de lista de botones de radio
El control RadioButtonList genera el evento SelectedIndexChanged cuando el usuario cambia el botón de opción seleccionado en la lista. De forma predeterminada, este evento no hace que la página se envíe al servidor. Sin embargo, puede forzar al control a realizar una devolución de datos inmediatamente estableciendo la propiedad AutoPostBack en verdadero.
Nota: La función de devolución automática requiere que el navegador admita ECMAScript (Jscript o JavaScript) y que las secuencias de comandos estén habilitadas en el navegador del usuario.
Al igual que con los controles RadioButton individuales, es más común probar el estado de un control RadioButtonList después de que la página se haya enviado por otros medios.
5. Atributos HTML de control de RadioButton
Cuando el control RadioButton se representa en el navegador, se dividirá en dos partes: un elemento de entrada que representa el botón de opción y un elemento de etiqueta separado que representa el título del botón de opción. Estos dos elementos se combinan en un elemento de tramo.
Cuando aplica estilos o configuraciones de propiedades a un control RadioButton, esos estilos y propiedades se aplican al elemento de extensión exterior. Por ejemplo, si establece la propiedad BackColor de un control, la configuración se aplica al elemento span. Por lo tanto, afectará tanto a los elementos de entrada internos como a los de etiqueta.
A veces, es posible que necesite establecer configuraciones independientes para los botones de opción y las etiquetas. El control RadioButton admite dos propiedades que se pueden configurar en tiempo de ejecución. El atributo InputAttributes le permite agregar atributos HTML al elemento de entrada y el atributo LabelAttributes le permite agregar atributos HTML al elemento de etiqueta. Las propiedades establecidas se pasan al navegador tal cual. El siguiente ejemplo muestra cómo configurar las propiedades de un elemento de entrada para que cuando el usuario apunte el puntero del mouse sobre un botón de opción, solo el botón de opción cambie de color y no la etiqueta.
RadioButton1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'rojo'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'blanco'");
6. Vincular datos a controles
Puede vincular un único control RadioButton a una fuente de datos y puede vincular cualquier propiedad de un control RadioButton a cualquier campo de la fuente de datos. Por ejemplo, puede establecer la propiedad Texto del control en función de la información de la base de datos.
Dado que los botones de opción se utilizan en grupos, no es común vincular un solo botón de opción a una fuente de datos. En cambio, es más común vincular el control RadioButtonList a una fuente de datos. En este caso, la fuente de datos genera dinámicamente botones de opción (elementos de lista) para cada registro en la fuente de datos.
3. Cómo: Agregar el control del servidor web RadioButton a una página de formularios web
Hay dos formas de agregar botones de opción a una página de formularios web:
·Agregue un único control de servidor web RadioButton.
·Agregue un control de servidor web RadioButtonList y luego agregue un único elemento de lista al control.
Cuando se utiliza un único control de servidor web RadioButton, normalmente se agrega un conjunto de dichos controles a la página y luego se agrupan. Se pueden crear varios grupos de botones diferentes.
paso:
1. Desde la pestaña "Estándar" de la caja de herramientas, arrastre el control RadioButton a la página.
2. En la ventana "Propiedades", especifique el título configurando la propiedad Texto.
3. También puede optar por cambiar la dirección del título configurando la propiedad TextAlign.
4. Repita los pasos del 1 al 3 para cada botón de opción que desee agregar a la página.
Controles de servidor web RadioButton individuales de grupo
Establezca la propiedad GroupName de cada control con el mismo nombre. Puede utilizar cualquier cadena como nombre, pero no puede contener espacios. Por ejemplo, puede asignar la cadena "RadioButtonGroup1" a la propiedad GroupName de todos los botones.
Para crear varios grupos de botones, utilice un nombre de grupo diferente para cada grupo.
Nota: En cualquier momento, puede agregar controles RadioButton a la página y dividirlos en grupos existentes.
4. Cómo: Agregar el control del servidor web RadioButtonList a una página de formularios web
Hay dos formas de agregar botones de opción a una página de formularios web:
·Agregue un control de servidor web RadioButtonList y luego agregue un único elemento de lista al control.
·Agregue un único control de servidor web RadioButton.
Al utilizar el control RadioButtonList, puede agregar controles individuales a la página. Agregar elementos a un control es un proceso separado, dependiendo de si desea mostrar una lista estática en el control o una lista generada dinámicamente en tiempo de ejecución.
paso:
1. Desde la pestaña "Estándar" de la caja de herramientas, arrastre el control RadioButtonList a la página.
2. También puede optar por cambiar la dirección del título configurando la propiedad TextAlign en la ventana "Propiedades".
3. También puede optar por cambiar el diseño del control para mostrar varias columnas.
4. Siga uno de los siguientes métodos para crear un elemento para el control:
·Crea cada elemento por separado.
· Vincular datos al control.
5. Cómo: Establecer y obtener la selección en el control del servidor web RadioButton
Puede configurar el botón de opción seleccionado en tiempo de diseño o en código en tiempo de ejecución. Si un botón de opción pertenece a un grupo, al configurarlo se borrarán todas las demás selecciones del grupo.
Nota: Si está utilizando el control RadioButtonList, el proceso de obtener y configurar el valor del botón es diferente.
1. Configure el control RadioButton seleccionado
Establezca la propiedad Comprobada del control en verdadero. Si selecciona varios controles RadioButton en un grupo, el navegador determina qué botón se selecciona.
Si establece esta propiedad en falso, la selección se borra pero no se selecciona otro botón de opción. Por lo tanto, puede borrar todas las selecciones estableciendo la propiedad Marcado de todos los botones de opción de un grupo en falso.
Determinar qué control RadioButton se ha seleccionado es esencialmente probar la propiedad Checked.
public void Button1_Click (remitente del objeto, System.EventArgs e)
{
si (RadioButton1.Comprobado) {
Label1.Text = "Seleccionó" + RadioButton1.Text;
}
de lo contrario si (RadioButton2.Checked) {
Label1.Text = "Seleccionó" + RadioButton2.Text;
}
de lo contrario si (RadioButton3.Checked) {
Label1.Text = "Seleccionó" + RadioButton3.Text;
}
}
6. Cómo: establecer el diseño en el control del servidor web RadioButtonList
De forma predeterminada, el control del servidor web RadioButtonList muestra solo una lista de botones. Sin embargo, puede especificar cualquier número de columnas y, dentro de esas columnas, también puede especificar cómo se ordenan los elementos: verticalmente (predeterminado) u horizontalmente. Un diseño vertical de tres columnas se ve así:
A D G
B E H
C F
Un diseño horizontal de los mismos elementos produce el siguiente diseño:
A B C
DEF
G.H.
Especificar el recuento de columnas y ordenar
·Establezca la propiedad RepeatColumns del control RadioButtonList en el número deseado de columnas.
· Utilice la enumeración RepetirDirection para establecer la propiedad RepetirDirection en Vertical u Horizontal, como se muestra en el siguiente ejemplo de código.
Botón vacío protegido1_Click (remitente del objeto, System.EventArgs e)
{
// Crea cinco botones de radio.
cadena[] colores = {"Rojo", "Azul", "Verde", "Amarillo", "Naranja"};
this.RadioButtonList1.Items.Clear();
for(int i=0;i < colores.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colores[i]);
}
// Distribuya los botones de opción horizontalmente.
this.RadioButtonList1.RepeatDirection =
RepetirDirección.Horizontal;
}
7. Cómo: Responder a las selecciones del usuario en el grupo de control del servidor web RadioButton
Cuando el usuario selecciona un control RadioButton, el control genera un evento al que puede responder.
Descripción: Los eventos generados por el control RadioButtonList son diferentes de los eventos generados por un único control RadioButton.
Es posible que no necesite responder directamente al evento de selección del control RadioButton. Responda a este evento solo si es necesario saber cuándo el usuario cambió la selección en el grupo de botones de opción.
Si solo desea saber qué botón de opción se seleccionó y no quiere saber si la selección ha cambiado, puede probar la selección del botón de opción después de enviar el formulario al servidor.
Debido a que cada control del servidor RadioButton es un control independiente y cada control puede generar eventos de forma independiente, el grupo de botones de opción no genera eventos en su conjunto;
Cree un controlador de eventos para el evento CheckedChanged del control.
De forma predeterminada, el evento CheckedChanged no hace que la página de formularios web se envíe inmediatamente al servidor. En su lugar, el evento se genera en el código del servidor la próxima vez que se envía el formulario (por ejemplo, cuando se hace clic en el control del servidor Button Web). Para que el evento CheckedChanged provoque una publicación inmediata, establezca la propiedad AutoPostBack del control RadioButton en verdadero.
Nota: Para enviar el control RadioButton al servidor cuando está seleccionado, el navegador debe admitir ECMAScript (JScript, JavaScript) y el navegador del usuario debe habilitar las secuencias de comandos.
El siguiente ejemplo de código demuestra cómo responder cuando un usuario selecciona un control RadioButton.
public void RadioButton1_CheckedChanged (remitente del objeto,
System.EventArgs e)
{
Label1.Text = "Seleccionó el botón de opción" + RadioButton1.Text;