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")