Hi 098612,
Check this example. Now please take its reference and correct your code.
Database
I have made use of the three tables Countries, State and City.
You can download the database table SQL by clicking the download link below.
Download SQL file
Model
public class CascadingModel
{
public CascadingModel()
{
this.Countries = new List<SelectListItem>();
this.States = new List<SelectListItem>();
this.Cities = new List<SelectListItem>();
}
public List<SelectListItem> Countries { get; set; }
public List<SelectListItem> States { get; set; }
public List<SelectListItem> Cities { get; set; }
public int CountryId { get; set; }
public int StateId { get; set; }
public int CityId { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
Cascading_ddlEntities entities = new Cascading_ddlEntities();
CascadingModel model = new CascadingModel();
foreach (var country in entities.Countries)
{
model.Countries.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
}
return View(model);
}
[HttpPost]
public JsonResult AjaxMethod(string type, int value)
{
Cascading_ddlEntities entities = new Cascading_ddlEntities();
CascadingModel model = new CascadingModel();
switch (type)
{
case "CountryId":
var states = (from state in entities.States
where state.CountryId == value
select state).ToList();
foreach (var state in states)
{
model.States.Add(new SelectListItem { Text = state.StateName, Value = state.StateId.ToString() });
}
break;
case "StateId":
var cities = (from city in entities.Cities
where city.StateId == value
select city).ToList();
foreach (var city in cities)
{
model.Cities.Add(new SelectListItem { Text = city.CityName, Value = city.CityId.ToString() });
}
break;
}
return Json(model);
}
}
View
@model Cascading_RadioButtonList_MVC.Models.CascadingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<span>Country:</span>
<br />
@foreach (var item in Model.Countries)
{
@Html.RadioButtonFor(m => m.CountryId, item.Value, new { @class = "radio" })
@Html.Label(item.Text)
<br />
}
<hr />
<span>State:</span>
<br />
<div id="StateId"></div>
<hr />
<span>City:</span>
<br />
<div id="CityId"></div>
<br /><br />
<input id="btnSubmit" type="submit" value="Submit" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("body").on("click", ".radio", function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{type: "' + id + '", value: ' + value + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
switch (id) {
case "CountryId":
var dvContent = $("#StateId");
// Binding RadioButtons.
$.each(response.States, function () {
dvContent.append("<input class='radio' id='StateId' name='StateId' type='radio' value='"
+ this['Value'] + "' /><label for='" + this['Text'] + "'>" + this['Text'] + "</label><br />");
});
break;
case "StateId":
var dvContent = $("#CityId");
// Binding RadioButtons.
$.each(response.Cities, function () {
dvContent.append("<input class='radio' id='CityId' name='CityId' type='radio' value='"
+ this['Value'] + "' /><label for='" + this['Text'] + "'>" + this['Text'] + "</label><br />");
});
break;
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
Screenshot
