[RESOLVED]Help with binding enums to dropdownlist in mvc 5

@Html.EnumDropDownListFor(m => m.VehicleType, new { onchange = "enablePassengerCount()" })

The above code displays all the enums in the dropdown. But when I change the value, the VehicleType property in the model is not getting updated.

The javascript function still shows the initial value.

Are you sure this isn’t working properly? Are you receiving any errors or do you have any code within your Javascript function that might be interfering with your value?

I created the following example based on
your other question
regarding the EnumDropDownListFor() helper method that should work as intended :

VehicleController.cs

public class VehicleController : Controller
{
        public ActionResult Index()
        {

            return View();
        }

        [HttpPost]
        public ActionResult Index(Vehicle model)
        {
            return View();
        }
	}

    public class Vehicle
    {
        public VehicleType Type { get; set; }

        public Vehicle() { } 
    }

    public enum VehicleType
    {
        Hovercraft,
        Unicycle,
        Bicycle,
        Car,
        Truck,
        Van,
        Tank,
        Hanglider,
        Airplane,
        Blimp
    }
}

Index.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create a new Vehicle</title>
</head>
<body>
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>Vehicle</h4>
            <hr />
            @Html.ValidationSummary(true)
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    @Html.EnumDropDownListFor(m => m.Type, new { onchange = "enablePassengerCount(this);" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    
    <script type="text/javascript">
        // Your function
        function enablePassengerCount(source) {
            // Get the value that is selected
            var selectedValue = source.value;
            // Get the text of the selected value
            var selectedText = source.options[source.value].innerHTML;
        }
    </script>
</body>
</html>

So basically, when you first launch the page, you’ll see a very simple create screen that looks like the following :

And after making a selection :

You can click the "Create" button and you should see the value that you selected properly mapped to your class within your Controller :

Basically as long as you set this value prior to passing it to the View, it should properly map it. For instance, if in your initial method, you created a model and set a certain value for your VehicleType, it should automatically populate it in the DropDown
when the page loads :

public ActionResult Index()
{
            return View(new Vehicle() { Type = VehicleType.Unicycle });
}

which would display the following :

Leave a Reply