HTML Dropdownlist not mapping to MVC Model

How exactly should a select tag be mapped to an MVC Model variable, I've tried everything that I can possibly think of, but every time I check the post method on the controller, the variable that is supposedly binded to the dropdown returns null.

View:

<script type="text/javascript">
var counter = 1;
$('#btnAddLocation').click(function (e) {
    e.preventDefault();
    $("#tblAddLocation").find('tbody')
            .append($('<tr>')
                .append($('<td>')
                    .append($('@Html.LabelFor(m => m.Location)')
                    )
                )
                .append($('<td>')
                    .append($('<select name=Location id=Location' + counter++ + ' class=gradientTextbox>')
                    )
                )
                .append($('<td>')
                    .append($('@Html.LabelFor(m => m.Description)')
                    )
                )
                .append($('<td>')
                    .append($('@Html.EditorFor(m => m.Description)')
                    )
                )
            );

    $.getJSON("/Locations/GetAllLocations", function (data) {
        var items = "<option selected></option>";
        $.each(data, function (i, item) {
            items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
        });

        $("#Location" + (counter - 1)).html(items);
    });
});
</script>

Controller:

[HttpPost]
    public ActionResult ActionName(MyModel model, List<string> Location, List<string> Description) {
        return Json(new { success = true });
    }

The Description variable in the controller code works fine, but the list for Location returns the right count, but all the items are null.

Any suggestions on how to handle this issue?

Answers


For the binding to work, Location should be a string value. It won't pass all the <option>'s, rather it will pass the current selectedvalue

[HttpPost]
public ActionResult ActionName(MyModel model, string Location, List<string> Description) {
    return Json(new { success = true });
}

Well i figured out the solution.

Html.DropDownListFor version

<select id="Location" name="Location" class="gradientTextbox">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>

My version

<select id="Location1" class="gradientTextbox" name="Location">
    <option selected=""></option>
    <option value="null">option 1</option>
    <option value="null">option 2</option>
    <option value="null">option 3</option>

Noticing the subtle difference, the real issue of the problem lies in this line of the code:

items += "<option value='" + item.Value + "'>" + item.Text + "</option>";

In order to fix my code, the aforementioned line should be replaced with:

items += "<option>" + item.Text + "</option>";

Problem fixed. Thanks for the help @Gabe


Need Your Help

Case Statement Questions regarding column names

sql sql-server

In the following, I have a case statement. I am wondering if it's possible to have three separate columns in this case statement. Obviously, the 'else end' statement provides the 'Dependents',

Android code throwing errors

android compiler-errors

This is some code for an app that will just print hello world to my phone. However, when I try to change the text from "@string/hello_world" to something else (eg "@string/hello") in the Android st...