省市区联动(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

 

posted @ 2015-10-01 19:50  如此低调的男人  阅读(1416)  评论(0编辑  收藏  举报