asp.net core_ASP.NET MVC+Ajax实现级联下拉列表

前端模版文件,给第一个初始下拉列表初始值，第二个没数据，通过Ajax调用后台返回json数据绑定

 代码如下

@Html.DropDownList("CategroyID", (IEnumerable)ViewBag.CategoryID, "请选择...", new { id = "CategroyID", onchange = "GetArticleClass(this)" })

请选择...

<script type="text/javascript">
   function GetArticleClass(id) {
        $("#ArticleClassID").empty(); //清空城市SELECT控件
        $.ajax({
            url: "/home/GetArticleClass/" + $("#CategroyID").val(),
            type: "get",
            datatype: "json",
            success: function (data) {
                if (data.length==0) {
                    $("")
                    .val("0")
                    .text("请选择...")
                    .appendTo($("#ArticleClassID"));
                }
                $.each(data, function (i, item) {
                    $("")
                    .val(item["ID"])
                    .text(item["Name"])
                    .appendTo($("#ArticleClassID"));
                });
            }
        });
    }
</script>

后台方法

 

 代码如下 public ActionResult GetArticleClass(int id=0)
       {
           List articleClass = db.ArticleClass.Where(a => a.CategoryID == id).ToList();
           return Json(articleClass, JsonRequestBehavior.AllowGet);
       }

注意事项

其中ArticleClassModels模型包括ID,Name等属性。

asp.net core_ASP.NET MVC+Ajax实现级联下拉列表

http://m.bbyears.com/asp/37615.html

推荐访问: