如何在轉發器元素中獲得唯一的單選按鈕？

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