Правильный способ привязки к флажкам для многих вариантов

Question

У меня есть страница для вариантов.Для простоты я сократил его до флажков, которые включают / отключают фрукты.Можно выбирать между несколькими фруктами, и количество фруктов может меняться со временем.Также существует еще одна опция, которая быстро фильтрует фрукты.Настройки сохраняются и извлекаются из LocalStorage с помощью https://github.com/cloudcrate/BlazorStorage

Как я понимаю, привязка может быть привязана только к переменной или свойству, поэтому я не могу сделать:

@{foreach (var fruit in AllFruits) {
        <input type="checkbox" bind=@CheckBoxChanged(fruit.Name)>@fruit.Name
    }
}
<input type="checkbox" bind=@Checked />Show all yellow fruits

Это также не будет работать, поскольку все флажки будут переключать одно и то же свойство:

@{foreach (var fruit in AllFruits) {
        <input type="checkbox" bind=@CheckBoxEnabled>@fruit.Name
    }
}
<input type="checkbox" bind=@Checked />Show all yellow fruits

В итоге я создал компонент, имеющий свойства Name и Enabled и событие, которое указывает на изменение состояния:

@{foreach (var fruit in AllFruits) {
    <Fruit Name=@fruit.Name 
           Enabled=@fruit.Enabled
           OnSettingsChanged=@((Action<string, bool>) FruitClicked)></Fruit>
    }
}
<input type="checkbox" bind=@Checked />Show all yellow fruits

У меня также есть кнопка, которая сохраняет текущие настройки и обработчик события OnSettingsChanged:

<BlazorButton Color="Color.Primary" OnClick=@SaveFruitSettings>Save Changes</BlazorButton>

protected void FruitClicked(string name, bool enabled) {
        _fruits.FirstOrDefault(b => b.Name == name).Enabled = enabled;
}

Часто используется один флажок отключения / включения желтых плодов, который должен давать эффект напрямую.Таким образом, свойство Checked обращается к локальному хранилищу в get / set.Отдельные фрукты не часто меняются и должны быть сохранены в локальном хранилище только после нажатия кнопки сохранения.

Эта установка прекрасно работала в Blaxor 0.5.0, но после обновления до 0.6.0 - нет.Когда флажок желтых фруктов установлен, все отдельные фрукты OnSettingsChanged запускаются после установки с сохраненными значениями из LocalStorage.Цикл foreach, обращающийся к AllFruits, запускается, показывая, что вся страница перерисована или похожа.

Я чувствую, что мне не хватает общей картины того, как это сделать.Как показать флажки для ряда параметров, не создавая отдельные свойства bool для каждого?

Answer 1

Я едва прочитал пару строк в вашем коде, так как спешил. Надеюсь, мой ответ может иметь
какое-то значение для вас ...

@{foreach (var fruit in AllFruits) {
    // This must be done... otherwise all your checkboxes will contain the same value
    var fruitName = fruit.Name;
    // Trigger an event handler for the click event passing the name of the fruit to the event handler
    // You can pass the checked property instead.
    // Note: If you don't set the value property, it should contain the values on or off,
    // at least when form data is passed to the server.
    // Additionally you may **bind** to the **value** property
    <input type="checkbox" id="@fruitName" name="MyFruits" value="@fruitName" onclick=@(() => CheckBoxChanged(fruitName))>
    }