ASP:Repeater 和嵌入式单选按钮

Question

我正在使用 Repeater 控件在 ASP.NET 网络表单上显示一系列照片。这是我当前的代码：

<asp:Repeater ID="repPhotos" runat="server">
  <ItemTemplate>
    <asp:hyperlink id="link" NavigateUrl='<%# Container.DataItem %>' runat="server">
      <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' Height="10%" Width="10%" />
    </asp:hyperlink>
  </ItemTemplate>
</asp:Repeater>

现在我想在每张照片下方显示一个单选按钮，但一系列单选按钮必须互斥。我尝试使用 ASP:RadioButton 控件，但很难防止同时选择多个单选按钮，而且我不确定 ASP:RadioButtonList 如何与 Repeater 一起工作。

感谢您的建议！

Answer 1

不幸的是，RadioButton 的 GroupName 在 Repeater 或 GridView 中不起作用 如果它们被放置在单独的行中 。但是，您可以使用几行 jQuery 轻松实现它。

function radioButtonClick(sender) {
    $('.myRadioButton input').attr("checked", false);
    $(sender).prop("checked", true);
}

单击单选按钮时，取消选中名称为 myRadioButton class 的所有单选按钮。然后检查只有一个触发了点击事件。

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Repeater ID="repPhotos" runat="server">
            <ItemTemplate>
                <asp:RadioButton runat="server" ID="PhotoRadioButton"
                    CssClass="myRadioButton" onclick="radioButtonClick(this)" />
                <%# Container.DataItem %>
            </ItemTemplate>
        </asp:Repeater>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script>
            function radioButtonClick(sender) {
                $('.myRadioButton input').attr("checked", false);
                $(sender).prop("checked", true);
            }
        </script>
    </form>
</body>
</html>

代码隐藏

using System;
using System.Collections.Generic;

namespace DemoWebForm
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            repPhotos.DataSource = new List<string> {"One", "Two", "Three"};
            repPhotos.DataBind();
        }
    }
}

ASP:Repeater 和嵌入式单选按钮

ASP:Repeater and embedded radiobuttons

asp.net

webforms

repeater

radio-button

ASPX

代码隐藏