Bind Mvc Model using with html <select> tag

Question

i have one drop down list, this list bind value using ajax call

<script type="text/javascript">
function getCityName(data) {
    $('#ddlCity').empty();
    if (data != 0) {
        $.ajax({
            type: "POST",
            url: "/Home/GetCityList",
            data: { 'CityId': data },
            cache: false,
            //contentType: "application/json",
            datatype: "JSON",
            success: function (result) {
                var cityData = result.Data;
                var defaultV = new Option("--Select--", 0, true);
                $('#ddlCity').append(defaultV);
                for (var i = 0; i < cityData.length; i++) {
                    var opt = new Option(cityData[i].CityName, cityData[i].Id);
                    $('#ddlCity').append(opt);
                }
            }
        });
    }
    else {
        alert('Select State');
    }
}

<div>@Html.LabelFor(c => c.CityId)</div>
<div><select id="ddlCity"></select></div>

hear i want to bind model prop CityId in model class how to bind it...

Answer 1

element needs a name attribute to match the model property. add CityId in name attribute of select tag:

<div><select id="ddlCity" name = "CityId"></select></div>

Answer 2

the <select> tag need MVC Name property to add, @Html.NameFor(x=>x.Entity Property) and name property bind value in model. html code below :

<div><select id="ddlCity" name="@Html.NameFor(c=>c.CityId)"></select></div>

thanks for responding to answer this topic.