You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在MudCheckbox中用@bind-Value:get/set绑定集合项的存在状态?

角色复选框绑定集合状态的实现与问题解决

更新说明: 我已自行解决问题,发现原本的代码是可行的,只是其他错误混淆了我,没意识到已经写出正确版本。


我用MudForm做了一个带多个角色选择复选框的表单,需求是把复选框的选中状态绑定到模型中IEnumerable集合内是否存在对应角色的状态。期间尝试了多种@bind-Value:get和:set的写法,一度没理清。

以下是完整的可运行代码:

<MudForm Model="@model" @ref="@form">
    <MudStack>
        <MudText Typo="Typo.h6">Roles</MudText>

        <MudCheckBox @bind-Value:get="model.Roles.Any(r => r.Name == 'Admin')"
                     @bind-Value:set="(value) => OnRoleCheckChanged('Admin', value)"
                     Label="Admin" />

        <MudCheckBox @bind-Value:get="model.Roles.Any(r => r.Name == 'User')"
                     @bind-Value:set="(value) => OnRoleCheckChanged('User', value)"
                     Label="User" />
    </MudStack>
</MudForm>
<MudText Typo="Typo.h6">Selected Roles</MudText>
<MudText>@(string.Join(", ", model.Roles.Select(role => role.Name)))</MudText>

@code {
    MudForm form;
    EmployeeViewModel model = new EmployeeViewModel
        {
            Roles = new List<RoleViewModel>
            {
                new RoleViewModel { Name = "Admin" }
            }
        };

    private void OnRoleCheckChanged(string roleName, bool isChecked)
    {
        var roleExists = model.Roles.Any(r => r.Name == roleName);
        if (isChecked)
        {
            if (roleExists) return; // 角色已存在,无需重复添加

            model.Roles = model.Roles.Concat(new[] { new RoleViewModel { Name = roleName } }).ToList();
        }
        else
        {
            // 取消选中时移除角色
            if (roleExists)
            {
                // 重建不包含该角色的列表
                model.Roles = model.Roles.Where(r => r.Name != roleName).ToList();
            }
        }
    }

    public class EmployeeViewModel
    {
        public List<RoleViewModel> Roles { get; set; } = new List<RoleViewModel>();
    }

    public class RoleViewModel
    {
        public string Name { get; set; }
    }    
}

内容的提问来源于stack exchange,提问作者Glazed

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 13:12:43