带有数组模型的 Bootstrap Vue B-Checkbox 的 Blazor 实现答案

【问题标题】：Blazor implementation of Bootstrap Vue B-Checkbox with array model带有数组模型的 Bootstrap Vue B-Checkbox 的 Blazor 实现
【发布时间】：2020-04-23 21:28:01
【问题描述】：

我正在尝试提出一个使用带有多个复选框的数组类型模型的 Blazor 实现。

Vue 组件：

<template>
  <div>
    <b-form-group label="Using sub-components:">
      <b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
        <b-form-checkbox value="orange">Orange</b-form-checkbox>
        <b-form-checkbox value="apple">Apple</b-form-checkbox>
        <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
        <b-form-checkbox value="grape">Grape</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>
    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
      }
    }
  }
</script>

Blazor 组件：

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="@id" name="@name" @onchange="@((ChangeEventArgs) => CheckedChanged(ChangeEventArgs, value))">
    <label class="custom-control-label" for="@id">@label</label>
</div>

@code {
    [Parameter]
    public string id { get; set; }
    [Parameter]
    public string name { get; set; }
    [Parameter]
    public object value { get; set; }
    [Parameter]
    public List<object> model { get; set; }
    [Parameter]
    public EventCallback<List<object>> modelChanged { get; set; }
    [Parameter]
    public string label { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

    protected void CheckedChanged(ChangeEventArgs args, object value)
    {
        if(!model.Any(i => i == value))
        {
            model.Add(value);
        }
        else
        {
            model.Remove(value);
        }
    }
}

用法：

@foreach (string timezone in DistinctTimezones)
{
    <BCheckbox @bind-model="@FilterTimezones" value="@timezone" label="@timezone" id="@(string.Format("timezone_{0}", timezone))" name="@(string.Format("timezone_{0}", timezone))" />
}

<p>Selected:</p>
@foreach(var timezone in FilterTimezones)
{
    @timezone
}

@code {
    protected List<string> DistinctTimezones { get; set; } = new List<string>{"Central", "Eastern"};
    protected List<object> FilterTimezones { get; set; } = new List<object>();
}

当我选中复选框时，FilterTimezone 对象不会使用选中复选框中的值进行更新。这是否已经成为可能，而我过于复杂化了？我只知道将值绑定到非集合类型。

【问题讨论】：

标签： c# .net-core blazor

【解决方案1】：

我会这样做（这里的字符串只是为了简化以获得想法） CollectionCheckBox.razor

<input type="checkbox" @bind=isChecked />

@code
{
    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public List<string> Model {get; set;}

    private bool isChecked
    {
         get => Model.Any(el => el == Value);
         set
         {
              if(value)
              {
                   if(!Model.Any(el => el == Value) Model.Add(Value);
              }
              else
                  Model.Remove(Value); 
         }
    }
}

然后在父组件中你就做

<CollectionCheckBox Model="@Model", Value="Orange" />
<CollectionCheckBox Model="@Model", Value="Apple" />
<CollectionCheckBox Model="@Model", Value="Pineapple" />
<CollectionCheckBox Model="@Model", Value="Grape" />

@code
{
    private List<string> Model = new List<string();
}

【讨论】：