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

Question

I have a repeater using for getting an image nad a radio button on the bottom. I want to achieve a combination of this radio button (repeater speaking) with the property of autoexcluyent feature. How can I achieve it?

As far as I got ...

<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>

With this code I am getting a one radio button per each image but no one autoexcuyent even I am using GroupName property

USING NET FRAMEWORK 4.6.2.

Answer 1

I don't know if easy way to manage this situation however you can manage by below code. It will be good to wrap your contents into update panel so you can prevent page refresh on checkbox changed.

Additionally, IsChecked property being used to initialize checked on page load. You can remove if not required.

.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

After researching between SOF and a few forums I implemented a quite right solution using JS. I am handling another problem related with OnCheckedChanged´s event on RadioButton... But the initial issue is fixed.

Forum Solution

I am posting the solution that works for me, using as base as a help coming from a forum, hoping it helps others as well with this bug.

REPEATER .

<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>

BACKEND

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;
    }
}