Binding dropdownlist using MVC5 and json

nga ara

Used Nimith Joshi's article : Working With DropDownList in MVC 5 Using jQuery

Issue : Not displaying "State".

Model.Countries : I could populate dropdownlist for "Country" from the database.

controller:
public JsonResult States(string Country)
{
List statesList = new List();
switch (Country) {
case "Canada":
statesList.Add("Quebec");
statesList.Add("Ontario");
break;
case "Australia":
statesList.Add("Melbourne");
statesList.Add("Sydney");
break;

case "UNITED STATES":
statesList.Add("New York");
statesList.Add("Washington");
break; }

return Json(statesList);
}

cshtml :

@Html.DropDownListFor(model => model.Country, new SelectList(Model.Countries, "Key", "Value"))

Thanks in advance!

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Nimit Joshi12y ago
Accepted answer
Review the following jQuery code and Please add the reference as in the following:

<script src="~/Scripts/jquery-1.10.2.js">script>
<script>
    $(document).ready(function () {
        $("#State").prop("disabled", true);
        $("#Country").change(function () {
            if ($("#Country").val() != "Select") {
                var CountryOptions = {};
                CountryOptions.url = "/Sample/states";
                CountryOptions.type = "POST";
                CountryOptions.data = JSON.stringify({ Country: $("#Country").val() });
                CountryOptions.datatype = "json";
                CountryOptions.contentType = "application/json";
                CountryOptions.success = function (StatesList) {
                    $("#State").empty();
                    for (var i = 0; i < StatesList.length; i++) {
                        $("#State").append(" + StatesList[i] + "");
                    }
                    $("#State").prop("disabled", false);
                };
                CountryOptions.error = function () { alert("Error in Getting States!!"); };
                $.ajax(CountryOptions);
            }
            else {
                $("#State").empty();
                $("#State").prop("disabled", true);
            }
        });
    });
script>
Vijay Saklani12y ago
hi,
check this link:
populate dropdownlist