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..