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

지난 프로젝트에서 여러 드롭다운 목록을 연결해야 하는 작업을 접했습니다. 오늘은 나중에 참조할 수 있도록 구현 방법을 정리하는 시간을 가졌습니다.
얻을 수 있는 효과는 하나의 드롭다운 상자를 클릭하면 다른 드롭다운 상자의 값도 이에 따라 변경된다는 것입니다. 예를 들어 중국을 선택하면 중국의 각 지역이 다른 드롭다운 상자에 표시됩니다.
기존 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 뷰에 표시해야 합니다. 

코드 복사

코드는 다음과 같습니다.

@model MvcApplication.Models.DP_Provice
@{
ViewBag.Title = "DPShow";
Layout = "~/Views/Shared/_Layout.cshtml"
}

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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