if i click country i want show related states based on country id in another div same view page
public ActionResult Country()
{
//created view model to return multiple models to view
ViewModel vm = new ViewModel();
_countryAPI = new CountryAPI();
var country = _countryAPI.GetAll();
vm.countryViewModel = country .ToList();
return View(vm);
}
public JsonResult GetStates(int countryID)
{
ViewModel vm1 = new ViewModel();
_stateAPI = new StateAPI();
var states= _stateAPI .GetAll(countryID);
vm1.statesViewModel = states.ToList();
return Json(vm1, JsonRequestBehavior.AllowGet);
}
view
@using Sample.ViewModel
@model Sample.ViewModel
<h4>countries</h4>
@if (Model.countryViewModel != null)
{
foreach (var item in Model.countryViewModel)
{
<div class="collapse navbar-collapse" >
<ul class="nav navbar-default">
<li class=""><a id="@item.CID" onclick="stateClick(this)" >@item.CName</a></li>
</ul>
</div>
}
}
else
{
<div></div>
}
<h4>States</h4>
@if (Model.statesViewModel != null)
{
foreach (var item1 in Model.statesViewModel)
{
<div>
<ul class="list-group">
<li class="list-group-item"><a id="@item1.SID" onclick="districtClick(this)">@item1.SName</a></li>
</ul>
</div>
}
}
else
{
<div>no states</div>
}
script
function stateClick(el) {
var countryID= $(el).attr("id");
$.ajax({
url: '/Home/GetStates',
type: "GET",
dataType: "json",
data: { countryID: countryID },
success: function (result) {
console.log(result);
},
error: function () {
console.log(error);
}
});
}
am able to bind list of countries and when i click country am getting country id and list but json result
not returning to view, json result returning view model and no result binding in view