C# Blazor Enum 값 바인딩 하기

C# Blazor Enum 값 바인딩 하기

 

Enum 값을 콤보박스에 바인딩 하는 방법을 알아봅니다.

먼저 아래의 Enum 을 생성합니다.

public enum MyEnum
{
    Option1,
    Option2,
    Option3
}

Option1~3 까지의 항목이 콤보박스에 바인딩되도록 하려면

select 태그를 이용하여 foreach 문으로 Enum 항목을 option 태그를 이용해 추가하면 됩니다.

<select style="height:30px">
    @foreach (var value in Enum.GetValues(typeof(MyEnum)))
    {
        <option value="@value">@value</option>
    }
</select>

결과

 

여기에서 선택한 값을 처리하기 위해서는 아래처럼 @onchange 를 통해 처리하면됩니다.

<select @onchange="OnEnumSelected" style="height:30px">
    @foreach (var value in Enum.GetValues(typeof(MyEnum)))
    {
        <option value="@value">@value</option>
    }
</select>

@code{
    private MyEnum selectedEnumValue;

    private void OnEnumSelected(ChangeEventArgs e)
    {
        if (Enum.TryParse<MyEnum>(e.Value?.ToString(), out var result))
        {
            selectedEnumValue = result;
        }
    }

    public enum MyEnum
    {
        Option1,
        Option2,
        Option3
    }
}