MVC- populate dropdownlist depend on another selection - asp.net-mvc

Question

I've three dropdownlists each depend on the previous selection (stocks ,category,items) .
each dropdownlist populated by Viewbag from controller
controller:
ViewBag.stock_id = new SelectList(db.stocks, "stock_id", "stock_name");
ViewBag.cat_id = new SelectList(db.categories, "cat_id", "cat_name");
ViewBag.item_id = new SelectList(db.items, "item_id", "item_name");
[HttpGet]
public ActionResult UpdateitemDrop1(int stock_id)
{
var fromDatabaseEF = new SelectList(db.categories.Where(x => x.stock_id == stock_id).ToList(), "cat_id", "cat_name");
SelectList vb = fromDatabaseEF;
return Json(vb, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public ActionResult UpdateitemDrop2(int cat_id)
{
SelectList data= new SelectList(db.items.Where(x => x.cat_id == cat_id).ToList(), "item_id", "item_name");
return Json(data, JsonRequestBehavior.AllowGet);
}
view:
<div class="form-group">
#Html.LabelFor(model => model.stock_id, "stock_id", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("stock_id", null, htmlAttributes: new { #class = "form-control", #id = "stock_id" })
#Html.ValidationMessageFor(model => model.employee_id, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.cat_id, "cat_id", htmlAttributes: new { #class = "control-label col-md-2"})
<div class="col-md-10">
#Html.DropDownList("cat_id", null, htmlAttributes: new { #class = "form-control", #id = "cat_id", disabled = "disabled" })
#Html.ValidationMessageFor(model => model.employee_id, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.item_id, "item_id", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("item_id", null, htmlAttributes: new { #class = "form-control", #id = "item_id" , disabled = "disabled" })
#Html.ValidationMessageFor(model => model.item_id, "", new { #class = "text-danger" })
</div>
</div>
<script>
$(function () {
$('#stock_id').change(function () {
var select = $('#cat_id');
var stockV = $("#stock_id :selected").val();
alert();
$.ajax({
url: '/additions/UpdateitemDrop1',
type: "GET",
dataType: "JSON",
data: { stock_id: stockV },
success: function (vb) {
select.empty();
$(vb).each(function () {
select.add($("<option></option>").val(vb.cat_id).html(vb.cat_name));
});
}
});
});
$('#cat_id').change(function () {
var catV = $("#cat_id :selected").val();
$('#item_id').prop("disabled", false);
alert();
$.ajax({
url: '/additions/UpdateitemDrop2',
type: "GET",
dataType: "JSON",
data: { item_id: catV },
success: function () {
$("#item_id").html("");
$("#item_id").empty();
$.each(data, function (i, items) {
$("#item_id").append(
$('<option></option>').val(items.item_id).html(items.item_name));
});
}
});
});
});
</script>
but when I select option from first dropdownlist (stock_id) ,it stops at "empty()" function and doesn't populate the second dropdownlist
any help please?

Answer 1

This will help.
Controller - I am starting on Index16.
public class Stock
{
public string Id { get; set; } //value
public string Name { get; set; } //text
}
public class Category
{
public string Id { get; set; }
public string Name { get; set; }
}
public class Item
{
public string Id { get; set; }
public string Name { get; set; }
}
public class ViewModel
{
public IList<Stock> StockList { get; set; }
public IList<Category> CategoryList { get; set; }
public IList<Item> ItemList { get; set; }
public string SelectedStock { get; set; }
public string SelectedCategory { get; set; }
public string SelectedItem { get; set; }
}
public class HomeController : Controller
{
[HttpGet]
public ActionResult UpdateitemDrop1(string stock_id)
{
List<Stock> stocks;
List<Category> categories;
List<Item> items;
PopulateViewBags(out stocks, out categories, out items);
var q = categories.Where(x => x.Id == stock_id).ToArray();
return Json(q, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public ActionResult UpdateitemDrop2(string cat_id)
{
List<Stock> stocks;
List<Category> categories;
List<Item> items;
PopulateViewBags(out stocks, out categories, out items);
ViewBag.item_id = new SelectList(items.Where(x => x.Id == cat_id));
return Json(ViewBag.item_id, JsonRequestBehavior.AllowGet);
}
public ActionResult Index16()
{
List<Stock> stocks;
List<Category> categories;
List<Item> items;
PopulateViewBags(out stocks, out categories, out items);
var viewModel = new ViewModel { CategoryList = categories, ItemList = items, StockList = stocks };
return View(viewModel);
}
private void PopulateViewBags(out List<Stock> stocks, out List<Category> categories, out List<Item> items)
{
stocks = new List<Stock> {
new Stock { Id = "1", Name = "Stock1"},
new Stock { Id = "2", Name = "Stock2"},
new Stock { Id = "3", Name = "Stock3"}
};
categories = new List<Category> {
new Category { Id = "1", Name = "Category1"},
new Category { Id = "2", Name = "Category2"},
new Category { Id = "3", Name = "Category3"}
};
items = new List<Item> {
new Item { Id = "1", Name = "Item1"},
new Item { Id = "2", Name = "Item2"},
new Item { Id = "3", Name = "Item3"}
};
ViewBag.cat_id = new SelectList(categories, "Id", "Name");
ViewBag.item_id = new SelectList(items, "Id", "Name");
ViewBag.stock_id = new SelectList(stocks, "Id", "Name");
}
View
#model WebApplication2.Controllers.ViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index16</title>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#stock_id').change(function () {
var stockV = $("#stock_id :selected").val();
$.ajax({
url: '/home/UpdateitemDrop1',
type: "GET",
//dataType: "JSON",
data: { stock_id: stockV },
success: function (data) {
alert(data[0].Id);
alert(data[0].Name)
$("#cat_id").html("");
$.each(data, function (i, category) {
$("#cat_id").append(
$('<option></option>').val(category.Id).html(category.Name));
})
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
$('#cat_id').change(function () {
alert("category id changed");
//var catV = $("#cat_id :selected").val();
//alert();
//$.ajax({
// url: '/additions/UpdateitemDrop2',
// type: "GET",
// dataType: "JSON",
// data: { item_id: catV },
// success: function () {
// $("#item_id").html("");
// $.each(data, function (i, items) {
// $("#item_id").append(
// $('<option></option>').val(items.item_id).html(items.item_name));
// });
// }
//});
});
});
</script>
</head>
<body>
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model => model.StockList[0].Name, "stock_id", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.SelectedStock, ViewBag.stock_id as SelectList,
"Select Stock", new { #class = "form-control", #id = "stock_id" })
#Html.ValidationMessageFor(model => model.SelectedStock, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.CategoryList[0].Name, "cat_id", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.SelectedCategory, ViewBag.cat_id as SelectList,
"Select Category", new { #class = "form-control", #id = "cat_id" })
#Html.ValidationMessageFor(model => model.SelectedCategory, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.ItemList[0].Name, "item_id", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.SelectedItem, ViewBag.item_id as SelectList,
"Select Item", new { #class = "form-control", #id = "item_id" })
#Html.ValidationMessageFor(model => model.SelectedItem, "", new { #class = "text-danger" })
</div>
</div>
</body>
</html>