How to bind multiple menu list from database using mvc

Question

i have 3 tables in database country ,state and district tables

initially am able to bind country list in my page,

if i click country i want show related states based on country id in another div same view page

like list (not in dropdownlist)

then if i click state i want to bind related districts based on state id

i have tried

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