MVC3 메소드(JQuery)를 기반으로 드롭다운 목록 연결 구현

집

웹 프론트엔드

JS 튜토리얼

MVC3 메소드(JQuery)를 기반으로 드롭다운 목록 연결 구현_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:23 PM

지난 프로젝트에서 여러 드롭다운 목록을 연결해야 하는 작업을 접했습니다. 오늘은 나중에 참조할 수 있도록 구현 방법을 정리하는 시간을 가졌습니다.
얻을 수 있는 효과는 하나의 드롭다운 상자를 클릭하면 다른 드롭다운 상자의 값도 이에 따라 변경된다는 것입니다. 예를 들어 중국을 선택하면 중국의 각 지역이 다른 드롭다운 상자에 표시됩니다.
기존 HTML 방식은 비교적 간단하고, 사실 MVC 기반의 구현 방식도 유사합니다.

코드 직접 추가:

코드 복사 코드는 다음과 같습니다.

 
공용 클래스 DP_Provice 
{ 
공용 int proviceID { get; set; } 
공용 문자열 ProviceName { get; set } 
public int ProviceNode } virtual List citySource { get; set; 
} 

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에서는 결과 유형이 반환됩니다. 

코드 복사 코드는 다음과 같습니다. 공개 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 뷰에 표시해야 합니다. 