三级联动

后台

在数据访问中查询表中的Id来进行返回到显示获取Id

        public List<Birthplace> BindList(int id)
        {
              return db.Birthplaces.Where(a => a.Code == id).ToList();
        }

在业务逻辑层调用数据访问层传过来的数据

public List<Birthplace> BindList(int id)
        {
                return dal.BindList(id);
        }

在控制器中接收业务逻辑层传过来的数据

      public ActionResult BindList(int id)
        {
                return Json(bll.BindList(id),JsonRequestBehavior.AllowGet);
        }

在试图中接收控制器返回的Json值

注意：每次调用都需要清空后面两个用来接收数据的数组

   let app = new Vue({
        el: "#app",
        data() {
            return {
                FromData: {
                    Job: "",
                    Ename: "",
                    Sex: true,
                    Tid: "0",
                    Salesman: "",
                    PhoneTel: "",
                    Email: "",
                    Plane: "",
                    Province: "0",
                    City: "",
                    County: "",
                    Birthday: "",
                    Remark: ""
                },
                Bumen: [],
                BidA: [],
                BidB: [],
                BidC:[]
            }
        },
        methods: {
            BindSelect() {
                axios.get('/Employee/BindSelect').then(res => {
                    this.Bumen = res.data;
                    this.Bumen.unshift({ "DId": "0", "DName": "请选择" });
                })
            },
            //省
            BindList() {
                axios.get('/Employee/BindList?id=' + 0).then(res => {
                    this.BidA = res.data;
                    this.BidA.unshift({ "Bid": "0", "Bname": "请选择" });
                })
            },
            //市
            BindListA() {
                this.BidB = [];
                this.BidC = [];
                var id = this.FromData.Province;
                axios.get('/Employee/BindList?id=' + id).then(res => {
                    this.BidB = res.data;
                    this.BidB.unshift({ "Bid": "0", "Bname": "请选择" });
                    this.FromData.City = this.BidB[0].Bid;
                })
            },
            //县
            BindListB() {
                this.BidC = [];
                var id = this.FromData.City;
                axios.get('/Employee/BindList?id=' + id).then(res => {
                    this.BidC = res.data;
                    this.BidC.unshift({ "Bid": "0", "Bname": "请选择" });
                    this.FromData.County = this.BidC[0].Bid;
                })
            },
            Add() {
                axios.post('/Employee/SubAdd', this.FromData).then(res => {
                    if (res.data > 0) {
                        alert('添加成功');
                        location.href = '/Employee/Show';
                    }
                    else {
                        alert('添加失败');
                    }
                })
            },
            Show() {
                location.href = '/Employee/Show';
            }
        },
        created: function () {
            this.BindSelect();
            this.BindList();
        }
    })

在表单中添加Id

            <td colspan="3">
                省
                <select v-model="FromData.Province" v-on:change="BindListA">
                    <option v-for="(item,index) in BidA" :value="item.Bid">{{item.Bname}}</option>
                </select>
                市
                <select v-model="FromData.City" v-on:change="BindListB">
                    <option v-for="(item,index) in BidB" :value="item.Bid">{{item.Bname}}</option>
                </select>
                县
                <select v-model="FromData.County">
                    <option v-for="(item,index) in BidC" :value="item.Bid">{{item.Bname}}</option>
                </select>
            </td>