Search code examples
c#blazor.net-6.0fluent-uifast-blazor

FluentUI Web Components Select with Blazor - Select Enum values


https://learn.microsoft.com/en-us/fluent-ui/web-components/components/select?pivots=blazor

https://github.com/microsoft/fast-blazor/blob/main/examples/FluentUI.Demo.Shared/Pages/SelectPage.razor

https://brave-cliff-0c0c93310.azurestaticapps.net/SelectPage

Examples only shows values with string and int. What can I do to select enum values without writing custom converters?

<h2>Default</h2>
<FluentSelect @bind-Value="@selectValue">
    <FluentOption>This option has no value</FluentOption>
    <FluentOption Disabled="true">This option is disabled</FluentOption>
    <FluentOption Value="@("hi")">This option has a value</FluentOption>
    <FluentOption Selected="true">This option is selected by default</FluentOption>
</FluentSelect>

<h2>Default with an int type</h2>
<FluentSelect @bind-Value="@selectValue2">
    <FluentOption Value=1>1</FluentOption>
    <FluentOption Value=-1 Disabled="true">-1</FluentOption>
    <FluentOption Value=2>2</FluentOption>
    <FluentOption Value=3 Selected="true">3</FluentOption>
</FluentSelect>

@code {
    string? selectValue;
    int selectValue2;

    List<Option<string>> stringOptions = new()
        {
            { new Option<string> { Key = "1", Value = "One" } },
            { new Option<string> { Key = "2", Value = "Two", Selected = true } },
            { new Option<string> { Key = "3", Value = "Three" } }

        };

    List<Option<int>> intOptions = new()
        {
            { new Option<int> { Key = 1, Value = 1, Disabled = true } },
            { new Option<int> { Key = 2, Value = 2 } },
            { new Option<int> { Key = 3, Value = 3 } }

        };
}

Solution

  • I solved it like this:

    <FluentSelect @bind-Value="@threatDto.Severity" Options="@SeverityOptionList" Required="true">
    </FluentSelect>
    
    @code {
    
        List<Option<Severity?>> SeverityOptionList = Enum.GetValues(typeof(Severity)).Cast<Severity?>().Where(x => x != Severity.None).Select(x => new Option<Severity?> { Key = x.Value, Value = x.Value }).ToList();
    }
    

    Classes:

    public class ThreatDto
    {
    
        [Required, EnumDataType(typeof(Severity))]
        public Severity? Severity { get; set; }
            
    }
    
    public enum Severity
    {
        None = 0,
        Critical = 1,
        High = 2,
        Medium = 3,
        Low = 4
    }