Blazor Radio Button接口异常时状态未更新问题求助

问题核心原因 #

浏览器原生单选按钮的点击行为会立即修改DOM的选中状态，这个动作发生在Blazor的@onclick异步方法执行之前。所以即使你在接口失败后重新获取正确的is_linked_stg并调用StateHasChanged()，浏览器已经把用户点击的按钮设为选中，Blazor的DOM diff无法覆盖这个原生修改，导致状态不同步。

具体解决步骤 #

1. 阻止单选按钮的原生选中行为

在点击事件中先阻止浏览器的默认选中动作，让单选按钮的状态完全由Blazor的绑定值is_linked_stg控制：

<div class="switch-toggle switch-3 switch-candy">
    <input type="radio" name="stg_linkage_state" id="stg_linkage_off" value="off" 
           checked="@(is_linked_stg == -1)" 
           @onclick="async (eventArgs) => { 
               eventArgs.PreventDefault(); // 阻止原生选中行为
               await ChangeLinkageSTGGroup(mapping, group, false); 
           }" />
    <label for="stg_linkage_off" onclick=""></label>
    <input type="radio" name="stg_linkage_state" id="stg_linkage_na" value="na" 
           checked="@(is_linked_stg == 0)" disabled />
    <label for="stg_linkage_na" onclick=""></label>
    <input type="radio" name="stg_linkage_state" id="stg_linkage_on" value="on" 
           checked="@(is_linked_stg == 1)" 
           @onclick="async (eventArgs) => { 
               eventArgs.PreventDefault(); // 阻止原生选中行为
               await ChangeLinkageSTGGroup(mapping, group, true); 
           }" />
    <label for="stg_linkage_on" onclick=""></label>
</div>

2. 统一状态更新逻辑

确保接口成功或失败时，都通过修改is_linked_stg来控制单选按钮状态，让Blazor的绑定机制负责渲染：

protected async Task ChangeLinkageSTGGroup(VirtualMapping_CL_Sub mapping, VirtualGroup group, bool IsLinked)
{
    var response = await Http.PostAsJsonAsync("/api/mapping_cl/linkage_stg/change", communication);

    if (response.IsSuccessStatusCode)
    {
        // 成功时直接根据操作设置状态
        is_linked_stg = IsLinked ? 1 : -1;
        // 异步方法结束后Blazor会自动触发渲染，StateHasChanged()可省略
    }
    else
    {
        // 失败时重新拉取正确状态
        is_linked_stg = await Http.GetFromJsonAsync<int>(
            $"/api/mapping_cl/linkage_stg/view/{group.group_id}/-1", 
            Parameters.jsonSerializerOptions
        );
        var responseContent = await response.Content.ReadAsStringAsync();
        await ShowTheExceptionModal(responseContent);
        // 用InvokeAsync确保在组件上下文内触发渲染
        await InvokeAsync(StateHasChanged);
    }
}

3. 额外排查点

• 如果是Server-Side Blazor，检查组件是否启用了预渲染，预渲染可能导致初始状态和交互状态冲突；
• 确认没有第三方JS库修改了单选按钮的DOM状态，干扰Blazor的绑定逻辑；
• 可以在StateHasChanged()前后打印is_linked_stg的值，确认状态确实被正确更新。

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