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等屬性。