How to list checked enum values only? - checkbox

Question

I’m learning Blazor and was trying to put/save in a list some enum elements, only the ones that are checked. I have read loads of hints on stackoverflow and other web sites but am still unable to achieve that, I know something is missing but I’m blind for now
Let’s say I have an enum in a separate class calle Enums:
public enum Browsers
{
Chrome,
Edge,
Firefox,
Opera,
Safari,
Vivaldi
}
Here is the html part:
#page "/Sub2"
#using TestPatternBuilder.Data
<div class="col">
<div>Browsers:</div>
#foreach (var browser in Enum.GetValues<Browsers>())
{
<input class="form-check-input mx-0" type="checkbox" id="browsers" value="#browser" />
<label class="ms-1" for="browsers">#browser</label><br />
}
<button class="btn btn-secondary my-3" #onclick="AddBrowsers">Add Browsers</button>
<ul class="mt-2">
#foreach (var br in selectedBrowsers)
{
<li>#br.BrowserName</li>
}
</ul>
</div>
And the code part:
#code{
List<TestBrowser> selectedBrowsers = new List<TestBrowser>();
private void AddBrowsers()
{
foreach (Browsers item in Enum.GetValues(typeof(Browsers)))
{
selectedBrowsers.Add(new TestBrowser { BrowserName = item, isChecked = true });
}
}
}
I seem to have it all wrong, tried to bind without success, no idea where the isChecked state is missing...
[enter image description here](https://i.stack.imgur.com/R7y6a.png)

Answer 1

To achive this you'll need some sort of object to hold both your checked state as well as the enum value. For example:
public class SelectableBrowsers
{
public bool IsChecked { get; set; }
public Browsers Browser { get; set; }
}
Then you can generate a List of all enum values like this:
private List<SelectableBrowsers> _browsers = new List<SelectableBrowsers>();
protected override void OnInitialized()
{
foreach (var browser in Enum.GetValues<Browsers>())
{
_browsers.Add(new SelectableBrowsers
{
Browser = browser
});
}
}
Now you can output the browsers based on your generated list like this:
#foreach (var browser in _browsers)
{
<input #bind="browser.IsChecked" class="form-check-input mx-0" type="checkbox" id="browsers" />
<label class="ms-1" for="browsers">#browser.Browser</label><br />
}
Finally in your AddBrowsers you can loop every selected element like this:
private void AddBrowsers()
{
foreach (selectedBrowsers browser in _browsers.Where(x => x.IsChecked))
{
selectedBrowsers.Add(new TestBrowser { BrowserName = item.Browser, isChecked = true });
}
}
Hope this helps :)

Answer 2

An interesting alternative using Enum Flags:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<div>
#foreach (var browser in Enum.GetValues<Browsers>())
{
<div>
<input class="form-check-input mx-0" type="checkbox" id="browsers" value="#(isSelected(browser))" #onchange="() => AddToList(browser)" />
<label class="ms-1" for="browsers">#browser</label>
</div>
}
</div>
<div class="alert alert-info mt-2">
#foreach (var browser in Enum.GetValues<Browsers>())
{
#if (browser == (selectedBrowsers & browser))
{
<div>
#browser
</div>
}
}
</div>
#code {
private Browsers selectedBrowsers;
private bool isSelected(Browsers browser)
=> (selectedBrowsers & browser) == browser;
private Task AddToList(Browsers browser)
{
if ((selectedBrowsers & browser) == browser)
selectedBrowsers &= ~browser;
else
selectedBrowsers = selectedBrowsers | browser;
return Task.CompletedTask;
}
public enum Browsers
{
Chrome = 1,
Edge = 2,
Firefox = 4,
Opera = 8,
Safari = 16,
Vivaldi = 32
}
}