Problem in Cascading Drop Down List?

Question

Hello,

 

I am having the problem to retrieve the values in second and third  list with respect to first drop down list.

 

Here is my Controller class code :

 

namespace MVCCascading.Controllers

{

public class HomeController : Controller

{

MVCDDEntities _entities = new MVCDDEntities();

public ActionResult Index()

{

ViewBag.Countries = _entities.Countries.ToList();

ViewBag.States = _entities.States.ToList();

ViewBag.Cities = _entities.Cities.ToList();

return View();

}

//Get all the states based on CountryID

public IList<State> GetStates(int countryid)

{

return _entities.States.Where(c => c.CountryID == countryid).ToList();

}

//Get all the cities based on StateID

public IList<City> GetCitis(int stateid)

{

return _entities.Cities.Where(c => c.StateID == stateid).ToList();

}

//filter state based on countryID

[AcceptVerbs(HttpVerbs.Get)]

public JsonResult LoadStatesByCountryID(string countryid)

{

var stateList = this.GetStates(Convert.ToInt32(countryid));

var stateData = stateList.Select(c => new SelectListItem() {

Text = c.StateName,

Value = c.StateID.ToString(),

});

return Json(stateData,JsonRequestBehavior.AllowGet);

}

//filter city based on stateID

[AcceptVerbs(HttpVerbs.Get)]

public JsonResult LoadCitiesByStateID(string stateid)

{

var cityList = this.GetCitis(Convert.ToInt32(stateid));

var cityData = cityList.Select(c => new SelectListItem()

{

Text = c.CityName,

Value = c.CityID.ToString(),

});

return Json(cityData, JsonRequestBehavior.AllowGet);

}

}

}

 

 

And here is my View for Index:

 

@model MVCCascading.MVCDDEntities

@{

ViewBag.Title = "Index";

}

<h2>Country, State and City</h2>

<p>

@Html.DropDownListFor(Model => Model.Countries, new SelectList(ViewBag.Countries as System.Collections.IEnumerable, "CountryID", "CountryName"),

"Select a Country", new { id = "ddlCountry" })

</p>

<p>

@Html.DropDownListFor(Model => Model.States, new SelectList(Enumerable.Empty<SelectListItem>(), "StateID", "StateName"),

"Select a State", new { id = "ddlStates" })

</p>

<p>

@Html.DropDownListFor(Model => Model.Cities, new SelectList(Enumerable.Empty<SelectListItem>(), "CityID", "CityName"),

"Select a City", new { id = "ddlCities" })

</p>

@section scripts

{

<script type="text/javascript">

$(document).ready(function () {

$("#ddlCountry").change(function () {

var countryID = $(this).val();

$.getJSON("../Home/LoadStatesByCountryID", { countryid: countryID },

function (stateData) {

var select = $("#ddlStates");

select.append('<option/>', {

value: 0,

text: "Select a State"

});

$.each(stateData, function (index, itemData) {

alert(stateData);

alert(itemData);

select.append('<option/>', {

value: itemData.Value,

text: itemData.Text

});

});

});

});

$("#ddlState").change(function () {

var stateID = $(this).val();

$.getJSON("../Home/LoadCitiesByStateID", { stateid: stateID },

function (cityData) {

var select = $("#ddlCities");

select.empty();

select.append($('<option/>', {

value: 0,

text: "Select a City"

}));

$.each(cityData, function (index, itemData) {

select.append($('<option/>', {

value: itemData.Value,

text: itemData.Text

}));

});

});

});

});

</script>

}

 

 

Please help me because I am trying this from last lots of days..