省市区联动(MVC分布视图)

时间:2023-03-08 21:18:33

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=,int CityId=,int DistrictId=)
{
ViewData["provinceID"]=ProvinceId;
ViewData["cityId"]=CityId;
ViewData["districtId"]=DistrictId;
List<Province> listPro=获取到省份的方法;
Return PartialView(listPro);
} //市
public PartialViewResult GetCity(int ProvinceId=,int CityId=,int DistrictId=)
{
if(ProvinceId==)
{
ViewData["provinceID"]=;
ViewData["cityId"]=;
ViewData["districtId"]=;
Return PartialView();
}
else
{
ViewData["provinceID"]=ProvinceId;
ViewData["cityId"]=CityId;
ViewData["districtId"]=DistrictId;
List<City> listPro=获取到城市的方法(ProvinceId);
Return PartialView(listPro);
}
} //县区
public ActionResult GetDistrict(int CityId=,int DistrictId=)
{
if(CityId==)
{
ViewData["cityId"]=;
ViewData["districtId"]=;
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="">--请选择--</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"]==)
{
<option value=''>--请选择--</option>
}else
{
<option value=''>--请选择--</option>
foreach(var item in Model)
{
if((int)ViewData["cityId"]==item.CityId || (int)ViewData["cityId"]==)
<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"]==)
<option value="">--请选择--</option>
else
<option value="">--请选择--</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>