MVC 下拉列表三級聯動 - Sientuo－IT工程師數位筆記本

文章出處

當前所做的項目，關于數據庫設計的時候有點小意思，表A是三個聯合主鍵，key1，key2，key3，表B是四個聯合主鍵 key1，key2，key3，key4，其中表B的聯合外鍵關聯表A對應的聯合主鍵，其實這種情況是很多的，比如常見的省、市、區三級菜單。這樣一來，對表B做新增的時候就需要幾個小步驟：

①：界面初始化，返回下拉列表 key1(distinct)、key2（只賦值初始值）、key3（只賦值初始值）

②：界面勾選key1，觸發chang事件，采用getJson 方式將參數key1的值發送到Action中，同時設置下拉列表b 的內容為空，$("#b").html('');

控制器做處理后，返回 key2的集合

③：界面的回調函數中，給下拉列表b 用append 的方式加入 value 值和文本值
④：界面勾選key2，觸發change事件，采用getJson 方式將參數key1、key2 的值發送到Action中，同樣設置下拉列表c的內容為空，$("#c").html('');
控制器做處理后，返回key3的集合

⑤：界面回調函數中，給下拉列表c 用append的方式加入 value 值和文本值

⑥：判斷key4 是否在表B中存在，不存在，插入數據，返回提示

從著手項目以來，最開始總想用代碼來說明，雖然最后是實現了功能，但回過頭看起來，簡直是慘不忍睹，實在是有刪除從寫的沖動，越來越久，才發現，先考慮清楚邏輯，就是深度思考是第一步，雖然說起來很容易，往往實踐起來很難

--主表TMain   從表TMinor
use TestBook
alter table TMinor
add constraint Tminor_fk  foreign key(Key1,Key2,Key3)  references TMain(Key1,Key2,Key3)

第一步：將三級聯動的下拉列表封裝到一個類中

    public class TMainResult
    {
        /// <summary>
        /// 一級下拉框
        /// </summary>
        public string Key1 { get; set; }

        /// <summary>
        /// 二級下拉框
        /// </summary>
        public string Key2 { get; set; }

        /// <summary>
        /// 三級下拉框
        /// </summary>
        public string Key3 { get; set; }
    }

第二步：在控制器中設置列表值，并在前臺展示

  public ActionResult Index()
        {
            //綁定Key1       //GetKey1() 得到表中 key1欄位集合           
            ViewBag.List_Key1 = new SelectList(dbhelper.GetKey1.ToList(), "Key1", "Key1").AsEnumerable();
            //Key2、Key3 賦空值
            List<ThreeDrop> selectlist = new List<ThreeDrop>();
            ViewBag.List_Key2 = new SelectList(selectlist, "Key2", "Key2").AsEnumerable();
            ViewBag.List_Key3 = new SelectList(selectlist, "Key3", "Key3").AsEnumerable();
            return View();
        }

<div>
    @using (Html.BeginForm("Index"))
    {
        <label>一級菜單（省份）</label>
        @Html.DropDownList("Key1", ViewBag.List_Key1 as IEnumerable<SelectListItem>,'請選擇')
        <p></p>
        <label>二級菜單（地級市）</label>
        @Html.DropDownList("Key2",ViewBag.List_Key2 as IEnumerable<SelectListItem>,'請選擇')
        <p></p>
        <label>三級菜單（區、縣）</label>
        @Html.DropDownListFor(m=>m.Key3,ViewBag.List_Key3 as IEnumerable<SelectListItem>,'請選擇')
    }
</div>

第三步：后臺寫好返回的數據

        //實現二級連動
        public JsonResult GetKey2Bykey1(string key1)
        {
            List<ThreeDrop> ConfigTypelist = dbhelper.GetKey2(key1).ToList();
            return Json(ConfigTypelist, JsonRequestBehavior.AllowGet);
        }

        //實現三級聯動
        public JsonResult GetKey3Bykey2(string key1, string key2)
        {
            List<ThreeDrop> ConfigMSTlist = dbhelper.GetKey3(key1, key2).ToList();
            return Json(ConfigMSTlist, JsonRequestBehavior.AllowGet);
        }

第四步：前臺發送Ajax請求，并解析后臺返回的數據

<script>
    $(function () {
        //一級聯動
        $("#Key1").change(function () {
            var url = "/Test/GetKey2/?Key1=" + $("#Key1").val() + "";
            $.getJSON(url, function (data) {
                $("#Key2").html('');
                $("#Key2").append("<option value=''>請選擇</option>");
                $.each(data, function (i,item) {
                    $("#Key2").append("<option value='"+item.Key2+"'>"+item.Key2+"</option>");
                })
            });
        })
        //二級聯動
        $("#Key2").change(function () {
            var url = "/Text/GetKey3/?Key1="+$("#Key1").val()+"&&Key2="+$("#Key2").val()+"";
            $.getJSON(url, function (data) {
                $("#Key3").html('');
                $("#Key3").append("<option value=''>請選擇</option>");
                $.each(data, function () {
                    $("#Key3").append("<option value='"+$("#Key3")+"'>'"+$("#Key3")+"'</option>");
                })

            })
        })

    })
</script>