MVC 3.0 dropdownList 级联 Ajax

先上实体类

 

 1 public class ParentItem
 2     {
 3         public int ID { get; set; }
 4         public string Name { get; set; }
 5     }
 6     public class SubItem
 7     {
 8         public int ParentID { get; set; }
 9         public int ID { get; set; }
10         public string Name { get; set; }
11     }
12     public class TestViewModel
13     {
14         public List<ParentItem> Parent { get; set; }
15         public List<SubItem> Sub { get; set; }
16     }

Controller中的关键代码

 

 1  public class HomeController : Controller
 2     {
 3         List<ParentItem> _parentList = new List<ParentItem>();
 4         List<SubItem> _subList = new List<SubItem>();
 5 
 6         //
 7         // GET: /Home/
 8 
 9         public HomeController()
10         {
11             _parentList.Add(new ParentItem() { ID = 1, Name = "P1" });
12             _parentList.Add(new ParentItem() { ID = 2, Name = "P2" });
13             _parentList.Add(new ParentItem() { ID = 3, Name = "P3" });
14             _subList.Add(new SubItem() { ID = 1, ParentID = 1, Name = "P1-S1" });
15             _subList.Add(new SubItem() { ID = 2, ParentID = 1, Name = "P1-S2" });
16             _subList.Add(new SubItem() { ID = 3, ParentID = 2, Name = "P2-S1" });
17             _subList.Add(new SubItem() { ID = 4, ParentID = 2, Name = "P2-S2" });
18             _subList.Add(new SubItem() { ID = 5, ParentID = 3, Name = "P3-S1" });
19             _subList.Add(new SubItem() { ID = 6, ParentID = 3, Name = "P3-S2" });
20         }
21         public ActionResult Index()
22         {
23 
24             TestViewModel model = new TestViewModel() { Parent = this._parentList, Sub = this._subList };
25 
26                                   ViewData["Parent"] = new SelectList(_parentList, "ID", "Name", 3);
27             ViewData["Sub"] = new SelectList(_subList, "ID", "Name", 3);
28             return View(model);
29         }
30         //JsonResult继承了ActionResult  
31 
32         public JsonResult GetBZ(int parentId)  //GetBZ对应View的GetBZ，parentId也是通过View可以获取参数值
33         {
34             var d = this._subList.FindAll(s => s.ParentID == parentId);
35 
36             return Json(d, JsonRequestBehavior.AllowGet);
37 
38             //这里的代码是封装过的，可以在这里写任何想要的代码  
39             //注意，由于是列表框 所以返回的值应该是List<SelectListItem>(也许不只一种传递类型)
40         }

前台

 

<script type="text/javascript">
   
$(function(){
        $("#Parent").change(function(){ //Parent选项改变时激活
            var selec = $(this).val();  //获取改变的选项值
            var url = "@Url.Action("GetBZ")";  //参数依次类型(action,Controller,area）

            $("#Sub").find("option").remove();  //清空

            $.getJSON(url, { 'parentId': selec }, function (data) {  //parentId是参数名和Controllers中的action参数名相同
                $.each(data, function (i, item) {
                    $("<option></option>").val(item["ID"]).text(item["Name"]).appendTo($("#Sub"));
                });  //如果url访问成功  则执行function(data)这个函数（看仔细了`，这里该函数也是.getJSON的第三个参数）
            });     //function(data)获取了通过url返回来的值，并且循环读取出来
        });
    });
</script>
@Html.DropDownList("Parent","Select")
@Html.DropDownList("Sub", "Select")