어떻게 ASP에서NET Core에서 ViewComponent 사용

앞말

이전의 개발 과정에서 우리는 응용이나 작은 구성 요소에 대해 분포 페이지(partial view)를 사용하고 앞으로 웹 Form에서 응용WEB Control을 할 것이다. 그래, 관건적인 코드TagPrefix：TagName를 언급하자. 이런 표시를 통해 우리는 우리web form에서 우리의 구성 요소를 도입할 수 있다. 물론이다.NET MVC 이후로는 없습니다WebControl.NET Core 이후 특징이 하나 더 추가되었습니다ViewComponent.ViewComponent는 작은 컨트롤러와 유사해 보이지만 우리의 작은 구성 요소나 작은 부분의 유니버설 기능은 ViewComponent을 통해 실현할 수 있다. 예를 들어 메시지 표시줄, 메뉴 등이다.ViewComponent는 두 부분으로 구성되어 있으며, 일부는 클래스(일반적으로 이 클래스는 View Component와 통합), 다른 일부는 보기(Razor와 일반적인View와 같다), 물론ViewComponent 역시 POCO를 지원하고, 계승하지 않지만ViewComponent, 클래스는 ViewComponent로 끝난다.

구성 요소 사용자 정의

다음과 같이 ViewComponent를 작성하는 방법은 세 가지입니다.

ViewComponent 상속

ViewComponent 기능 사용

ViewComponent로 끝나는 클래스 만들기

주의해야 할 것은View Component는 반드시 공공적(public)이어야 하며, 끼워 넣거나 추상적이지 않아야 한다는 것이다.View Component에 대해 우리는 기본적인 인식을 가지게 되었다. 다음은 ButtonViewComponent 예시를 만들어서 우리의 참고로 삼는다.

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace ViewComponentDemo.ViewComponents
{
    public class ButtonViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            return View();
        }
    }
}

뷰 페이지에서 이 구성 요소를 호출합니다.

@await Component.InvokeAsync("Button")

ViewComponent 역시 Controller와 마찬가지로 우리 서버의 특성을 통해 보기 조작을 하거나 렌더링을 한다. 예를 들어 아래에서 파라미터를 전달하고 우리의 Button 스타일을 수정해야 한다.
원래 방법을 수정하고 Enum 유형을 추가하여 스타일 선택을 진행합니다

@await Component.InvokeAsync("Button",ButtonType.Success)

 public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
 {
        ViewBag.Type = type;
        //return View("name",model);// 
        return View();
 }
 
    public enum ButtonType
    {
        Default,
        Primary,
        Success,
        Info,
        Warning,
        Danger,
        Link
    }

ViewComponent 특성

우리의 보기 관계 연결에서 우리는 명명식 연결에 의존하기 때문에 구성 요소의 이름이 클래스 이름과 일치하지 않을 때 관련 보기를 검색하지 못할 수 있다. 물론 우리는 사용 과정에서 다른 Name 보기를 사용할 수 있다.
다음과 같이 뷰의 바인딩을 수행할 수 있습니다.

    [ViewComponent(Name ="Button")]
    public class ButtonTest : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
        {
            ViewBag.Type = type;
            return View();
        }
    }

위의 코드와 같이 ViewCompoentAttribute 이름이 보기 연결에 실패했지만 (Button을 사용할 수 없습니다.) 표시를 추가해서Name을 ButtonTest 로 명명하면 일치하지 않는 행동을 보완할 수 있습니다.

Taghelper 방식

Button 지정을 통해 구성 요소를 포함하는 프로그램 집합을 등록합니다. 구성 요소는 @addTagHelper 프로그램 집합에 있습니다.

@addTagHelper *, ViewComponentDemo

이런 방식에는 하나의 폐단이 있다. 파라미터는 선택할 수 있는 파라미터가 아니다. 즉, 모든 파라미터를 표시해서 호출해야 한다. 그렇지 않으면 검색할 수 없을 것이다.

<vc:button type="@ButtonType.Success"></vc:button>

위 코드에서 type이 우리의 방법 매개 변수입니다.

Reference

Demo: https://github.com/hueifeng/BlogSample/tree/master/src/ViewComponentDemo
지금까지 ASP에서 어떻게NET Core에서 ASP에 대한 자세한 내용은 ViewComponent를 사용합니다.NET Core에서 ViewComponent를 사용하는 자료는 다른 관련 기사를 참고하십시오.