не могу понять, как связать 2 выпадающего списка

Question

Как связать два Drop DownList в MVC, как событие onchange первого DropdownList, загрузить еще один

    My Model
    public int cat_id { get; set; }
    public string cat_name { get; set; }
    public string cat_img { get; set; } 


    2nd Model
    public int scat_id { get; set; }

    [Required(ErrorMessage = "Input field required*")]
    public string scat_name { get; set; }
    public string scat_img { get; set; }
    [Required(ErrorMessage = "Input field required*")]
    public int scat_fk_cat_id { get; set; }


   Controller
     public ActionResult CreateProduct()
    {
        if (Session["ad_id"]!=null)
        {
            List<tbl_shopCategory> lst = db.tbl_shopCategory.ToList();
            List<tbl_subCategory> li = db.tbl_subCategory.ToList();
            ViewBag.cat = new SelectList(lst, "cat_id", "cat_name");
            ViewBag.scat = new SelectList(li, "scat_id", "scat_name");


            return View();
        }
        else
        {
           return RedirectToAction("AdminSignIn");
        }

    }

Это мой кусок кода, который не может связать оба раскрывающихся списка, также искал проблему, не смог найтиправильный ответ вот почему отправка этого

Answer 1

Вот код с вашим требованием.

Вам необходимо создать действие для фильтрации подкатегории, реализовать событие изменения выпадающего списка в jquery, при вызове события изменения AJAX получить данные.

*Контроллер 1005 *:

 public class ProductController : Controller
    {
        private static List<tbl_shopCategory> categories = new List<tbl_shopCategory>
        {
            new tbl_shopCategory
            {
                cat_id = 1, cat_name = "Beverage"
            },
            new tbl_shopCategory
            {
                cat_id = 2, cat_name = "Fruits"
            }
        };

        private static List<tbl_subCategory> subcategories = new List<tbl_subCategory>
        {
            new tbl_subCategory
            {
                scat_id = 1, scat_fk_cat_id = 1, scat_name = "Sub Beverage 1"
            },
            new tbl_subCategory
            {
                scat_id = 2, scat_fk_cat_id = 1, scat_name = "Sub Beverage 2"
            },

            new tbl_subCategory
            {
            scat_id = 3, scat_fk_cat_id = 2, scat_name = "Sub Fruits 1"
        },
        new tbl_subCategory
        {
            scat_id = 4, scat_fk_cat_id = 2, scat_name = "Sub Fruits 2"
        }
        };
        public ActionResult CreateProduct()
        {
            //if (Session["ad_id"] != null)
            //{
            List<tbl_shopCategory> lst = categories;
            List<tbl_subCategory> li = subcategories;
            ViewBag.cat = new SelectList(lst, "cat_id", "cat_name");
            ViewBag.scat = new SelectList(li, "scat_id", "scat_name");


            return View();
            //}
            //else
            //{
            //    return RedirectToAction("AdminSignIn");
            //}

        }

        public JsonResult GetSubCategory(int categoryId)
        {
           return Json(subcategories.Where(c => c.scat_fk_cat_id == categoryId).ToList(), JsonRequestBehavior.AllowGet) ;
        }
    }

    public class tbl_subCategory
    {
        public int scat_id { get; set; }

        [Required(ErrorMessage = "Input field required*")]
        public string scat_name { get; set; }
        public string scat_img { get; set; }
        [Required(ErrorMessage = "Input field required*")]
        public int scat_fk_cat_id { get; set; }
    }

    public class tbl_shopCategory
    {
        public int cat_id { get; set; }
        public string cat_name { get; set; }
        public string cat_img { get; set; }
    }

CreateProduct.cshtml

@using System.Collections

@{
    ViewBag.Title = "CreateProduct";
}

<h2>CreateProduct</h2>

@Html.DropDownList("Category", (IEnumerable<SelectListItem>)ViewBag.cat, string.Empty, new {})

@Html.DropDownList("SubCategory", (IEnumerable<SelectListItem>)ViewBag.scat, string.Empty, new { })

<script src="~/scripts/jquery-1.10.2.js"></script>
<script>

    $('#Category').change(function () {
        var categoryId = $('#Category').val();
        $.ajax({
            url: '/Product/GetSubCategory',
            type: 'GET',
            datatype: 'JSON',
            data: { categoryId: categoryId },
            success: function (result) {
                $('#SubCategory').html('');
                $('#SubCategory').append($('<option>Select</option>'));
                $.each(result, function (i, item) {
                    $('#SubCategory').append($('<option></option>').val(item.scat_id).html(item.scat_name));;
                });
            }
        });
    });
</script>