.net mvc中级联的使用

省市级联是每个web网站必不可少的部分.这里小弟为大家分享一下在mvc中无刷新的部门职位级联菜单

首先在view页面JS代码: 

 1 <script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
 2     <script language="javascript" type="text/javascript">
 3         $(document).ready(function() {
 4             $("#DepartmentID").change(function() {//chang事件
 5                 $("#PositionID").empty();
 6                 var departmentId = $("#DepartmentID").val();
 7                 LoadCity(departmentId);
 8             });
 9         });
10 
11         function LoadCity(departmentId) {//LoadCity
12 
13             $.ajax({
14                 type: "get",
15                 dataType: "json",
16                 url: "LoadPosition.aspx?departmentId=" + departmentId,
17                 success: function(msg) {
18                     var data = msg;
19                     $("#PositionID").append("<option value=''>请选择</option>");
20                     for (var i = 0; i < data.length; i++) {
21                         $("#PositionID").append("<option value='" + data[i].Value + "'>" + data[i].Text + "</option>");
22                     }
23                 }
24             });
25         }
26      }

控件代码 :

  <%=Html.DropDownList("DepartmentID", null, new { style = "width:80px;" })%>部门

  <%=Html.DropDownList("PositionID",null, new { style = "width:80px;" })%> 职位

 然后后台controller中:

 1    public ActionResult LoadPosition(string departmentId)
 2         {
 3             if (!string.IsNullOrEmpty(departmentId))
 4             {
 5                 Department deptinfo = Department.Load(new Guid(departmentId));
 6                 var positionlist = deptinfo.Instance().PositionList;
 7                 return Json(new SelectList(positionlist, "ID", "CName"), JsonRequestBehavior.AllowGet);//返回json字符串
 8             }
 9             else
10             {
11                 List<SelectListItem> positionlist = new List<SelectListItem>();
12                 return Json(positionlist, JsonRequestBehavior.AllowGet);
13             }

14       }