How to list checked enum values only?

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)

score 2 · Answer 1 · answered Feb 16 '23 at 15:06

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

Thanks a lot too, both approached work great, I was resolved and got it working with a — Maya, Feb 17 '23 at 17:53

score 0 · Accepted Answer · answered Feb 16 '23 at 18:36

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

How to list checked enum values only?

2 Answers2