Ndtyjky

I have a page for options. To keep it simple I've cut it down to checkboxes which enables/disables fruits. One can select between several fruits and the number of fruits can vary over time. Also one other options, which quick filters fruits, exists. The settings are stored to and retrieved from LocalStorage with help of https://github.com/cloudcrate/BlazorStorage

As I understand, bind can only bind to a variable or property so I can't do:

@{foreach (var fruit in AllFruits) {

        <input type="checkbox" bind=@CheckBoxChanged(fruit.Name)>@fruit.Name

    }

}

<input type="checkbox" bind=@Checked />Show all yellow fruits

This wont work either since all checkboxes will toggle the same property:

@{foreach (var fruit in AllFruits) {

        <input type="checkbox" bind=@CheckBoxEnabled>@fruit.Name

    }

}

<input type="checkbox" bind=@Checked />Show all yellow fruits

What I ended up doing was creating a component which has properties Name and Enabled and an event which indicate state change:

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

I also have a button which saves the current settings and an handler to the event 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;

}

The single checkbox disabling/enabling yellow fruits is used often and should give effect directly. So the Checked property accesses local storage in get/set. The individual fruits are not changed often and should only be saved to local storage after save is pressed.

This setup worked fine in Blaxor 0.5.0 but after upgrade to 0.6.0 it doesn't. When the yellow fruits checkbox is clicked all the individual fruits OnSettingsChanged are fired after being set with the saved values from LocalStorage. The foreach loop accessing AllFruits is run indicating that the whole page is rerendered or similar.

I feel that I'm missing the big picture on how to do this. How do I show checkboxes for a number of options without creating individual bool properties for each?

I've hardly read a couple of lines in your code, as I was in a hurry. Hope my answer may have

some value for you...

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

    }