2013-0307

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

作者: momy 分类: 编程开发 0 Comment »
摘要：ASP.NET MVC通过Ajax调用后台返回json数据实现级联下拉列表。

前端模版文件,给第一个初始下拉列表初始值，第二个没数据，通过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等属性。


标签: MVC Ajax Json 级联下拉列表 阅读: 16344
上一篇: 看不见的自行车 - 11945次
下一篇: SQL、LINQ与Lambda随机取N条数据 - 32378次

向右滑动解锁留言