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：前台

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

本文基于

Creative Commons Attribution 2.5 China Mainland License

釋出，歡迎轉載，演繹或用于商業目的，但是必須保留本文的署名

http://www.cnblogs.com/luminji

（包含連結）。如您有任何疑問或者授權方面的協商，請給我留言。