Question

我有一个选项页面。为了简单起见，我将其简化为启用/禁用水果的复选框。一个可以在几种水果之间选择，并且水果的数量可以随时间变化。还存在一种可以快速过滤水果的其他选项。借助https://github.com/cloudcrate/BlazorStorage

可以将设置存储到LocalStorage或从LocalStorage中检索设置。

据我了解，绑定只能绑定到变量或属性，所以我不能这样做：

@{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

我最终要做的是创建一个具有名称和启用属性以及指示状态更改的事件的组件：

@{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后则无效。单击黄色水果复选框后，使用从LocalStorage中保存的值进行设置后，将触发所有单个水果OnSettingsChanged。运行访问AllFruits的foreach循环，指示整个页面已重新呈现或类似。

我觉得我不知道如何做到这一点。如何在不为每个选项创建单独的布尔属性的情况下显示多个选项的复选框？

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))>
    }

正确绑定许多选项的复选框的方法

1 个答案: