VUE三级联动

一、Model层

[Table("City")]
public class City
{
   [Key,DatabaseGenerated(DatabaseGeneratedOption.None)]
   public int CId { get; set; }
   public string CName { get; set; }
   public int ParentId { get; set; }
}

二、数据迁移

三、数据访问层(DAL)

public List<City> GetCities(int id)
{
     return db.Cities.Where(u => u.ParentId == id).ToList();
}

四、业务逻辑层(BLL)

public List<City> GetCities(int id)
{
     return dal.GetCities(id);
}

五、控制器

[HttpGet]
public ActionResult GetCities(int id)
{
    return Json(bll.GetCities(id),         
    JsonRequestBehavior.AllowGet);
}

六、视图

<div id="app"><select v-model="ProvinceId" v-on:change="loadCity">
        <option v-for="(item,index) in provinceItem" :value="item.CId">{{item.CName}}</option>
    </select><select v-model="CityId" v-on:change="loadCounty">
        <option v-for="(item,index) in cityItem" :value="item.CId">{{item.CName}}</option>
    </select><select v-model="CountyId">
        <option v-for="(item,index) in countyItem" :value="item.CId">{{item.CName}}</option>
    </select>

</div>

<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {

                ProvinceId: 0,
                CityId: 0,
                CountyId: 0,

                provinceItem: [],   //
                cityItem: [],      //
                countyItem: []    //
            }
        },
        methods: {
            //加载省
            loadProvince() {
                axios.get(/Employee/GetCities?id=0).then(res => {
                    this.provinceItem = res.data;
                    this.provinceItem.unshift({ "CId": "0", "CName": "请选择" });
                })
            },
            //加载市
            loadCity() {
                this.cityItem = [];//清空市
                this.countyItem = [];//清空县
                axios.get(/Employee/GetCities?id= + this.ProvinceId).then(res => {
                    this.cityItem = res.data;
                    this.cityItem.unshift({ "CId": "0", "CName": "请选择" });
                    this.fromData.CityId = this.cityItem[0].CId;//设置市默认值 请选择
                })
            },
            //加载县
            loadCounty() {
                this.countyItem = [];
                axios.get(/Employee/GetCities?id= + this.CityId).then(res => {
                    this.countyItem = res.data;
                    this.countyItem.unshift({ "CId": "0", "CName": "请选择" });
                    this.CountyId = this.countyItem[0].CId;//设置县默认值 请选择
                })
            }
        },
        created: function () {
            this.loadProvince();
        }
    })
</script>

 

VUE三级联动

上一篇:定时任务


下一篇:镜像命令