Hi akhter,
Make sure you use this.Value and this.Text in the JavaScript code instead of this.value and this.text.
Refer below sample.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
View
@model _116358_Cascading_MVC.Models.CascadingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
AjaxCall({ "type": 'Customer', "value": '' }, 'Customer');
$('#select2-1').on('change', function () {
var myData = {
"type": 'Order',
"value": $(this).find('option:selected').val()
};
AjaxCall(myData, 'Order');
});
});
function AjaxCall(myData, element) {
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: JSON.stringify(myData),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (element == "Order") {
$('#select2-2').prop("disabled", false);
$('#select2-2').empty();
$('#select2-2').append($("<option></option>").val("0").html("Select Order"));
$.each(data, function () {
$('#select2-2').append($("<option></option>").val(this.Value).html(this.Text));
});
$('#select2-1').attr("disabled", "disabled");
} else if (element == "Customer") {
$('#select2-2').attr("disabled", "disabled");
$('#select2-1').empty();
$('#select2-1').append($("<option></option>").val("0").html("Select Customer"));
$.each(data, function () {
$('#select2-1').append($("<option></option>").val(this.Value).html(this.Text));
});
$('#select2-1').prop("disabled", false);
}
},
error: function (r) {
alert(r.responseText);
},
failure: function (r) {
alert(r.responseText);
}
});
}
</script>
</head>
<body>
<div class="col-lg-8">
<div class="card card-default mb-5">
<div class="card-header">Designation Form</div>
<div class="card-body">
@using (Html.BeginForm("CreateItem", "Item", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<label class="control-label">Item Name</label>
Item: @Html.DropDownListFor(m => m.CustomerId, Model.Customers, "Please select", new { @id = "select2-1" })
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<label class="control-label">Section </label>
Section: @Html.DropDownListFor(m => m.OrderId, Model.Orders, "Please select", new { @id = "select2-2" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "AllDesignation")
</div>
</div>
</div>
</div>
</body>
</html>
Model Class
public class CascadingModel
{
public List<SelectListItem> Customers { get; set; }
public List<SelectListItem> Orders { get; set; }
public string CustomerId { get; set; }
public int? OrderId { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NORTHWINDEntities entities = new NORTHWINDEntities();
CascadingModel model = new CascadingModel();
model.Customers = entities.Customers.Take(5).Select(x => new SelectListItem
{
Text = x.ContactName,
Value = x.CustomerID
}).ToList();
model.Orders = entities.Orders.Take(5).Select(x => new SelectListItem
{
Text = x.Freight.ToString(),
Value = x.OrderID.ToString()
}).ToList();
return View(model);
}
[HttpPost]
public ActionResult AjaxMethod(AutoDetails auto)
{
NORTHWINDEntities entities = new NORTHWINDEntities();
List<SelectListItem> items = new List<SelectListItem>();
if (auto != null && !string.IsNullOrEmpty(auto.type))
{
switch (auto.type)
{
default:
foreach (var section in entities.Customers.Take(5))
{
items.Add(new SelectListItem { Text = section.ContactName, Value = section.CustomerID });
}
break;
case "Order":
var itemName = (from item in entities.Orders
where item.CustomerID == auto.value
select item).Take(5).ToList();
foreach (var item in itemName)
{
items.Add(new SelectListItem { Text = item.Freight.ToString(), Value = item.OrderID.ToString() });
}
break;
}
}
return Json(items);
}
public class AutoDetails
{
public string type { get; set; }
public string value { get; set; }
}
}
Screenshot
