你的位置:首页 > ASP.net教程

[ASP.net教程]省市区联动(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;}}

View Code

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); }

View Code

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>      

View Code

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>

View Code

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>

View Code