将选中的 InputCheckbox 元素列表映射到表单模型上的字符串列表答案

【问题标题】：Mapping list of checked InputCheckbox elements to list of string on the form model将选中的 InputCheckbox 元素列表映射到表单模型上的字符串列表
【发布时间】：2021-09-23 13:48:40
【问题描述】：

我有一个字符串列表，我想在表单中列出。用户应该能够选中他们想要的字符串的复选框，并且我想将列表值绑定回表单模型。

让我们看一下我目前已经弄清楚的代码：

//mypage.razor
//...
<EditForm Model="MyModel">
  @foreach(var opt in AvailableOptions) 
  {
    <label for="option-@opt">@opt</label>
    <InputCheckbox id="option-@opt" name="option-@opt" type="checkbox" @bind="@(/* bind to what?!? */)"/>
  }
</EditForm>

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

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

这就是我开始的地方。当然，虽然我可以将标签的值显示为循环的一部分，但不清楚如何将 Checked 属性的布尔值绑定到表单模型，尤其是当我想保存 @987654323 时@ 字符串值到表单模型的列表（用于检查值），而不是布尔值的集合。

查看answer 的类似问题，我的想法是我会创建一个带有名称和布尔值的“运营商”类：

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

现在，当我在 InputCheckbox 中绑定时，我现在可以将 AvailableOptions 设置为 MyPageModel 列表并执行 @bind="opt.IsChecked"，但这现在绑定到 MyPageModel 并且不会绑定回我的表单模型。

现在，在我的 OnValidSubmit 中，我可以获取这些值并填充我的表单模型，但这似乎并不理想。

相反，有没有办法将检查属性的布尔值（由我后面的代码中的某些内容填充）映射到字符串列表（其中我要使用的值是“运营商”类的另一个属性 I正在循环一个我可以直接存储在表单模型上的列表？

【问题讨论】：

表单模型真正做的唯一事情是提供一个模板和一些验证功能。但对于只包含显示名称和布尔值的对象，则无需验证。除非您添加更多输入，否则我什至根本不会打扰 EditForm。我只有一个 List<MyCheckedOption> 用于显示和复选框绑定。

标签： data-binding blazor

【解决方案1】：

您可以使用 Linq 的 Select 方法将您的列表转换为其他内容——在以下情况下，是 MyCheckableOption 对象的列表。稍后，当你想对列表做一些事情时，你可以反过来做同样的事情来回到List<string>

@foreach (var opt in AvailableOptions)
{
    <label>@opt.Name&nbsp;</label>
    <input type="checkbox" @bind="opt.IsChecked" />
    <br/>
}
<hr />
@foreach (var item in AvailableOptions.Where(option => option.IsChecked))
{
    <div>@item.Name has been selected. </div>
}
@code
{
    private List<MyCheckableOption> AvailableOptions = new List<string>
    {
        "Apple",
        "Banana",
        "Cherry"
    }
    .Select(option => new MyCheckableOption {Name = option }).ToList();

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

【讨论】：