dhl：ASP.NET MVC + Jquery实现Ajax下拉框数据2或3级联动（+用户控件）

注明：ASP.NET MVC 2.0 ,作者:杜宏雷

页面：

<%Html.RenderAction("LessonGroup","Home"); %> 

用户控件：

 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="Taoxue.Entities" %>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#firstGroup").change(function () { GetSecondGroup() });
    });
    
    function GetSecondGroup() {
        $("#secondGroup").empty();
        var url = "/Home/GetSecondLessonGroupList/" + $("#firstGroup").val();
        $.getJSON(url, function (data) {
            //alert(data);
            $.each(data, function (i, item) {
                $("<option></option>")
                    .val(item["KID"])
                    .text(item["MemberName"])
                    .appendTo($("#secondGroup"));
            });
            //GetThreeGroup(); 或3级联动 
        });

    }
</script>
<div class="cx_left">
    <select name="firstGroup" id="firstGroup" class="listwidth">
        <%var lessonGroups = ViewData["firstGroup"] as List<Dictionary>;
          if (lessonGroups != null && lessonGroups.Count > 0)
          {
              foreach (Dictionary dictionary in lessonGroups)
              {
        %>        
        <option value="<%=dictionary.KID%>">
            <%=dictionary.MemberName%></option>
        <%
}
      }
        %>
    </select>
</div>
<div class="cx_middle">
    <select id="secondGroup" name="secondGroup" class="listwidth">
                <%var secondGroup = ViewData["secondGroup"] as List<Dictionary>;
                  if (secondGroup != null && secondGroup.Count > 0)
          {
              foreach (Dictionary dictionary in secondGroup)
              {
        %>        
        <option value="<%=dictionary.KID%>">
            <%=dictionary.MemberName%></option>
        <%
}
      }
        %>
    </select>
</div>

 

HomeController :

 [ActionName("LessonGroup")]
        [ChildActionOnly]
        public ActionResult LessonGroupControl()
        {
            var taokeClient = new TaokeService.TaokeClient();
            var allLessonGroupList = taokeClient.GetAllLessonGroupList();
            List<Dictionary> firstGroup = allLessonGroupList.Where(uu=>uu.ParentCode==string.Empty).ToList();
            Dictionary first = firstGroup.FirstOrDefault();
            string memberCode = (first != null) ? first.MemberCode : "";
            List<Dictionary> secondGroup = allLessonGroupList.Where(uu => uu.ParentCode == memberCode).ToList();
            ViewData["firstGroup"] = firstGroup;
            ViewData["secondGroup"] = secondGroup;
            return PartialView("LessonGroup");
        }
        /// <summary>
        /// 2级联动下拉框的数据
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult GetSecondLessonGroupList(int id)
        {
            if(!Request.IsAjaxRequest())
            {
                return Content("非法调用,不合法行为！");
            }
            var taokeClient = new TaokeService.TaokeClient();
            var allLessonGroupList = taokeClient.GetAllLessonGroupList();
            var curGroup = allLessonGroupList.Where(uu => uu.KID == id).FirstOrDefault();
            string memberCode = (curGroup != null) ? curGroup.MemberCode : "";
            var v = from l in allLessonGroupList where l.ParentCode == memberCode select l;
            List<Dictionary> list = v.ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

数据：

前台：