Blazor如何将InputCheckbox选中值绑定到表单模型的字符串列表

共有两种常用方案可以实现直接将选中值同步到表单模型的字符串列表，无需提交时手动收集：

方案1：无需额外载体类，直接操作选中列表 #

该方案不需要定义MyCheckedOption类，直接绑定选中逻辑到模型的SelectedValues属性：

页面代码修改 #

<EditForm Model="MyModel">
  @foreach(var opt in AvailableOptions) 
  {
    <label for="option-@opt">@opt</label>
    <InputCheckbox 
        id="option-@opt" 
        name="option-@opt"
        Value="@MyModel.SelectedValues.Contains(opt)"
        ValueChanged="@((bool isChecked) => ToggleOption(opt, isChecked))"
        ValueExpression="@(() => MyModel.SelectedValues.Contains(opt))"
    />
  }
</EditForm>

逻辑代码新增切换方法 #

@code 
{
  private MyPageModel MyModel = new ();
  private List<string> AvailableOptions = new List<string> 
  {
    "Apple",
    "Banana",
    "Cherry"
  };

  // 新增切换选中状态的方法
  private void ToggleOption(string option, bool isChecked)
  {
    if (isChecked)
    {
        if (!MyModel.SelectedValues.Contains(option))
        {
            MyModel.SelectedValues.Add(option);
        }
    }
    else
    {
        MyModel.SelectedValues.Remove(option);
    }
  }

  public class MyPageModel 
  {
    public List<string> SelectedValues { get; set; } = new();
  }
}

说明：三个绑定参数缺一不可，ValueExpression用于Blazor表单的表达式树校验，缺省会触发运行时报错。该方案默认AvailableOptions中值唯一，如有重复值需额外加唯一标识区分。

方案2：使用载体类自动同步选中列表 #

如果你更倾向使用带选中状态的载体类，可以通过计算属性实现自动同步，无需提交时手动遍历收集：

模型修改 #

public class MyCheckedOption
{
  public string Name {get; set;}
  public bool IsChecked {get; set;}
}

public class MyPageModel 
{
    // 把选项列表放到模型中
    public List<MyCheckedOption> AvailableOptions { get; set; } = new()
    {
        new() { Name = "Apple" },
        new() { Name = "Banana" },
        new() { Name = "Cherry" }
    };
    // 自动计算返回选中的字符串列表
    public List<string> SelectedValues => AvailableOptions.Where(x => x.IsChecked).Select(x => x.Name).ToList();
}

页面绑定修改 #

<EditForm Model="MyModel">
  @foreach(var opt in MyModel.AvailableOptions) 
  {
    <label for="option-@opt.Name">@opt.Name</label>
    <InputCheckbox id="option-@opt.Name" @bind-Value="opt.IsChecked" />
  }
</EditForm>

说明：该方案下SelectedValues会实时跟随复选框选中状态自动更新，无需额外手动处理逻辑。

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