Blazor单选框选中状态异常：新增项自动获取选中状态

问题根源 #

1. Checked属性绑定错误：原代码将布尔逻辑返回字符串"true"/"false"，Blazor无法正确识别绑定状态，导致浏览器默认的单选组行为覆盖手动设置的ESTADO值。
2. 状态同步缺失：未处理单选框点击事件，用户选择项时没有更新对应ESTADO字段，也未重置其他项状态，导致数据与DOM显示不一致。
3. 索引依赖的DOM标识：用循环索引i生成radio的id和label的for，新增项后索引重新计算，引发DOM标识混乱，干扰选中状态维持。

修复步骤 #

1. 修正Checked属性绑定

将radio的checked改为绑定布尔值，同时用项的唯一标识生成ID（避免索引冲突）：

<input type="radio" name="direccion" class="d-flex flex-row gap-1" 
       value="@item.DIRECID" 
       id="direccion-@item.DIRECID" 
       checked="@(item.ESTADO == 1)"
       @onclick="() => OnDireccionSelected(item)" />

2. 添加选中状态同步方法

在组件代码中新增方法，确保只有选中项的ESTADO为1：

private void OnDireccionSelected(Direcciones selectedItem)
{
    foreach (var item in dataDireccionGrid)
    {
        item.ESTADO = ReferenceEquals(item, selectedItem) ? 1 : 0;
    }
}

3. 优化列表渲染（推荐）

使用foreach循环并指定@key，帮助Blazor精准跟踪DOM元素，避免渲染混乱：

@foreach (var item in dataDireccionGrid)
{
    <div class="list-group-item d-flex justify-content-between align-items-center" @key="item.DIRECID">
        <!-- 单选框、标签、按钮代码不变 -->
    </div>
}

4. 完善新增项默认状态

调整保存方法中新增项的ESTADO设置逻辑，确保首项默认选中（可选，按需调整）：

direcciones.ESTADO = dataDireccionGrid.Count == 0 ? 1 : 0;

修改后完整代码示例 #

Blazor页面代码

<Tab Title="Direcciones">
    <Content>
        <div class="d-flex flex-column w-100">
            <button type="button" class="btn btn-primary-custom mt-3" id="btnInsertarDireccion" style="width: max-content" @onclick="showModalInsertarDireccion">
                <i class="bi bi-plus-lg"></i> Insertar
            </button>
            <div class="row w-100 mt-3 m-0">
                <div class="col-12 px-0">
                    @if (dataDireccionGrid?.Count > 0)
                    {
                        <div class="list-group gap-2">
                            @foreach (var item in dataDireccionGrid)
                            {
                                <div class="list-group-item d-flex justify-content-between align-items-center" @key="item.DIRECID">
                                    <div class="d-flex justify-content-start">
                                        <input type="radio" name="direccion" class="d-flex flex-row gap-1" 
                                               value="@item.DIRECID" 
                                               id="direccion-@item.DIRECID" 
                                               checked="@(item.ESTADO == 1)"
                                               @onclick="() => OnDireccionSelected(item)" />
                                        <label for="direccion-@item.DIRECID" class="ml-2">
                                            @item.DIRECCION
                                        </label>
                                    </div>
                                  
                                    <div>
                                        <button class="btn btn-sm btn-outline-secondary rounded my-1" @onclick="(e) => {showModalEditDireccion(item);}"><i class="bi bi-pencil-square "></i></button>
                                        <button class="btn btn-sm btn-outline-secondary rounded" @onclick="(e) => {dataDireccionGrid.Remove(item);}"><i class="bi bi-trash"></i></button>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                    else
                    {
                        <p>No se han encontrado Direcciones.</p>
                    }
                </div>
            </div>
        </div>
    </Content>
</Tab>

组件C#代码

private void OnDireccionSelected(Direcciones selectedItem)
{
    foreach (var item in dataDireccionGrid)
    {
        item.ESTADO = ReferenceEquals(item, selectedItem) ? 1 : 0;
    }
}

private async Task GuardarModalDireccion()
{
    if (isEditDireccion)
    {
        dataDireccionGrid[dataDireccionForm.INDEX] = dataDireccionForm;
    }
    else
    {
        var splitDireccion = dataDireccionForm.CIUDANEID.Split("-");
        if (splitDireccion.Length >= 3)
        {
            Direcciones direcciones = new Direcciones
            {
                CIUDANEID = splitDireccion[0].Trim(),
                DIRECCION = $"{dataDireccionForm.DIRECCION}, {splitDireccion[1].Trim()}, {splitDireccion[2].Trim()}",
                ESTADO = dataDireccionGrid.Count == 0 ? 1 : 0
            };
            dataDireccionGrid.Add(direcciones);
        }
    }

    await modalDireccion.HideAsync();
    dataDireccionForm = new Direcciones();
    StateHasChanged();
}

关键说明 #

• 通过@onclick事件同步数据与DOM状态，确保ESTADO字段始终准确反映选中项。
• 用项的唯一标识生成radio ID，彻底避免索引变化导致的DOM冲突。
• @key属性帮助Blazor高效渲染列表，减少不必要的DOM重建，维持状态稳定。

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