많은 페이지가 동일한 뷰 결과를 호출할 때, 동일한 콘텐츠를 뷰 컴포넌트에 캡슐화할 수 있습니다. 물론 뷰 컴포넌트에 매개변수를 전달하고 응답 결과를 반환할 수도 있습니다. 리더보드, 폼, 표 등 시나리오도 있습니다. 이 글은 asp.net 코어 3.1을 사용하여 ViewComponent 뷰 컴포넌트 튜토리얼 사용법을 설명합니다.
구성 요소 보기
뷰 구성 요소는 로컬 뷰와 유사하지만 더 강력합니다. 뷰 컴포넌트는 모델 바인딩을 사용하지 않고, 모델이 호출될 때 제공되는 데이터에만 의존합니다. 이 글은 컨트롤러와 뷰를 사용해 작성되었지만, 뷰 구성 요소는 Razor Pages에서도 사용할 수 있습니다.
구성 요소 보기:
- 전체 응답이 아니라 블록을 렌더링하세요.
- 컨트롤러와 뷰 간에 우려 분리와 테스트 가능성 이점이 동일하게 적용됩니다.
- 매개변수와 비즈니스 로직을 가질 수 있습니다.
- 보통 레이아웃 페이지에서 호출됩니다.
뷰 컴포넌트는 로컬 뷰에는 너무 복잡한 재사용 렌더링 로직이 있는 어디서든 사용할 수 있습니다. 예를 들면:
- 동적 내비게이션 메뉴
- 태그 클라우드 (데이터베이스가 조회되는 곳)
- 로그인 패널
- 쇼핑 카트
- 최근 출판된 기사들
- 일반적인 블로그의 사이드바 콘텐츠
- 로그인 패널은 각 페이지에 나타나며, 사용자의 로그인 상태에 따라 로그아웃 또는 로그인 링크가 표시됩니다
부분 전경
asp.net MVC 5에서는 다음과 같은 코드로 로컬 뷰를 사용할 수 있습니다:
통화 방식:
ViewComponent는 로컬 뷰의 대안입니다.
ViewComponent를 시작하세요
구성 요소 클래스 보기:
- 생성자 의존성 주입은 완전히 지원합니다
- 컨트롤러의 수명 주기에는 관여하지 않아서 뷰 컴포넌트에서 필터를 사용할 수 없습니다
- 더 이상 지체하지 않고, 바로 도시 지역 분류의 구성 기능을 요약하는 본론으로 넘어가겠습니다.
먼저, 프로젝트 디렉터리 아래에 새 "ViewComponents" 폴더를 만들고 다음 코드로 "RootClassification.cs" 클래스 파일을 새로 만드세요:
뷰 페이지에서 프로젝트의 "/Views/Shared" 폴더 아래에 새 "Components" 폴더를 만들고, 새 "RootClassification" 폴더(새로 만든 컴포넌트 클래스가 포함된 객체)를 만들고, 새 "Default.cshtml" 파일을 만듭니다. 코드는 다음과 같습니다:
구조는 다음과 같습니다:
자세한 경로는 /Views/Shared/Components/RootClassification/Default.cshtml입니다
왜 그런 길을 만들었을까요? 이는 asp.net Core 구성 요소의 작동 방식과 관련이 있습니다.
런타임은 다음 경로에서 뷰를 찾습니다:
/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name}
뷰 컴포넌트의 기본 뷰 이름은 Default이며, 이는 보통 뷰 파일 이름이 Default.cshtml임을 의미합니다. 뷰 컴포넌트 결과를 생성하거나 뷰 메서드를 호출할 때, 다른 뷰 이름을 지정할 수 있습니다.
컴포넌트를 사용해야 할 곳을 호출할 수 있으며, 코드는 다음과 같습니다:
다음 렌더링과 함께 프로젝트를 재실행합니다:
|
2021-2-7 16:18:25에 게시됨
|
|
|
|
2021-8-12 10:21:01에 게시됨
|
집주인|
2023-8-13 17:55:05에 게시됨
|
