MVC3 메소드(JQuery)를 기반으로 드롭다운 목록 연결 구현_jquery
- WBOY원래의
- 2016-05-16 17:23:561333검색
지난 프로젝트에서 여러 드롭다운 목록을 연결해야 하는 작업을 접했습니다. 오늘은 나중에 참조할 수 있도록 구현 방법을 정리하는 시간을 가졌습니다.
얻을 수 있는 효과는 하나의 드롭다운 상자를 클릭하면 다른 드롭다운 상자의 값도 이에 따라 변경된다는 것입니다. 예를 들어 중국을 선택하면 중국의 각 지역이 다른 드롭다운 상자에 표시됩니다.
기존 HTML 방식은 비교적 간단하고, 사실 MVC 기반의 구현 방식도 유사합니다.
코드 직접 추가:
코드 복사 코드는 다음과 같습니다.
공용 클래스 DP_Provice
{
공용 int proviceID { get; set; }
공용 문자열 ProviceName { get; set }
public int ProviceNode } virtual List
}
public int CityNode }
public string { get; set; }
public string ProviceNode { get; set; }
}
위에 관련된 엔터티 클래스에 값을 할당하고 임시로 정적 클래스를 사용하여 간단한 데이터를 초기화합니다.
코드 복사 코드는 다음과 같습니다. public static class DPDataSource
{ 공용 정적 목록 InitalData()
{
목록 소스 = 새 목록
{
new DP_Provice{ ProviceNode=1, ProviceName="Beijing", citySource =new List{
new DP_City{
CityNode=11, CityName="Beijing Haidian"
},
new DP_City{
CityNode=12,CityName="Beijing Xicheng"
}
}},
new DP_Provice{ ProviceNode=2, ProviceName="Shandong", citySource=new List{
new DP_City{
CityNode=21, CityName=" 지난"
},
새 DP_City{
CityNode=22,CityName="Dezhou"
}
}},
새 DP_Provice{ ProviceNode=3, ProviceName="허베이" , citySource=new List
>new DP_City{
CityNode=31, CityName="Shijiazhuang"
},
new DP_City{
CityNode=32,CityName="Hengshui "
}
}}
};
return source;
}
}
Controller의 특정 호출은 AJAX 메서드를 사용합니다. JQuery에서는 결과 유형이 반환됩니다.
{
목록
{
new DP_Provice{ ProviceNode=1, ProviceName="Beijing", citySource =new List
new DP_City{
CityNode=11, CityName="Beijing Haidian"
},
new DP_City{
CityNode=12,CityName="Beijing Xicheng"
}
}},
new DP_Provice{ ProviceNode=2, ProviceName="Shandong", citySource=new List
new DP_City{
CityNode=21, CityName=" 지난"
},
새 DP_City{
CityNode=22,CityName="Dezhou"
}
}},
새 DP_Provice{ ProviceNode=3, ProviceName="허베이" , citySource=new List
>new DP_City{
CityNode=31, CityName="Shijiazhuang"
},
new DP_City{
CityNode=32,CityName="Hengshui "
}
}}
};
return source;
}
}
Controller의 특정 호출은 AJAX 메서드를 사용합니다. JQuery에서는 결과 유형이 반환됩니다.
코드 복사 코드는 다음과 같습니다. 공개 ActionResult Index()
{ return View("DPShow")
}
List source = DPDataSource.InitalData()
public JsonResult GetProvinceSource ()
{
if ( source == null || source.Count < 0)
{
source = DPDataSource.InitalData()
}
return Json(source , JsonRequestBehavior.AllowGet)
}
public JsonResult GetCitySource(string proviceName)
{
source = DPDataSource.InitalData()
List citySource = new List( );
citySource = source.Where( a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource
return Json(citySource, JsonRequestBehavior.AllowGet); >}
이때 데이터를 바인딩하여 Razor 뷰에 표시해야 합니다.
}
List
public JsonResult GetProvinceSource ()
{
if ( source == null || source.Count < 0)
{
source = DPDataSource.InitalData()
}
return Json(source , JsonRequestBehavior.AllowGet)
}
public JsonResult GetCitySource(string proviceName)
{
source = DPDataSource.InitalData()
List
citySource = source.Where( a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource
return Json(citySource, JsonRequestBehavior.AllowGet); >}
이때 데이터를 바인딩하여 Razor 뷰에 표시해야 합니다.
코드 복사