groupname 在中继器 asp.net 中的多个单选按钮中不起作用

Posted 2023-03-05

【中文标题】groupname 在中继器 asp.net 中的多个单选按钮中不起作用

【英文标题】：groupname doesn't work in more than one radiobutton inside repeater asp.net

【发布时间】：2018-02-23 09:10:09

【问题描述】：

我有一个转发器，在转发器内部有一个单选按钮控件，在后面的代码中我为单选按钮控件填写组名，所以，当我运行它时，我有一个包含很多行的表格，其中一些有单选按钮：

  <asp:updatepanel id="UpdatePanel1" runat="server" updatemode="Conditional">
    <ContentTemplate>
        <asp:Repeater ID="Repeater1" runat="server" ViewStateMode="Enabled">
            <HeaderTemplate>
                <table class="table table-responsive table-bordered ">
                    <tr class="text-center" style="background-color: #6e6259; color: white;">
                        <th class="text-center">DESCRIPTION</th>
</HeaderTemplate>
            <ItemTemplate>
         <tr>
        <td style="padding-left: 20px;">
      <asp:RadioButton ID="rbtDinamic"  OnCheckedChanged="rbtDinamic_CheckedChanged" AutoPostBack="true"
           ViewStateMode="Enabled" Visible="false"  GroupName='<%#Eval("groupvalue") %>'   runat="server"/></td>
</ItemTemplate>
      <FooterTemplate>
    </table>
     </FooterTemplate>
    </asp:Repeater>
     </ContentTemplate>
      </asp:UpdatePanel>

在repeater的itemdatabound中，我填写了groupname的值：

  Private Sub Repeater1_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
    Try
        If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
            If CType(e.Item.FindControl("hdf1"), Label).Text = False Then
                CType(e.Item.FindControl("rbtDinamic"), RadioButton).Visible = True
                CType(e.Item.FindControl("rbtDinamic"), RadioButton).GroupName = CType(e.Item.FindControl("groupvalue"), Label).Text = False
            End If
        End If
    Catch ex As Exception          
    End Try
End Sub

但是当我运行它时，转发器会创建具有不同名称的组名：

Radiobutton row 1:
Repeater1$ctl05$1

Radiobutton row 2:

Repeater1$ctl06$1

所以它检查了所有单选按钮，而不是在检查同一组的另一个单选按钮时取消选中。

我在论坛中找到了这段代码，但它只有在我只有一个组名时才有效，但我可以有多个组名：

  Protected Sub rbtDinamic_CheckedChanged(sender As Object, e As EventArgs)
    For Each item As RepeaterItem In Repeater1.Items
        Dim rbtn As RadioButton = DirectCast(item.FindControl("rbtDinamic"), RadioButton)
        rbtn.Checked = False
    Next
    DirectCast(sender, RadioButton).Checked = True
End Sub

但是可以有不止一组单选按钮，所以在这种情况下我不能使用这个代码。

有没有地方可以做到这一点？谢谢

【参考方案1】：

这是与ItemTemplate 或AlternatingItemTemplate (more info) 中的RadioButton 控件使用相关的已知错误。这是由于Repeater 破坏了在后台自动分配的控件 ID 和组名的命名（假设使用动态ClientIDMode）。要解决此问题，请像这样设置客户端函数：

function setExclusiveRadioButton(name, current)

    regex = new RegExp(name);  

    for (i = 0; i < document.forms[0].elements.length; i++)
    
        var elem = document.forms[0].elements[i];
        if (elem.type == 'radio')
        
           elem.checked = false;
        
    
    current.checked = true;

稍后，将针对单选按钮控件的脚本设置如下：

Private Sub Repeater1_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
    Try
        If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
            If CType(e.Item.FindControl("hdf1"), Label).Text = False Then
                CType(e.Item.FindControl("rbtDinamic"), RadioButton).Visible = True
                CType(e.Item.FindControl("rbtDinamic"), RadioButton).GroupName = CType(e.Item.FindControl("groupvalue"), Label).Text = False
            End If
        End If

        ' put the proper client-side handler for RadioButton
        Dim radio As RadioButton = CType(e.Item.FindControl("rbtDinamic"), RadioButton)
        Dim script As String = "setExclusiveRadioButton('Repeater1.*[RadioButton_GroupName]', this)"

        radio.Attributes.Add("onclick", script)

    Catch ex As Exception          
    End Try
End Sub

注意：setExclusiveRadioButton 方法的第一个参数应设置为此正则表达式约定：[repeater control ID].*[RadioButton_GroupName]（可以使用Eval 检索RadioButton_GroupName 值）。或者，您可以使用基本 html input type="radio" 或改用 RadioButtonList。

参考：

Using RadioButton Controls in a Repeater

类似问题：

radiobutton inside repeater

only one radiobutton selection in repeater

ASP.NET - Radio Buttons In Repeaters

【参考方案2】：

由于其他用户提供了问题的根本原因，所以我不会解释相同，但我会为您提供基于 Jquery 的解决方案：

jQuery("[name$='$optValue']").attr("name",jQuery("[name$='$optValue']").attr("name"));

jQuery("[name$='$optValue]").click(function () 
                //set name for all to name of clicked 
                jQuery("[name$='$optValue]").attr("name", this.attr("name")); 
            );

attr("name",jQuery("[name$='optValue']") 将尝试选择页面上所有以optValue 结尾的输入，即optValue 中继器中的项目。之后，它将name 属性更改为为所有optValue 元素找到的第一个值。 attr("name") 函数（此处以“get”格式使用）总是返回列表中的第一个。因此，所有选项按钮在 Html 中都具有相同的 'name' 属性，这允许选择正常工作。

this Source 的一个很好的解决方法

【参考方案3】：

在客户端，将收音机的name 设置为您喜欢的任何组，但在data- 属性中写下生成的名称。

然后，在表单提交之前，将data- 属性复制回name 属性，以便 ASP.NET 可以识别服务器上的控件。

这个脚本会做：

<script type="text/javascript">
    $(document).ready(function (e)             
        $("input[type='radio']").each(function (idx, elm) 
            var generatedName = $(elm).attr("name");
            $(elm).data("name", generatedName);
            $(elm).attr("name", "whatever-group-name");
        );

    );

    function onSubmit() 
        $("input[type='radio']").each(function (idx, elm) 
            var generatedName = $(elm).data("name");
            $(elm).attr("name", generatedName);
        );
    
</script>

要检测表单提交，请致电RegisterOnSubmitStatement。例如。在你的Page_Load:

if (!IsPostBack)

    Page.ClientScript.RegisterOnSubmitStatement(Page.GetType(), "prepareSubmit", "onSubmit();");

【讨论】：

感谢您的回答，我有一个问题，idx 和 elm 的值是多少？

它们分别包含数组中元素的索引和元素本身。 jQuery 将为您提供它们；不需要你做任何事情来初始化它们。只需在函数体内使用它们，传递给.each 方法。

if (!IsPostBack) 可能不应该存在，因为该技巧在随后的回传中停止工作。作为一个侧节点，这个特殊的解决方案似乎也可以很好地与AutoPostBack="true" 配合使用。