It’s common to use a dropdown list to select a value from an enumeration. In ASP.NET Core MVC you can use Html.GetEnumSelectList to create the items for an enumeration. This is very convenient and very productive. However, this helper doesn’t exist in Blazor. In this post we’ll create something even easier to use. Yes, that possible 😃

The component InputSelect allows to bind a property of type Enum. However, you need to provide all options manually which is error prone and not very productive:

<EditForm Model="model">
    <InputSelect @bind-Value="model.Season">
        <option>Spring</option>
        <option>Summer</option>
        <option>Autumn</option>
        <option>Winter</option>
    </InputSelect>
</EditForm>

@code {
    Model model = new Model();

    class Model
    {
        public Season Season { get; set; }
    }

    enum Season
    {
        Spring,
        Summer,
        Autumn,
        Winter
    }
}

You can make this code more generic by iterating on Enum.GetValues:

<EditForm Model="model">
    <InputSelect @bind-Value="model.Season">
        @foreach (var value in Enum.GetValues(typeof(Season)))
        {
            <option>@value</option>
        }
    </InputSelect>
</EditForm>

#blazor #.net #asp.net core #web

Creating a InputSelect component for enumerations in Blazor
30.10 GEEK