How can I use the values of an enum class as options for an InputSelect?
Example enum:
public enum Test
{
Test1,
Test2
}
I am using with Blazor with Razor components.
-
Do you always accept an answer on a count of the user's name ?enet– enet2020-07-19 21:00:42 +00:00Commented Jul 19, 2020 at 21:00
-
I appreciate all answers. I selected the one I did because if was the most focused one, concentrating of how to use the values of an enum class as options. Yours goes beyond that, which might help some people more than the selected answer, but the selected answer is more focused. is that what you mean?me.at.coding– me.at.coding2020-07-19 21:09:13 +00:00Commented Jul 19, 2020 at 21:09
-
1meziantou.net/…Movsar Bekaev– Movsar Bekaev2021-11-01 03:37:25 +00:00Commented Nov 1, 2021 at 3:37
Add a comment
|
4 Answers
Here's a working sample how to use enum in InputSelect component:
<EditForm EditContext="@EditContext">
<DataAnnotationsValidator />
<div class="form-group">
<label for="name">Enter your Name: </label>
<InputText Id="name" Class="form-control" @bind-Value="@comment.Name"></InputText>
<ValidationMessage For="@(() => comment.Name)" />
</div>
<div class="form-group">
<label for="body">Select your country: </label>
<InputSelect @bind-Value="@comment.Country" >
@foreach (var country in Enum.GetValues(typeof(Country)))
{
<option value="@country">@country</option>
}
</InputSelect>
<ValidationMessage For="@(() => comment.Country)" />
</div>
<p>
<button type="submit">Submit</button>
</p>
</EditForm>
@code
{
private EditContext EditContext;
private Comment comment = new Comment();
protected override void OnInitialized()
{
EditContext = new EditContext(comment);
base.OnInitialized();
}
public enum Country
{
USA = 1,
Britain,
Germany,
Israel
}
public class Comment
{
public string Name { get; set; }
public Country Country { get; set; }
}
}
Hope this helps...
Comments
So in short it's like this:
<InputSelect @bind-Value="@YourEnum">
@foreach (var value in Enum.GetValues<YourEnumType>()) {
<option value="@value">@value</option>
}
</InputSelect>
Comments
<select>
@foreach (var Item in Enum.GetValues(typeof( DayOfWeek)))
{
<option value="@Item">@Item</option>
}
2 Comments
Tore Aurstad
Although this is an answer if one were to use traditional razor syntax and MVC, the question is to use an InputSelect in Blazor. Im upvoting the answer to enhet instead. IMHO enhet's answer should perhaps be marked as the correct answer instead.
MrC aka Shaun Curtis
This is not the correct answer as it steers anyone coming to this Q/A later to believe you should use select instead of InputSelect. While it works, you lose all the benefits of using a Blazor Input component in the Edit Context. I got here because and commented because someone referred to this question at a much later date.
@enet answer is correct.
To add to this, sometimes enum values won't accept specific chars. you can edit the display of enum value to display specific chars in the code if you have filtered or changed enum values to store correctly. like below in my enum i replace all spaces with underscore. so you can add this to the code to display the enum values on the dropdown correctly.
<InputSelect @bind-Value="@updateUserDetails.Nationality" class="dropDownSelectList">
@foreach (var countryName in Enum.GetValues(typeof(Nationality)))
{
<option value="@countryName">@(@countryName.ToString().Replace("_", " ").Replace("HH", "-"))</option>
}
</InputSelect>