将枚举的每个值绑定到复选框 Blazor

Bub*_*nga 2 c# enums enum-flags blazor .net-5

我有一个 [Flags] 枚举,其中包含我想要收集的一些数据点。我的目标是将每个值(每个位)显示并绑定为单独的复选框以供用户检查。但是,我不知道如何将 Flags 枚举的各个值绑定到组件,也不知道是否可能。为了更好地解释我的观点:

说这是我的枚举:

[Flags]
public enum DataPoints{
     Large = 1,
     Soft  = 2,
     Green = 4,
     Round = 8
}
Run Code Online (Sandbox Code Playgroud)

然后我希望表单的 DataPoints 类型模型中有一个可以保存这些值的属性:

//possible data points like:
// 9: Round and Large
// 6: Soft and Green
public DataPoints Data;
Run Code Online (Sandbox Code Playgroud)

我在想类似以下的内容,但我认为您不能将枚举的各个值/位绑定到这样的组件:

@foreach (DataPoints datum in Enum.GetValues(typeof(DataPoints)))
   {
      <CheckBox @bind-Value="what? Data.datum?"></CheckBox>
   }
Run Code Online (Sandbox Code Playgroud)

Ben*_*973 6

我发现自己在 Blazor 中做了很多事情,就是创建我所说的载体类别,特别是在选择项目时。我使用相同的技术从列表中选择图像、多项选择问题的答案等等。

@foreach (var item in CheckableEnums)
{
    <span> @item.DataPoint.ToString() &nbsp;</span>
    <input type="checkbox" @bind="item.IsSelected" />
    <br />
}
<br />
@{ SumValue = (DataPoints)(CheckableEnums.Where(cb => cb.IsSelected).Select(val => (int)val.DataPoint)).Sum(); }
<span>Selected Flags: </span>@SumValue.ToString()

@code {
    [Flags]
    public enum DataPoints
    {
        Large = 1,
        Soft = 2,
        Green = 4,
        Round = 8
    }
    class CheckableEnum
    {
        public DataPoints DataPoint { get; set; }
        public bool IsSelected;
    }
    DataPoints SumValue { get; set; }
    List<CheckableEnum> CheckableEnums { get; set; } = new List<CheckableEnum>();
    protected override void OnInitialized()
    {
        foreach (var DPvalue in Enum.GetValues(typeof(DataPoints)))
            CheckableEnums.Add(new CheckableEnum() { DataPoint = (DataPoints)DPvalue });
    }
}
Run Code Online (Sandbox Code Playgroud)

-编辑- 之前的小提琴被打破了,所以: https ://blazorfiddle.com/s/t523591k