Is it possible to use Enum values rather than indexes in Javascript onChange function on a Select tag?

user_3154478 0
Viewed 229

I've got a select tag in my view that's populated with items from an enum in my class. I'm using the selected value to show/hide elements on my page. This was a set of radio buttons before but as the number of options grew, I wanted to put it in a nicer form control than a bunch of buttons. To test functionality I'm just trying to display the selected value before I re-implement the show/hide.

My model

    [Serializable]
    public class AddUser
    {
        [Required]
        [Display(Name = "User Type")]
        public UserTypes UserType { get; set; }

        public enum UserTypes
        {
            [Display(Name = "Standard")]                    Standard,
            [Display(Name = "Standard + Email")]            StandardAndEmail,
            [Display(Name = "Standard + Email + Phone")]    StandardAndEmailAndPhone,
            [Display(Name = "Email Only")]                  EmailOnly,
            [Display(Name = "Phone Only")]                  PhoneOnly
        }
}

Tag from view View

<select id="userType" class="form-control" asp-for="UserType" asp-items="Html.GetEnumSelectList<AddUser.UserTypes>()" onchange="userTypeSelect()">
    <option selected="selected" value="">Select</option>
</select>
<span asp-validation-for="UserType" class="text-danger"></span>

Javascript

<script type="text/javascript">
    function userTypeSelect() {
        var userType = document.getElementById("userType").value;
        console.log('User Type: ' + userType)
    }
</script>

Here is the resulting HTML

Raw HTML

Desired result would be the rendered HTML options looking like this:

<option value="Standard">Standard</option>

Since I plan on using the value in Javascript, having access to the name rather than just an index would be ideal for code readability - especially since this isn't going to a database. I've been at this all morning trying to figure out how to get this to work.

Is this possible? If so, is it still better to just use the ID anyway?

asp.net-core asp.net-mvc javascript
1 Answers

It's a X|Y question since on server side you can get id from value or get value from id , so it's up to you to pass id or value to server side from front end . If you want to show <option value="Standard">Standard</option> you can write extension method like :

public static class ExtensionMethods
{
    public static IEnumerable<SelectListItem> GetEnumValueSelectList<TEnum>(this IHtmlHelper htmlHelper) where TEnum : struct
    {
        return new SelectList(Enum.GetValues(typeof(TEnum)).OfType<Enum>()
            .Select(x =>
                new SelectListItem
                {
                    Text = x.ToString(),
                    Value = x.ToString()
                }), "Value", "Text");
    }

}

And use like :

<select id="userType" class="form-control" asp-for="UserType" asp-items="Html.GetEnumValueSelectList<aspnetcorerepos.Controllers.HomeController.AddUser.UserTypes>()" >
    <option selected="selected" value="">Select</option>
</select>

But IMO it's more clear to identify 0/1 rather than Standard/StandardAndEmail on server side . But it's your choice to use id/value and you can decide the logic .

user_57514040
Related