级联菜单最有名的是省市级联，如果你还没有这样的数据库，请从这里下载Province.rar。
1：MODEL
准备3个Model，如下：
public class Province { public int id { get; set; } public string provinceID { get; set; } public string province { get; set; } } public class Province { public int id { get; set; } public string provinceID { get; set; } public string province { get; set; } } public class Area { public int id { get; set; } public string areaID { get; set; } public string area { get; set; } public string father { get; set; } } 2：Controller部分的数据获取
如下：
public class CityController : Controller { string conn = "Data Source=.;Initial Catalog=ForestFire;User Id=sa;Password=sa;"; public ActionResult Index() { return View(""); } public ActionResult GetProvince() { if (!Request.IsAjaxRequest()) { return Content("请不要非法方法,这是不道德的行为！"); } string sql = "select * from dbo.povince"; using (DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql)) { var provinces = DataTableHelper.DataTable2Objects<Province>(ds.Tables[0]); return Json(provinces, JsonRequestBehavior.AllowGet); //return Json(provinces); } } public ActionResult GetCity(string id) { if (!Request.IsAjaxRequest()) { return Content("请不要非法方法,这是不道德的行为！"); } string sql = "select * from dbo.city where father=@fatherID"; SqlParameter p1 = new SqlParameter("@fatherID", id); using (DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql, p1)) { var citys = DataTableHelper.DataTable2Objects<City>(ds.Tables[0]); return Json(citys, JsonRequestBehavior.AllowGet); //return Json(provinces); } } public ActionResult GetArea(string id) { if (!Request.IsAjaxRequest()) { return Content("请不要非法方法,这是不道德的行为！"); } string sql = "select * from dbo.area where father=@areaID"; SqlParameter p1 = new SqlParameter("@areaID", id); using (DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql, p1)) { var areas = DataTableHelper.DataTable2Objects<Area>(ds.Tables[0]); return Json(areas, JsonRequestBehavior.AllowGet); //return Json(provinces); } } } 3：前台
如下：
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Index.aspx </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> $(document).ready(function () { $("#getP").click(function () { GetByJquery(); }); $("#ddlProvince").change(function () { GetCity() }); $("#ddlCity").change(function () { GetArea() }); }); function GetByJquery() { $("#ddlProvince").empty(); // $.getJSON("GetProvince", function (result) { // alert("abc"); // $.each(result, function (i, item) { // $("<option></option>") // .val(item["id"]) // .text(item["province"]) // .appendTo($("#ddlProvince")); // }); // alert("xxx"); // //GetCity(); // }); htmlobj = $.ajax({ url: "City/GetProvince", async: false, complete: function (XmlHttpRequest, textStatus) { }, success: function (result) { $.each(result, function (i, item) { $("<option></option>") .val(item["provinceID"]) .text(item["province"]) .appendTo($("#ddlProvince")); }); GetCity(); }, error: function (XmlHttpRequest, textStatus, errorThrown) { var $errorPage = XmlHttpRequest.responseText; alert($("#ErrorMsg", $errorPage).text()); //alert($("#ErrorMsg", XmlHttpRequest.responseText).text()); }, dataType: "json" }); } function GetCity() { $("#ddlCity").empty(); alert($("#ddlProvince").val()); htmlobj = $.ajax({ url: "City/GetCity/" + $("#ddlProvince").val(), async: false, complete: function (XmlHttpRequest, textStatus) { }, success: function (result) { $.each(result, function (i, item) { $("<option></option>") .val(item["cityID"]) .text(item["city"]) .appendTo($("#ddlCity")); }); GetArea(); }, error: function (XmlHttpRequest, textStatus, errorThrown) { var $errorPage = XmlHttpRequest.responseText; alert($("#ErrorMsg", $errorPage).text()); //alert($("#ErrorMsg", XmlHttpRequest.responseText).text()); }, dataType: "json" }); } function GetArea() { $("#ddlArea").empty(); alert($("#ddlCity").val()); htmlobj = $.ajax({ url: "City/GetArea/" + $("#ddlCity").val(), async: false, complete: function (XmlHttpRequest, textStatus) { }, success: function (result) { $.each(result, function (i, item) { $("<option></option>") .val(item["areaID"]) .text(item["area"]) .appendTo($("#ddlArea")); }); }, error: function (XmlHttpRequest, textStatus, errorThrown) { var $errorPage = XmlHttpRequest.responseText; alert($("#ErrorMsg", $errorPage).text()); //alert($("#ErrorMsg", XmlHttpRequest.responseText).text()); }, dataType: "json" }); } </script> <input id="getP" name="getP" type="button" value="获取列表" /> <h2> xxx</h2> <table> <tr> <td> <select id="ddlProvince" /> </td> <td> <select id="ddlCity" /> </td> <td> <select id="ddlArea" /> </td> </tr> </table> </asp:Content> 最后的效果：
代码下载：MvcApplication520110801.rar
