如何使用图像布局ASP.Net RadioButtons?

时间:2015-01-20 09:43:39

标签: c# css asp.net radio-button radiobuttonlist

我需要用图像布局RabioButtons。但我不知道怎么做。如何使用ASP.Net RadioButtons和HTML / CSS实现图像中的布局。

enter image description here

3 个答案:

答案 0 :(得分:2)

<div>
<asp:RadioButtonList ID="myRadioBtnList" runat="server" >
<asp:ListItem Text="&lt;img src=&quot;download.jpg&quot;/&gt;" Value="1">         </asp:ListItem>
  <asp:ListItem Text="&lt;img src=&quot;download.jpg&quot;/&gt;" Value="2">   </asp:ListItem>
<asp:ListItem Text="&lt;img src=&quot;download.jpg&quot;/&gt;" Value="3"></asp:ListItem>
 <asp:ListItem Text="&lt;img src=&quot;download.jpg&quot;/&gt;" Value="4"></asp:ListItem>
 </asp:RadioButtonList>
    </div>

在text属性中用您的图像路径替换download.jpg。我想这会对你有所帮助

答案 1 :(得分:2)

试试这个

   protected void Page_Load(object sender, EventArgs e)
{
    ListItem item;
    int i = 0;
    System.IO.FileInfo file;

    var Images =
        from n in System.IO.Directory.GetFiles(Server.MapPath("Images"))
        orderby n descending
        select n;

    foreach (var filename in Images)
    {
        file = new System.IO.FileInfo(filename);

        item = new ListItem("<img src='" + "Images/" + file.Name + "' alt='" + file.Name +
            "' title='"+file.Name+"'/>", i.ToString());

        RadioButtonList1.Items.Add(item);
        RadioButtonList1.CellPadding = 5;
        RadioButtonList1.CellSpacing = 5;
        i++;
    }
}


    <div>
    <asp:RadioButtonList ID="RadioButtonList1"
        runat="server"
        BorderStyle="Groove"
        BorderWidth="1px"
        RepeatColumns="3"
        RepeatLayout="Table">
    </asp:RadioButtonList> 
</div>

Source

答案 2 :(得分:0)

您可以参考这些链接了解您尝试实现的目标。这些可能会指出你正确的方向。

Link 1

Link 2

Link 3

Link 4

希望这有帮助。