.net MVC 下拉多級聯動及編輯

多級聯動實現，附源碼。當前，部分代碼是參與博客園其它網友。

新增，前臺代碼：

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        GetProvince(); //加載省份
        $("#Province").change(function () {
            GetCity();
        });
    });
    function GetProvince() {
        //        $("#Province").empty();
        $.getJSON(
            "/Home/GetProvincelist",
            function (data) {

                $.each(data, function (i, item) {
                    $("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));
                })
            });
        //            GetCity();
    }
    function GetCity() {
        $("#City").empty();
        $.getJSON(
        "/Home/GetCitylist",
        { pid: $("#Province").val() },
        function (data) {
            $.each(data, function (i, item) {
                $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));

            })
        });
    }
</script>
<div style="margin:50px 0">
    <span>省份：</span>
    <select id="Province">
        <option>請選擇</option>
    </select>

    <span>市：</span>
    <select id="City">
        <option>請選擇</option>
    </select>
</div>

後臺代碼：

        /// <summary>
        /// 模擬省份數據
        /// </summary>
        /// <returns></returns>
        public List<Province> Provincelist()
        {
            List<Province> list = new List<Province>();
            list.Add(new Province() { PID = 1, ProvinceName = "廣東" });
            list.Add(new Province() { PID = 2, ProvinceName = "北京" });
            list.Add(new Province() { PID = 3, ProvinceName = "上海" });
            list.Add(new Province() { PID = 4, ProvinceName = "河北" });
            list.Add(new Province() { PID = 5, ProvinceName = "貴州" });
            list.Add(new Province() { PID = 6, ProvinceName = "雲南" });

            return list;
        }

        /// <summary>
        /// 模擬城市數據
        /// </summary>
        /// <returns></returns>
        public List<City> Citylist()
        {
            List<City> cityList = new List<City>();
            cityList.Add(new City() { CID = 1, PID = 1, CityName = "廣州" });
            cityList.Add(new City() { CID = 2, PID = 1, CityName = "深圳" });
            cityList.Add(new City() { CID = 3, PID = 1, CityName = "惠州" });
            cityList.Add(new City() { CID = 4, PID = 1, CityName = "湛江" });
            cityList.Add(new City() { CID = 5, PID = 2, CityName = "北京" });
            cityList.Add(new City() { CID = 6, PID = 3, CityName = "上海" });
            cityList.Add(new City() { CID = 7, PID = 4, CityName = "唐山市" });
            cityList.Add(new City() { CID = 8, PID = 4, CityName = "保定市" });
            cityList.Add(new City() { CID = 9, PID = 4, CityName = "張家口市" });
            return cityList;
        }


        /// <summary>
        /// 獲取省份
        /// </summary>
        public JsonResult GetProvincelist()
        {
            var list = Provincelist();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 獲取城市
        /// </summary>
        /// <param name="pid"></param>
        /// <returns></returns>
        public JsonResult GetCitylist(int pid)
        {
            var citys = Citylist().Where(m => m.PID == pid).ToList();

            List<SelectListItem> item = new List<SelectListItem>();

            foreach (var City in citys)
            {
                item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() });
            }
            return Json(item, JsonRequestBehavior.AllowGet);
        }

　　

編輯邏輯：

模型ProvinceViewModel：

    public class ProvinceViewModel
    {
        /// <summary>
        /// 省份ID
        /// </summary>
        public int PID { get; set; }

        /// <summary>
        /// 城市ID
        /// </summary>
        public int CID { get; set; }
    }

前臺：

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        //GetProvince(); //加載省份
        GetCity();
        //省份變更，加載城市
        $("#Province").change(function () {
            GetCity();
        });
    });
    function GetProvince() {
        //        $("#Province").empty();
        $.getJSON(
            "/Home/GetProvincelist",
            function (data) {

                $.each(data, function (i, item) {
                    $("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));
                })
            });
        //            GetCity();
    }
    function GetCity() {
        $("#City").empty();
        $.getJSON(
        "/Home/GetCitylist",
        { pid: $("#Province").val() },
        function (data) {
            $.each(data, function (i, item) {
                $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));

            })
        });
    }
</script>
<div style="margin:50px 0">
    <span>省份：</span>
    @Html.DropDownListFor(model => model.PID, ViewBag.ProvinceList as IEnumerable<SelectListItem>, "＝請選擇＝", new { @class = "form-control", id = "Province" })


    <span>市：</span>
    @Html.DropDownListFor(model => model.CID,ViewBag.CityList  as IEnumerable<SelectListItem>, "＝請選擇＝", new { @class = "form-control", id = "City" })
</div>

　後臺：

        public ActionResult Edit()
        {
            ViewBag.ProvinceList = Provincelist().Select(m => new SelectListItem()
            {
                Text = m.ProvinceName,
                Value = m.PID.ToString(),
                Selected = (m.PID == 4) //測試，默認讓它綁定第四個
            }).ToList();
            ViewBag.CityList = Citylist().Select(m => new SelectListItem()
            {
                Text = m.CityName,
                Value = m.CID.ToString(),
                Selected = (m.CID == 8) //測試，默認讓它綁定第四個
            }).ToList();
            return View();
        }

　　

實際上，增長和編輯是完成能夠合成同一個頁面的，這裏就不演示了。

 

源代碼下載：點擊下載