MVC 4 - Cascading Dropdown Lists - Issue with Ajax JavaScript Call

Question

I have an MVC 4 app with a View containing two dropdown lists. The user selects a value in the first dropdown and then an Ajax call is made to populate the second dropdown based on the contents of the first.

My JavaScript code looks as follows and gets called when the user selects an item in the first dropdown:

function GetAutoModel(_manufacturerId) {

    var autoSellerListingId = document.getElementById("AutoSellerListingId").value;

    $.ajax({
        url: "/AutoSellerListing/GetAutoModel/",
        data: { manufacturerId: _manufacturerId, autoSellerListingId: autoSellerListingId },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>-- Select --</option>";

            for (var x = 0; x < data.length; x++) {
                **if (data[x].Selected) {**
                    markup += "<option selected='selected' value=" + data[x].Value + ">" + data[x].Text + "</option>";
                }
                else
                    markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
            }
            $('#autoModel').html(markup).show();
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });
}

The Ajax call works correctly. However, the data that gets returned for the second dropdown contains a selected item and I'm trying to detect the selected item (via the 'if' statement), and render the HTML appropriately. The problem is that 'Selected' doesn't seem to be a property of 'data' because each value evaluates to false, even though one of the values is true.

Am I doing something wrong? Or is there a better way to do this?

The following is the controller code:

[HttpPost]
public ActionResult GetAutoModel(int manufacturerId, int autoSellerListingId)
{
    int modelId = 0;

    // Get all the models associated with the target manufacturer
    List<AutoModel> modelList = this._AutoLogic.GetModelListByManufacturer(manufacturerId);

    // If this is an existing listing, get the auto model Id value the seller selected.
    if (autoSellerListingId > 0)
        modelId = this._systemLogic.GetItem<AutoSellerListing>(row => row.AutoSellerListingId == autoSellerListingId).AutoModel.AutoModelId;

    // Convert all the model data to a SelectList object
    SelectList returnList = new SelectList(modelList, "AutoModelId", "Description");

    // Now find the selected model in the list and set it to selected.
    foreach (var item in returnList)
    {
        if (item.Value == modelId.ToString())
            item.Selected = true;
    }

    return Json(returnList);
}

SelectLists don't have a selected property. They do have a SelectedValue property — Dave Alperovich
– Dave Alperovich, Commented Mar 30, 2013 at 14:22

nuhusky2003 · Accepted Answer · 2013-03-31 00:56:44Z

2

Try this instead (add modelId to constructor of SelectList, and remove the foreach block):

// Convert all the model data to a SelectList object
SelectList returnList = new SelectList(modelList, "AutoModelId", "Description", modelId);

return Json(returnList);

edited Mar 31, 2013 at 0:56

answered Mar 31, 2013 at 0:33

nuhusky2003

3662 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Randy Minder Over a year ago

Thank you. I should have noticed the parameter that controls this.

Collectives™ on Stack Overflow

MVC 4 - Cascading Dropdown Lists - Issue with Ajax JavaScript Call

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related