一、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>