ASP.NET MVC 4 jQuery change function in edit view

Question

This is an odd problem that I'm hoping someone can find an solution to. I have essentially the same views that use dropdownlist with jQuery function that shows and hides a field depending on the selection make in the dropdownlist box. I have this working in a create view using ViewBag to pass in the selectlist for the drop down. I was wondering if I could do the same in my edit view using a view model and a DropDownListFor helper.

JQuery function in create view:

$("#GenderId").change(function () {
        if ($("#SelectedGenderId").val() == 3) {
            $(".gender-description").show();
        } else {
            $(".gender-description").hide();
        }
 });

And the Create View:

    <div class="editor-label">
        @Html.LabelFor(model => model.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownList("GenderId", (SelectList)ViewBag.GenderId, "--Select One--", new { id = "GenderId" })
        @Html.ValidationMessageFor(model => model.GenderId)
    </div>


    <div class="gender-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.GenderDescription)
            @Html.ValidationMessageFor(model => model.GenderDescription)
        </div>
    </div>

In order to get my Edit view drop downs to work correctly I changed my methodology to a view model instead of ViewBag (which I think I will also want to change my Create View over to if I can get the edit view to work correctly).

Edit View:

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders)
        @Html.ValidationMessageFor(model => model.Client.GenderId)
    </div>

    <div class="gender-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.GenderDescription)
            @Html.ValidationMessageFor(model => model.Client.GenderDescription)
        </div>
    </div>

View Model:

public class ClientViewModel
{
    public Client Client { get; set; }

    [Display(Name = "Client Gender")]
    public string SelectedGenderId { get; set; }
    public IEnumerable<SelectListItem> Genders { get; set; }

    [Display(Name = "Client Setting")]
    public string SelectedSettingId { get; set; }
    public IEnumerable<SelectListItem> Settings { get; set; }
}

The ViewModel binding works and the drop downs populate with the existing selection which I could not get to work correctly using the ViewBag (which is why I changed to a ViewModel instead of ViewBag in the first place). I'm not sure what-so-ever on how I would change the jQuery function to bind it to the DropDownListFor to listen for changes. Any ideas would be very much appreciated.

Answer 1

You can pass the id to your html helper as follows:

@Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders, new {id="GenderId"} )

OR

You can bind the jquery function on name Genders as follows:

$("[name*='Genders']").change(function () {
    if ($("#SelectedGenderId").val() == 3) {
        $(".gender-description").show();
    } else {
        $(".gender-description").hide();
    }
});