ASP.NET RadioButton组后端设置Checked属性异常问题求助

问题描述 #

多个同属GroupName="G2"的RadioButton控件，后端通过按钮事件执行degg26.Checked = True期望选中degg26，但存在异常：

• 手动选中degg26之前的单选按钮，点击按钮后degg26能正常选中；
• 手动选中degg26之后的单选按钮，点击按钮后degg26无法被选中。

页面代码如下：

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="tecTaqeem2.aspx.vb" Inherits="tecTaqeem2" %>
    
<!DOCTYPE html>
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />
        <br />
        <table>
            <tr>
        <td>
        <asp:RadioButton ID="degg20" CssClass="ChkBoxClassTxt" runat="server"   
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="0" />
        </td>
        <td>
        <asp:RadioButton ID="degg23" CssClass="ChkBoxClassTxt" runat="server"  
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="3" />
        </td>
        <td>
        <asp:RadioButton ID="degg24" CssClass="ChkBoxClassTxt" runat="server"   
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="4" />
        </td>
        <td>
        <asp:RadioButton ID="degg25" CssClass="ChkBoxClassTxt" runat="server"   
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="5" />
        </td>
        <td>
        <asp:RadioButton ID="degg26" CssClass="ChkBoxClassTxt" runat="server"   
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="6" />
        </td>
        <td>
        <asp:RadioButton ID="degg27" CssClass="ChkBoxClassTxt" runat="server"  
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="7" />
        </td>
        <td>
        <asp:RadioButton ID="degg28" CssClass="ChkBoxClassTxt" runat="server"  
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="8" />
        </td>
        <td>
        <asp:RadioButton ID="degg29" CssClass="ChkBoxClassTxt" runat="server"   
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="9" />
        </td>
        <td>
        <asp:RadioButton ID="degg210" CssClass="ChkBoxClassTxt" runat="server"   
        style="font-size:20px; color:black; margin:0px; height: 10px; width:10px; accent-color:red;" GroupName="G2" Text="10" />
        </td>
        </tr>
        </table>
    </div>
    </form>
</body>
</html>

问题原因 #

这是ASP.NET WebForms的视图状态还原机制导致的：页面回发时，ASP.NET会先根据客户端提交的表单值还原控件状态，之后才执行按钮的点击事件。如果选中的是degg26之后的单选按钮，表单会提交该按钮的选中状态，ASP.NET还原状态时会标记它为选中；而你在按钮事件中设置degg26.Checked=True后，RadioButton组的渲染逻辑会因为控件顺序问题，用后渲染的选中状态覆盖你设置的degg26选中状态。

解决方案 #

方案1：在Page_Init阶段设置选中状态 #

Page_Init事件早于视图状态还原阶段，此时设置的选中状态不会被后续的视图状态覆盖：

Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init
    If IsPostBack Then
        ' 判断是否是Button1触发的回发
        If Request.Form("__EVENTTARGET") = Button1.UniqueID OrElse Request.Form("__EVENTARGUMENT") = "" Then
            degg26.Checked = True
        End If
    End If
End Sub

方案2：先取消组内所有选中状态，再设置目标按钮 #

在按钮点击事件中，先遍历组内所有RadioButton并取消选中，再设置目标按钮的选中状态，避免状态冲突：

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    ' 递归遍历容器内的所有RadioButton
    Sub UncheckG2Group(ctrl As Control)
        For Each childCtrl As Control In ctrl.Controls
            If TypeOf childCtrl Is RadioButton Then
                Dim rb As RadioButton = DirectCast(childCtrl, RadioButton)
                If rb.GroupName = "G2" Then
                    rb.Checked = False
                End If
            Else
                UncheckG2Group(childCtrl)
            End If
        Next
    End Sub

    ' 取消G2组所有按钮的选中状态
    UncheckG2Group(form1)
    ' 设置目标按钮选中
    degg26.Checked = True
End Sub

方案3：改用RadioButtonList控件 #

RadioButtonList是专门管理单选组的控件，后端设置选中状态更稳定，避免顺序问题：
修改页面代码为：

<asp:RadioButtonList ID="RadioButtonListG2" runat="server" RepeatDirection="Horizontal" CssClass="ChkBoxClassTxt">
    <asp:ListItem Text="0" Value="0"></asp:ListItem>
    <asp:ListItem Text="3" Value="3"></asp:ListItem>
    <asp:ListItem Text="4" Value="4"></asp:ListItem>
    <asp:ListItem Text="5" Value="5"></asp:ListItem>
    <asp:ListItem Text="6" Value="6"></asp:ListItem>
    <asp:ListItem Text="7" Value="7"></asp:ListItem>
    <asp:ListItem Text="8" Value="8"></asp:ListItem>
    <asp:ListItem Text="9" Value="9"></asp:ListItem>
    <asp:ListItem Text="10" Value="10"></asp:ListItem>
</asp:RadioButtonList>

后端按钮事件代码：

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    RadioButtonListG2.SelectedValue = "6"
End Sub

内容的提问来源于stack exchange，提问作者Mohammed Moghazy