Blazor中foreach循环生成radio单选按钮时如何设置checked默认选中

原写法失效原因 #

Blazor对checked这类HTML布尔属性有特殊处理规则：

• 当你给布尔属性绑定的值为false或null时，Blazor会直接省略该属性，不会渲染到最终的HTML标签中
• 只要绑定值不是以上两种情况，哪怕你传的是空字符串，Blazor都会渲染该属性
  而原生HTML中只要checked属性出现在单选框标签上，无论赋值是什么，该单选框都会被判定为选中状态。你之前的两种写法中，即使判断不满足也返回了空字符串，导致所有单选框都被加上了checked属性，自然无法实现预期效果。

推荐解决方案：直接给绑定变量赋初始值 #

这是最简单且符合Blazor绑定逻辑的写法，无需额外在循环内编写checked判断，直接在@code块中给my_selection设置默认选中项的Key即可，Blazor会自动匹配对应单选框的选中状态：

@code {
    // 直接赋值为你需要默认选中的选项的Key，比如默认选第二个选项optiontwo
    private string my_selection = "optiontwo";

    private void do_something() {
        // Use "my_selection" here ...
    }
}

你也可以优化单选框的写法，使用Blazor内置的双向绑定替代手动onclick事件，代码更简洁：

@foreach (KeyValuePair<String, String> entry in my_radio_options) {
    <label for="my_selected_option-@entry.Value">@entry.Value</label>
    <input type="radio" 
           name="my_selected_option" 
           id="my_selected_option-@entry.Value" 
           value="@entry.Key" 
           @bind="my_selection">
}

备选方案：手动绑定checked布尔属性 #

如果你确实需要在循环内做判断控制选中状态，直接给checked属性绑定布尔值即可，不要返回字符串：

示例1：默认选中第一个选项 #

@{bool first = true;}
@foreach (KeyValuePair<String, String> entry in my_radio_options) {
    <input type="radio" 
           name="my_selected_option" 
           id="my_selected_option-@entry.Value" 
           @onclick="() => my_selection = entry.Key" 
           checked="@first">
    first = false;
}

示例2：默认选中第二个选项 #

@foreach (KeyValuePair<String, String> entry in my_radio_options) {
    <input type="radio" 
           name="my_selected_option" 
           id="my_selected_option-@entry.Value" 
           @onclick="() => my_selection = entry.Key" 
           checked="@(entry.Key == my_radio_options.ElementAt(1).Key)">
}

当判断不成立时，checked绑定的值为false，Blazor会自动省略该属性，对应单选框就不会被选中。

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