How to do an MVC Edit with a dynamic javascript dropdown

Question

How do I properly make my dropdown have the correct information from the model when I'm doing an MVC Edit? My edit is using a dynamic dropdown populated by a jquery $.ajax call.

Here's my dropdown on my view...

@Html.DropDownListFor(m => m.SubdivisionID, new SelectList(new List<SelectListItem>(),
                    "SubdivisionID", "SubdivisionName", Model.SubdivisionID))

I make an $.ajax call and the drop down fills up with all of the options after the $.ajax call runs, but the dropdown just selects the first one in the list. How do I get the dropdown to update with the model information?

For example, the dropdown can have a selection of Item1 or Item2. The model has "Item2" saved as SubdivisionID, however, after the $.ajax call, the dropdown has "Item1" in the list because Item1 is the first item in the list.

What should I do to make the dropdown select the correct item on an Edit?

This is my JavaScript for the $.ajax call...

function getSubdivisions() {
    custId = $('#CustomerID').val();

    // remove all of the current options from the list
    $('#SubdivisionID').empty();

    // send request for list of subdivisions
    var jqxhr = $.ajax({
        url: '/Schedule/getSubdivisions',
        type: 'POST',
        data: '{ customerId: ' + custId.toString() + ' }',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        cache: false,
        async: true
    });

    // received list of models...
    jqxhr.done(function (data) {
        if (data == null) return;

        try {
            var ddl = $('#SubdivisionID');

            // add each item to DDL
            $.each(data, function (index, value) {
                ddl.append($('<option></option>', { value: data[index].SubdivisionID }).html(data[index].SubdivisionName))
            });
        }
        catch (ex) {
            alert("Done, but with errors!\n" + ex.message);
        }
    });

    // failed to retrieve data
    jqxhr.error(function (result, errorText, thrownError) {
        alert("Error! Failed to retrieve models! " + errorText + "\n" + thrownError);
    });
}

UPDATE 1: I changed my DropDown Razor code, and it still does not work (see above). MVC never selects the correct list item. I'd rather have MVC handle the item selection versus me having to select the selected item from JavaScript. My JavaScript is in a separate file and presently I have not been passing any parameters.

UPDATE 2: I added the following JavaScript to my view and I updated my JavaScript to include Matt's answer.

<script type="text/javascript">
    var js_doEdit = true;
    var subdivisionId = @Model.SubdivisionID
</script>

Matt Bodily · Accepted Answer · 2013-11-15 03:51:45Z

1

you should be able to set the selected item in the dropdown after recreating it like this

$('#SubdivisionID').val('@Model.SubdivisionID');

you may need to add a select to the selector like this

$('#SubdivisionID select').val('@Model.SubdivisionID');

Hope this helps

answered Nov 15, 2013 at 3:51

Matt Bodily

6,4134 gold badges32 silver badges51 bronze badges

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

2 Comments

Targaryen Over a year ago

I might have to do this. Any way I can have MVC handle it instead of having to do it from JavaScript?

Matt Bodily Over a year ago

Since you are rebuilding the dropdown after the page has loaded MVC isn't aware of the change to be able to affect it. This is the only way I am aware of doing it.

AirNoir · Accepted Answer · 2013-11-15 03:54:30Z

0

2 Ways to solve this:

1.

 $("#YourDropDownList").val(@Model.SubdivisionID);

2.

 @Html.DropDownListFor(m => m.SubdivisionID, new SelectList(new List<SelectListItem>()),"SubdivisionID","Text")

It'll auto-match your datavalue with "SubdivisionID".

answered Nov 15, 2013 at 3:54

AirNoir

2511 gold badge2 silver badges15 bronze badges

1 Comment

Targaryen Over a year ago

Please see updated question (above). I don't want to use JavaScript to do the actual selection if I can help it, and option #2 you gave is not working for me.

Collectives™ on Stack Overflow

How to do an MVC Edit with a dynamic javascript dropdown

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related