Hi Destinykid,
Using the below links i have created the example.
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
static string constr = @"Data Source=.;Initial Catalog=Cascading_ddl;uid=sa;pwd=pass@123;";
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult AjaxMethod([FromBody]AutoDetails auto)
{
List<ListItem> items = new List<ListItem>();
switch (auto.type)
{
default:
items = PopulateItems("SELECT CountryName,CountryId,0 FROM Countries");
break;
case "Country":
items = PopulateItems("SELECT StateName,StateId,CountryId FROM States").Where(x => x.ParentId == auto.value).ToList();
break;
}
return Json(items);
}
private static List<ListItem> PopulateItems(string query)
{
List<ListItem> items = new List<ListItem>();
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
items.Add(new ListItem
{
Text = sdr[0].ToString(),
Value = Convert.ToInt32(sdr[1]),
ParentId = Convert.ToInt32(sdr[2])
});
}
}
con.Close();
}
}
return items;
}
public class AutoDetails
{
public string type { get; set; }
public int value { get; set; }
}
public class ListItem
{
public int Value { get; set; }
public string Text { get; set; }
public int ParentId { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<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
