如何在转发器元素中获得唯一的单选按钮？

Question

我有一个中继器用于获取图像nad 底部的单选按钮。 我想实现这个单选按钮（中继说话）与 autoexcluyent 特性的组合。 我怎样才能实现它？

据我所知...

<asp:Repeater runat="server" ID="repeater1">
    <ItemTemplate>
        <div class="col-xs-12 col-sm-4 col-md-3">
            <asp:Image ID="img" runat="server" ImageUrl="<%#GetRutaImagen(Eval("id").ToString())%>" />

            <span>
                <asp:RadioButton runat="server" ID="rb1" Text='<%#Eval("description").ToString()%>' GroupName="nameGroup"/>
            </span> 

        </div>
     </ItemTemplate>                                                     
</asp:Repeater>

使用此代码，我为每个图像获得一个单选按钮，但即使我使用 GroupName 属性也没有自动执行

使用网络框架 4.6.2。

Answer 1

我不知道是否有简单的方法来管理这种情况，但是您可以通过以下代码进行管理。 最好将您的内容包装到更新面板中，这样您就可以防止在复选框更改时刷新页面。

此外， IsChecked属性用于在页面加载时初始化检查。 如果不需要，您可以删除。

.ASPX

<asp:Repeater runat="server" ID="repeater1">
    <ItemTemplate>
        <div class="col-xs-12 col-sm-4 col-md-3">
            <span>
                <asp:RadioButton runat="server" ID="rb1" Checked='<%# Eval("IsChecked") %>' AutoPostBack="true" OnCheckedChanged="rb1_CheckedChanged" Text='<%#Eval("description").ToString()%>' />
            </span>
         </div>
    </ItemTemplate>
</asp:Repeater>

。CS

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<test1> lst = new List<test1>();
        lst.Add(new test1() { Id = 1, description = "R1", IsChecked = false });
        lst.Add(new test1() { Id = 3, description = "R2", IsChecked = true });
        lst.Add(new test1() { Id = 2, description = "R3", IsChecked = false });
        lst.Add(new test1() { Id = 4, description = "R4", IsChecked = false });

        repeater1.DataSource = lst;
        repeater1.DataBind();
    }
 }


protected void rb1_CheckedChanged(object sender, EventArgs e)
{
    foreach (RepeaterItem item in repeater1.Items)
    {
        (item.FindControl("rb1") as RadioButton).Checked = false;
    }
    (sender as RadioButton).Checked = true;
}

Answer 2

在 SOF 和一些论坛之间进行研究之后，我使用 JS 实现了一个非常正确的解决方案。 我正在处理与 RadioButton 上的 OnCheckedChanged 事件相关的另一个问题......但最初的问题已修复。

论坛解决方案

我正在发布对我有用的解决方案，作为来自论坛的帮助的基础，希望它也能帮助其他人解决这个错误。

中继器。

<asp:Repeater runat="server" ID="repeater1" OnItemDataBound="repeater1_ItemDataBound">
    <ItemTemplate>
        <div class="col-xs-12 col-sm-4 col-md-3">
            <asp:Image ID="img" runat="server" ImageUrl="<%#GetRutaImagen(Eval("id").ToString())%>" />

            <span>
                <asp:RadioButton runat="server" ID="rb1" Text='<%#Eval("description").ToString()%>' GroupName="nameGroup" OnCheckedChanged="rb1_CheckedChanged"/>
            </span> 

        </div>
     </ItemTemplate>                                                     
</asp:Repeater>

JS

<script>
    function SetUniqueRadioButton(nameregex, current) {
        for (i = 0; i < document.forms[0].elements.length; i++) {

            elm = document.forms[0].elements[i]

            if (elm.type == 'radio') {

                elm.checked = false;
            }
        }
        current.checked = true;
    }
</script>

后端

protected void repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    try
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            RadioButton rbLogoSeleccionado = (RadioButton)e.Item.FindControl("rb1");
            string script = "SetUniqueRadioButton('repeater1.*nameGroup',this)";

            rbLogoSeleccionado.Attributes.Add("onclick", script);
        }
    }

    catch (Exception ex)
    {
        PIPEvo.Log.Log.RegistrarError(ex);
        throw;
    }
}