ASP.NET MVC+Ajax实现级联下拉列表

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

代码如下

复制代码

@Html.DropDownList("CategroyID", (IEnumerable<SelectListItem>)ViewBag.CategoryID, "请选择...", new { id = "CategroyID", onchange = "GetArticleClass(this)" })
<select id="ArticleClassID" name="ArticleClassID">
<option value="">请选择...</option>
</select>
<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) {
                    $("<option></option>")
                    .val("0")
                    .text("请选择...")
                    .appendTo($("#ArticleClassID"));
                }
                $.each(data, function (i, item) {
                    $("<option></option>")
                    .val(item["ID"])
                    .text(item["Name"])
                    .appendTo($("#ArticleClassID"));
                });
            }
        });
    }
</script>

后台方法

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

注意事项

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

补充：asp.net教程,.Net开发