Cascading DropDownListFor selected values insertion issue

See more:

C#

ASP.NET

MVC

I have two dropdowns for Country and City.

<div class="editor-field">
@Html.DropDownListFor(Model => Model.Country, new SelectList(ViewBag.Countries as System.Collections.IEnumerable, "CountryCode", "CountryName"), "Select country", new { id = "ddlCountry" })
@Html.ValidationMessageFor(model => model.Country)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.City, "City")
</div>
<div class="editor-field">
@Html.DropDownListFor(Model => Model.City, new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"), "select a city", new { id = "ddlCity" })
@Html.ValidationMessageFor(model => model.City)
</div>

and the javascript function

<script type="text/javascript">
$(document).ready(function () {
$("#ddlCountry").change(function () {
var idCity = $(this).val();
$.getJSON("/Applicant/GetCityByCountry", { id: idCity },
function (CountryData) {
var select = $("#ddlCity");
select.empty();
// select.append($('<option/>',{ value: 0, text: "Select Major" }));
$.each(CountryData, function (index,itemData) { //
select.append($('<option/>', { value: itemData.value, text: itemData.Text }));
});
});
});
});
</script>

When I select a country, it populates the city dropdown, but when I am trying to insert, it gives error.

The INSERT statement conflicted with the FOREIGN KEY constraint "Applicant_City". The conflict occurred in database "EngageDBase", table "dbo.City", column 'CityId'.
The statement has been terminated.

Quick watch is always showing countrycode and cityid equal to '0' which is not in city table.
Country and city model are null in the view.

Don't know what to do please help.

[Code] block Edited