MVC TIP6：级联菜单

级联菜单最有名的是省市级联，如果你还没有这样的数据库，请从这里下载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：前台

如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<%@ 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>