Article: ASP.Net Core MVC: Cascading (Dependent) Country State City DropDownLists using jQuery AJAX
Why the result in my code, after select country, the dropdown state still disabled.
@model AdminPanelTutorial.Models.CascadingModel.Cascading
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post" asp-controller="Cascading" asp-action="Index">
<select id="ddlCountries" name="CountryId" asp-for="CountryId" asp-items="Model.Countries">
<option value="">Please select</option>
</select>
<br /><br />
<select id="ddlStates" name="StateId" asp-for="StateId" asp-items="Model.States">
<option value="">Please select</option>
</select>
<br /><br />
<select id="ddlCities" name="CityId" asp-for="CityId" asp-items="Model.Cities">
<option value="">Please select</option>
</select>
<br /><br />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("select").each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
});
$("select").change(function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "/Cascading/AjaxMethod",
data: { value: value, type: id },
success: function (response) {
switch (id) {
case "ddlCountries":
DisableDropDown("#ddlStates");
DisableDropDown("#ddlCities");
PopulateDropDown("#ddlStates", response.States);
break;
case "ddlStates":
DisableDropDown("#ddlCities");
PopulateDropDown("#ddlCities", response.Cities);
break;
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
if ($("#ddlCountries").val() != "" && $("#ddlStates").val() != "" && $("#ddlCities").val() != "") {
var message = "Country: " + $("#ddlCountries option:selected").text();
message += "\nState: " + $("#ddlStates option:selected").text();
message += "\nCity: " + $("#ddlCities option:selected").text();
alert(message);
}
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="0">Please select</option>');
}
function PopulateDropDown(dropDownId, list) {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
}
</script>
</body>
</html>
namespace AdminPanelTutorial.Models.CascadingModel
{
public class Cascading
{
public Cascading()
{
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; }
}
}
using AdminPanelTutorial.Models;
using AdminPanelTutorial.Models.CascadingModel;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace AdminPanelTutorial.Controllers
{
public class CascadingController : Controller
{
MyDbContext context = null;
public CascadingController(MyDbContext _context)
{
context = _context;
}
public IActionResult Index()
{
Cascading model = new Cascading();
model.Countries = (from customer in context.Countries
select new SelectListItem
{
Value = customer.CountryId.ToString(),
Text = customer.CountryName
}).ToList();
return View(model);
}
[HttpPost]
public JsonResult AjaxMethod(string type, int value)
{
Cascading model = new Cascading();
switch (type)
{
case "ddlCountries":
model.States = (from customer in context.States
where customer.CountryId == value
select new SelectListItem
{
Value = customer.StateId.ToString(),
Text = customer.StateName
}).ToList();
break;
case "ddlStates":
model.Cities = (from customer in context.Cities
where customer.StateId == value
select new SelectListItem
{
Value = customer.CityId.ToString(),
Text = customer.CityName
}).ToList();
break;
}
return Json(model);
}
[HttpPost]
public ActionResult Index(int countryId, int stateId, int cityId)
{
Cascading model = new Cascading();
model.Countries = (from customer in context.Countries
select new SelectListItem
{
Value = customer.CountryId.ToString(),
Text = customer.CountryName
}).ToList();
model.States = (from customer in context.States
where customer.CountryId == countryId
select new SelectListItem
{
Value = customer.StateId.ToString(),
Text = customer.StateName
}).ToList();
model.Cities = (from customer in context.Cities
where customer.StateId == stateId
select new SelectListItem
{
Value = customer.CityId.ToString(),
Text = customer.CityName
}).ToList();
return View(model);
}
}
}
thx
