省市区联动(MVC分布视图)
1、调用分布视图
//Html辅助方法 返回参数的值 存储在ProvinceId、CityId、DistrictId中 @{Html.RenderAction("GetProvince","Home",new{ProvinceId=Model.provinceid,CityId=Model.cityid,DistrictId=Model,districtid});}
2、实体类
//省份 public class Province { public int ProvinceId{get;set;} public string ProvinceName{get;set;} } //市 public class City { public int CityId{get;set;} public string CityName{get;set;} } //县区 public class District { public int DistrictId{get;set;} public string DistrictName{get;set;} }
3、控制器方法
//省 public PartialViewResult GetProvince(int ProvinceId=0,int CityId=0,int DistrictId=0) { ViewData["provinceID"]=ProvinceId; ViewData["cityId"]=CityId; ViewData["districtId"]=DistrictId; List<Province> listPro=获取到省份的方法; Return PartialView(listPro); } //市 public PartialViewResult GetCity(int ProvinceId=0,int CityId=0,int DistrictId=0) { if(ProvinceId==0) { ViewData["provinceID"]=0; ViewData["cityId"]=0; ViewData["districtId"]=0; Return PartialView(); } else { ViewData["provinceID"]=ProvinceId; ViewData["cityId"]=CityId; ViewData["districtId"]=DistrictId; List<City> listPro=获取到城市的方法(ProvinceId); Return PartialView(listPro); } } //县区 public ActionResult GetDistrict(int CityId=0,int DistrictId=0) { if(CityId==0) { ViewData["cityId"]=0; ViewData["districtId"]=0; Return PartialView(); } else { ViewData["cityId"]=CityId; ViewData["districtId"]=DistrictId; List<District> listPro=获取到县区的方法(CityId); Return PartialView(listPro); } } //省市联动(异步刷新) ///<summary> ///根据传值的省份Id加载出隶属的城市 ///</summary> [HttpPost] public JsonResult AsynGetCity() { string dealType=Request["GetCity"]; string id=Request["ID"]; List<City> listC=得到城市的方法(id); return Json(listC); } //市县区联动(异步刷新) ///<summary> ///根据传值的城市id加载出隶属的县区 ///</summary> [HttpPost] public JsonResult AsynGetDistrict() { string dealType=Request["GetDistrict"]; string id=Request["ID"]; List<District> listDis=获取到县区的方法(id); return Json(listDis); }
4、省份视图
@model List<Province> <select id="ddlregions1" selectset="regions" name="ddlregions1" onchange="getValue(this[selectedIndex].value)"> <option value="0">--请选择--</option> @foreach(var item in Model) { if((int)ViewDate["provinceID"]==item.ProvinceId) <option value="@ViewData["provinceID"]" selected="selected">@item.ProvinceName</option> else <option value="@item.ProvinceId">@item.ProvinceName</option> } </select> <span>省</span> <!--市分布视图--> @{Html.RenderAction("GetCity","Home",new {ProvinceId=ViewData["provinceID"],City=ViewData["cityId"],DistrictId=ViewData["districtId"]});} <!--Js--> <!--Jquery引用。。。。。。。--> <script> function BindData(id,controlld) { $("#"+controlld).empty(); $("#"+controlld).append("<option value='0'>--请选择--</option>"); $.ajax({ type:"post", url:"AsynGetCity", dataType:"json", data:{"dealType":"GetCity","ID":id}, success:function(result) { $(result).each(function(){ $("#"+controlld).append("<option value='"+this.CityId+"'>"+this.CityName+"</option>"); }) } }) } $(function(){ $("#ddlRegions1").change(function(){ var id=$(this).val(); $("#ddlRegions3").empty(); $("#ddlRegions3").append("<option value='0'>--请选择--</option>"); BindData(id,"ddlRegions2"); }) }) </script>
5、城市视图
@model List<City> <select id="ddlRegions2" onchange="getValue(this[selectedIndex].value)" selectset="regions"> @if((int)ViewData["ProvinceID"]==0) { <option value='0'>--请选择--</option> }else { <option value='0'>--请选择--</option> foreach(var item in Model) { if((int)ViewData["cityId"]==item.CityId || (int)ViewData["cityId"]==0) <option value="@ViewData["cityId"]" selected="selected">@item.CityName</option> else <option value="@item.CityId">@item.CityName</option> } } </select> <span>市</span> <!--县区--> @{Html.RenderAction("GetDistrict","Home",new{CityId=ViewData["cityId"],DistrictId=ViewData["districtId"]});} <!--Js--> <!--jQuery引用--> <script> function BindData(id,controlld) { $("#"+controlld).empty(); $("#"+controlld).append("<option value='0'>--请选择--</option>"); $.ajax({ type:"post", url:"AsynGetDistrict", dataType:"json", data:{"dealType":"GetDistrict","ID":id} success:function(result) { $(result).each(function(){ $("#"+controlld).append("<option value='"+this.DistrictId+"'>"+this.DistrictName+"</option>") }) } }) } $(function(){ $("#ddlRegions2").change(function(){ var id=$(this).val(); BindData(id,"ddlRegions3"); }) }) </script>
6、县区视图
@model List<District> <select id="ddlRegions3" name="ddlRegions3" onchange="getValue(this[selectedIndex].value)" selectset="regions"> @if((int)ViewData["cityId"]==0) <option value="0">--请选择--</option> else <option value="0">--请选择--</option> @foreach(var item in Model) { if((int)ViewData["districtId"]==item.DistrictId) <option value="@ViewData["districtId"]">@item.DistrictName</option> else <option value="@item.DistrictId">@item.DistrictName</option> } </select> <span>县/区</span>
不忘初心,方得始终