ASP.NET – RadioButtonList con imagenes

Hay que reconocer que una imagen siempre es mucho más representativa que una frase… y mucho más atractiva claro está.

Por ello, a veces las palabras son reemplazadas por bellas imágenes.

Imaginemos por ejemplo que tenemos un catálogo de productos y queremos elegir un producto de una lista (como la imagen de arriba).

Para ello necesito:

1.- un control ASP.NET RadioButtonList:

<form id="form1" runat="server">
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
</asp:RadioButtonList>
</form>

2.- y un poquito de código VB.NET:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If IsPostBack Then Return

        Dim c As Char = Html32TextWriter.DoubleQuoteChar
        Dim js As String = "return this.parentNode.previousSibling.checked=true;"
        Dim IMGs As New List(Of String)

        IMGs = MyImages()
        Dim i As Integer = 0
        For Each img As String In IMGs
            RadioButtonList1.Items.Add(New ListItem(String.Format("<a href={0}javascript:;{0} onclick={0}{1}{0}><img src={0}{2}{0} style={0}border: none{0} /></a>", c, js, img), i))
            i += 1
        Next img

    End Sub

    Private Function MyImages() As List(Of String)
        Dim IMGs As New List(Of String)

        IMGs.Add("images/excel.png")
        IMGs.Add("images/tools_for_excel.png")
        IMGs.Add("images/word.png")

        Return IMGs

    End Function

Eso es todo. Paso a explicar el código:

En el Page_Load lo que hago es declarar una variable llamada js = "return this.parentNode.previousSibling.checked=true;" , lo que esta línea hace es dejar marcado el radio al hacer click en la imagen… ;)

Luego simplemente a través de un bucle For añado un poco de código html a cada radio button que voy añadiendo… de esta manera se muestran las imágenes.

Y finalmente hay una función MyImages() As List(Of String) que me permita cargar las imágenes que guardo en una carpeta llamada "images/" que luego se mostrarán en cada radiobutton. Simple no?

;)