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

        }

数据：

前台：