Question

如何像第一个DropdownList的onchange事件一样在MVC中绑定两个Drop DownList 它会加载另一个

    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中获取数据。

控制器：

 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>

无法弄清楚如何绑定2下拉列表

1 个答案: