Hi rani,
Using the below links i have created the example.
Check this example. Now please take its reference and correct your code.
Models
Country
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
State
public class State
{
public int StateId { get; set; }
public string StateName { get; set; }
public int CountryId { get; set; }
}
DbContext
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<Country> Countries { get; set; }
public DbSet<State> States { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult AjaxMethod([FromBody]AutoDetails auto)
{
List<SelectListItem> items = new List<SelectListItem>();
switch (auto.type)
{
default:
foreach (var country in this.Context.Countries)
{
items.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
}
break;
case "Country":
var states = (from state in this.Context.States
where state.CountryId == auto.value
select state).ToList();
foreach (var state in states)
{
items.Add(new SelectListItem { Text = state.StateName, Value = state.StateId.ToString() });
}
break;
}
return Json(items);
}
public class AutoDetails
{
public string type { get; set; }
public int value { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
AjaxCall({ "type": '' }, 'Country');
$('#ddlCountries').on('change', function () {
var myData = {
"type": 'Country',
"value": $(this).find('option:selected').val()
};
AjaxCall(myData, 'State');
});
});
function AjaxCall(myData, element) {
$.ajax({
url: "/Home/AjaxMethod/",
data: JSON.stringify(myData),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
switch (element) {
case "Country":
$('#ddlCountries').append($("<option></option>").val("0").html("Select Country"));
$.each(data, function () {
$('#ddlCountries').append($("<option></option>").val(this.value).html(this.text));
});
$('#ddlState').attr("disabled", "disabled");
break;
case "State":
if (data.length > 0) {
$('#ddlState').empty();
$('#ddlState').append($("<option></option>").val("0").html("Select State"));
$.each(data, function () {
$('#ddlState').append($("<option></option>").val(this.value).html(this.text));
});
$('#ddlState').prop("disabled", false);;
break;
} else {
$('#ddlState').empty();
$('#ddlState').append($("<option></option>").val("0").html("Select State"));
$('#ddlState').attr("disabled", "disabled");
}
}
},
error: function (r) {
alert(r.responseText);
},
failure: function (r) {
alert(r.responseText);
}
});
}
</script>
</head>
<body>
Country: <select id="ddlCountries"></select>
<br /><br />
State:
<select id="ddlState">
<option>Select State</option>
</select>
</body>
</html>
Screenshot
