我使用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控件,但是难以防止同时选择多个radiobutton,我不确定ASP:RadioButtonList如何与Repeater一起使用。
您的建议表示赞赏!
答案 0 :(得分:0)
不幸的是,RadioButton的 GroupName 在Repeater或GridView 中不起作用,如果它们放在单独的行中。但是,您可以使用几行 jQuery 轻松实现它。
function radioButtonClick(sender) {
$('.myRadioButton input').attr("checked", false);
$(sender).prop("checked", true);
}
单击单选按钮时,取消选中 myRadioButton 类名称的所有单选按钮。然后只检查一个触发click事件。
<%@ 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();
}
}
}