asp.net mvc 下拉框级联

全栈程序员站长

发布于 2022-09-15 09:54:34

8370

发布于 2022-09-15 09:54:34

大家好，又见面了，我是你们的朋友全栈君。

给自己需要级联的控制器添加要级联的下拉框获取

  #region//获取宿舍楼   
       
        [HttpPost]
        public ActionResult Drom(string id) 
        {
            object obj=getDrom(id);
            return Json(obj);
        }
        //获取宿舍楼  
        public List<SelectListItem> getFloor()
        {
            var quert = db.Floor;
            List<SelectListItem> list = new List<SelectListItem>();
            foreach (var item in quert)
            {
                list.Add(new SelectListItem { Text = item.FloorName, Value = item.FloorID.ToString() });
            }
            list.Insert(0, new SelectListItem { Text = "选择宿舍楼", Value = "-1" });
            return list;
        }
        //获取宿舍
        public List<SelectListItem> getDrom(string id) {
            List<SelectListItem> list = new List<SelectListItem>();
            int Floorid=int.Parse(id);
            if (Floorid > 0) 
            {
                var floor = db.Dorm.Where(a => a.FloorID == Floorid).ToList();
                foreach (var item in floor) {
                    list.Add(new SelectListItem { Text = item.DormName, Value = item.DormID.ToString() });
                }
            }
            return list;
        }
        #endregion

然后在需要的界面方法下返回数据

 public ActionResult Create()
        {


            ViewData["FloorID"] = getFloor();

            ViewData["DormID"] = new List<SelectListItem>()
                {
                    new SelectListItem {Text = "请选则宿舍楼", Value = "-1"}
                };

            return View();
        }

前端引入js文件为下拉框添加chang实践使用jspost请求方法

<script src="~/jquery-3.5.1/jquery-3.5.1.js"></script>
<script src="~/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
    $(function () {
        $("#FloorID").change(function () {
            var id = this.value;
            $.post("/Scores/Drom", { "id": id }, function (data) {
                $("#DormID").html("");
                $.each(data, function (i, j) {
                    var op = new Option();
                    op.text = j.Text;
                    op.value = j.Value;
                    document.getElementById("DormID").add(op);
                });
            });
        });
    })
</script>

查看结果：