Question

I have a Employee entity that I’m binding to an “Edit” view in an MVC3/Razor application. The Employee entity has a property for OccupationTypeId. OccupationTypeId points to the OccupationType table which contains several lookup values. The natural choice would be to use @Html.DropDownListFor to render a <select> tag containing a list of Occupations.

The OccupationType table schema is fairly standard: Id, Name, Description, IsEnabled. Since OccupationTypes can be disabled, I want the OccupationTypeId drop down to still render disabled options so the user can always see their selection if it’s disabled, but a disabled option can’t be selected by the user. In other words, a user can’t change an existing OccupationTypeId to a disabled option.

I thought about creating a @Html extension method to build my <select> tag with the options and simply tack on a disabled attribute to disabled options. I think that would be straight forward…

However, disabled selected options don’t seem to post back to the controller method. In other words, Employee.OccupationTypeId would be null when I post to Edit.

Is there any way to change this behavior or is this built in to MVC 3? I thought about using hidden fields, but what if OccupationTypeId is required and I have validation enabled?

Has anyone else faced this?

Thanks

Answer 1

You could have a hidden field that gets updated when the change event occurs in the dropdown list. This way the OccupationTypeId field is always passed.

<input name='CurrentOccupationId' type='hidden' value='@Model.Employee.OccupationTypeId' />

<script>
    $(function() {
        $('#dropDownId').change(function() {
            $('input[name="CurrentOccupationTypeId"]').val($(this).val());
        });
    });
</script>