MudBlazor表格复选框单选功能实现求助

原代码存在几个关键问题导致单选逻辑失效：

• MudCheckBox未使用双向绑定，无法同步UI与数据状态
• 选中事件处理方法无法定位当前点击的元素，且逻辑错误（引用未定义的CheckBox3变量）
• Element类的Checked属性变更时无法通知Blazor更新UI

以下是修正后的完整代码：

页面UI部分 #

<MudTable T="Element" Items="@Elements" Hover="true">
    <HeaderContent>
        <MudTh>checkbox</MudTh>
        <MudTh>Nr</MudTh>
        <MudTh>Name</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="checkbox">
            <MudCheckBox @bind-Value="@context.Checked" 
                         T="bool" 
                         CheckedChanged="@((isChecked) => OnElementCheckedChanged(context, isChecked))" 
                         Color="Color.Warning" 
                         CheckedIcon="@Icons.Material.Filled.PersonPinCircle" 
                         UncheckedIcon="@Icons.Material.Outlined.PersonPinCircle"></MudCheckBox>
        </MudTd>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{50, 100}" />
    </PagerContent>
</MudTable>

代码逻辑部分 #

@code {
    private List<Element> Elements = new List<Element>()
    {
        new Element("helium", 1),
        new Element("borium", 45),
        new Element("argon", 346),
        new Element("oxygen", 51),
        new Element("radium", 467),
    };

    private void OnElementCheckedChanged(Element selectedElement, bool isChecked)
    {
        // 仅当选中状态为true时执行单选逻辑，避免取消选中时清空所有选择
        if (isChecked)
        {
            foreach (var item in Elements)
            {
                item.Checked = item == selectedElement;
            }
            // 通知Blazor更新UI
            StateHasChanged();
        }
        else
        {
            // 可选：如果允许取消选中当前元素，直接设置即可
            selectedElement.Checked = false;
        }
    }

    public class Element
    {
        public string Name { get; set; }
        public int Number { get; set; }
        public bool Checked { get; set; }

        public Element(string name, int number)
        {
            Name = name;
            Number = number;
            Checked = false;
        }
    }
}

关键修正点说明 #

1. 双向绑定：将MudCheckBox的Value改为@bind-Value，确保UI操作能同步到数据对象，反之亦然。
2. 传递当前元素：在CheckedChanged事件中传递当前行的context（即对应的Element对象），这样能准确识别被点击的元素。
3. 修正单选逻辑：遍历所有元素，仅将当前点击的元素设为选中状态，其余设为未选中；通过StateHasChanged()强制Blazor更新UI，确保所有行的复选框状态同步。
4. 处理取消选中：增加判断，只有当用户选中复选框时才执行单选逻辑，允许用户取消选中当前元素（若不需要此功能可移除else分支）。

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