miércoles, 20 de junio de 2012

ASP.NET– Aplicar CSS a RadioButtonList para que se vea como una lista de botones

asp.net-button-listHay ocasiones en las que queremos cambiar la apariencia de nuestros controles, para mostrar en las páginas cierta información.
Por ejemplo:
si quiero crear una encuesta, con preguntas de una sola respuesta… de inmediato se me ocurre que el control que se ajusta para este caso es el RadioButtonList. Y eso es cierto, pero qué pasa si Yo quisiera tener una lista de botones en lugar de radio buttons? que Yo recuerde, no hay un control que nos permita elegir una lista de botones ( ButtonList podría llamarse si existiera ).
Y dado que no existe, qué tal si nosotros usando un poco el ingenio lo creamos?
Con esta porción de código se obtiene que los radiobuttonlist se visualizen como una lista de botones…
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Lista de botones</title>

<style type="text/css">
* { font-family: Trebuchet MS; background-color: beige;}
.Buttons label
{
display: block;
border: solid 1px gray;
box-shadow: 2px 2px 2px gray;
padding: 5px 10px;
background-color: red;       
cursor: pointer;       
}


input[type="radio"]
{
display: none;       
}

input:checked + label 
{
background-color: Green;
color: White;
}            
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
De qué color es el caballo blanco de San Martín?
</p>
<asp:RadioButtonList ID="rbl" runat="server" RepeatDirection="Horizontal" RepeatLayout="Table" CssClass="Buttons">
<asp:ListItem Value="1" Text="NEGRO" />
<asp:ListItem Value="2" Text="MARRÓN" />
<asp:ListItem Value="3" Text="BLANCO" />
</asp:RadioButtonList>
</form>
</body>
</html>

Y Juancito levanta la mano y pregunta: professor, professor… por qué simplemente no agrego varios botones y ya está?

Ay Juanito, te diré… la ventaja adicional es que puedes acceder al valor elegido al instante, con esta línea de código
string val = rbl.SelectedValue;

Si agregaras botones, tendrías que hacer artificios para guardar el valor del botón seleccionado cada vez que haces click en un botón… y algunas cosas más seguramente.

Uds podrían invertir un poquito más de tiempo y hacer que se vean mucho más parecido a un botón.

Espero que les sea de utilidad Guiño

No hay comentarios.: