傑特_資訊手札

一般RadioButtonList都是使是文字的方式來讓使用者選擇項目，這次遇到希望使用圖片來選擇項目的需求

VB.Net

<asp:RadioButtonList ID="rbList" runat="server" DataTextField="img" DataValueField="id"
         RepeatDirection="Horizontal" TextAlign="Left"
  DataTextFormatString="<img src='{0}'/><br>">                                                                                    
 </asp:RadioButtonList>

    Private Class ConfSettingItem
        Public Sub New(ByVal id As String, ByVal img As String, ByVal Value As String)
            Me.id = id
            Me.img = img
            Me.Value = Value
        End Sub
        Private _id As String
        Private _img As String
        Private _Value As String

        Public Property id() As String
            Get
                Return _id
            End Get
            Set(ByVal value As String)
                _id = value
            End Set
        End Property

        Public Property img() As String
            Get
                Return _img
            End Get
            Set(ByVal value As String)
                _img = value
            End Set
        End Property

        Public Property Value() As String
            Get
                Return _Value
            End Get
            Set(ByVal value As String)
                _Value = value
            End Set
        End Property

    End Class

     Dim infos As New List(Of ConfSettingItem)

     infos.Add(New ConfSettingItem(id, url, value))
     infos.Add(New ConfSettingItem(id, url, value))
     rbList.DataSource = infos
     rbList.DataBind()

以上方式也可以改直接使用ListItemCollection更為簡單

<asp:RadioButtonList ID="rbList" runat="server"  RepeatDirection="Horizontal" TextAlign="Left"
  DataTextFormatString="<img src='{0}'/><br>">                                                                                  
 </asp:RadioButtonList>

     Dim infos As New ListItemCollection()
     infos.Add(New ListItem(url, id))
     rbList.DataSource = infos
     rbList.DataBind()

C#

<asp:RadioButtonList ID="rbList" runat="server" DataTextField="img" DataValueField="id"
        RepeatDirection="Horizontal" TextAlign="Left"
         DataTextFormatString="<img src='{0}' />">                                                                                        </asp:RadioButtonList>

 private class ConfSettingItem
 {
    public string id { get; set; }
    public string img { get; set; }
    public string Value { get; set; }
 }

 List<ConfSettingItem> infos = new List<ConfSettingItem>
 {
  new ConfSettingItem{ id="", img="", Value=""},
  new ConfSettingItem{ id="", img="", Value=""},
 };

infos .Add(new ConfSettingItem { id = "", img = "", Value = "" });

 rbList.DataSource = infos;
 rbList.DataBind();