Select Enum TagHelper

Create select list dropdown control from Enum, supports localization and specifying selected item

Live demo : http://demo.ziyad.info/en/SelectEnum

By default .NetCore offers a handy way to create select list dropdown from enum. But it is not so helpful when it comes to localization or defining default selected item.

First I will show the default way to create dropdown select list from enum. Suppose that we have an enum for weekdays as below:

public enum WeekDays { MON, TUS, WED, THU, FRI, SAT, SUN }

 

To create a dropdown select list from this enum;

<select name="weekDays" asp-items="Html.GetEnumSelectList<WeekDays>()"></select>

this will work fine, but with this approach we can't define the default selected item without adding extra if control inside the html tags

<select name="weekDays" asp-items="Html.GetEnumSelectList<WeekDays>()">
@foreach(var day in Enum.GetNames(typeof(WeekDays)))
{
    if(day == "FRI")
    {
        <option value="@day" selected>@day</option>
    }
}
</select>

 

additionally, if we need to localize the display name we need additional code as below:

<select name="weekDays" asp-items="Html.GetEnumSelectList<WeekDays>()">
@foreach(var day in Enum.GetNames(typeof(WeekDays)))
{
    if(day == "FRI")
    {
        <option value="@day" selected>@_localizer[day]</option>
    } else {
        <option value="@day">@_localizer[day]</option>
    }
}
</select>

 

So, here is SelectEnumTagHelper comes for help; after installing the nuget package:

Install-Package LazZiya.TagHelpers -Version 1.0.3

 

add reference to the taghelpers in _ViewImports.cshtml :

@addTagHelper *, LazZiya.TagHelpers

 

then simply create the select list from enum as below:

1 - Default settings : Create raw dropdown from enum:

<select-enum 
    enum-type="typeof(WeekDays)" 
    name="weekDay">
</select-enum>

 

2- Set selected value: Add selected value property.

<select-enum 
    enum-type="typeof(WeekDays)" 
    selected-value="(int)WeekDays.Friday" 
    name="weekDay">
</select-enum>

 

3- Localize display names: Use localization delegate to localize display names of the enum members. Notice that the Localization service must be injected to the related view:

@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

<!-- other html code... -->

<select-enum 
    enum-type="typeof(WeekDays)" 
    selected-value="(int)WeekDays.Friday" 
    text-localizer-delegate="delegate(string s) { return Localizer[s].Value; }"
    name="weekDay">
</select-enum>

 

or if using a shared resource culture localization approach :

<select-enum 
    enum-type="typeof(WeekDays)" 
    selected-value="(int)WeekDays.Friday" 
    text-localizer-delegate="delegate(string s) { return MyLocalizer.Text(s); }"
    name="weekDay">
</select-enum>

Last but not least; SelectEnumTagHelper can read the DisplayAttribute value and use it as display name or localization. If no Display attribute is defined the enum field name will be used instead, so our enum can be as below as well:

public enum WeekDays { 
    [Display(Name = "Monday")]
    MON, 

    [Display(Name = "Tuesday")]
    TUS, 

    [Display(Name = "Wednesday")]
    WED, 

    [Display(Name = "Thursday")]
    THU, 

    [Display(Name = "Friday")]
    FRI, 

    [Display(Name = "Saturday")]
    SAT, 

    [Display(Name = "Sunday")]
    SUN 
}

Live demo : http://demo.ziyad.info/en/SelectEnum