asp.net-core
구성 요소보기

보기 구성 요소 만들기

뷰 컴포넌트는 재사용 가능한 로직 및 뷰를 캡슐화합니다. 그들은 다음에 의해 정의됩니다 :

• 뷰의 데이터를 가져와 준비하고 렌더링 할 뷰를 결정하는 논리를 포함하는 ViewComponent 클래스입니다.
• 하나 이상의보기

그것들은 논리를 포함하고 있기 때문에, 부분적인 뷰보다 더 유연하며 여전히 좋은 분리를 촉진합니다.

간단한 사용자 정의보기 구성 요소는 다음과 같이 정의됩니다.

public class MyCustomViewComponent : ViewComponent
{        
    public async Task<IViewComponentResult> InvokeAsync(string param1, int param2)
    {
        //some business logic

        //renders ~/Views/Shared/Components/MyCustom/Default.cshtml
        return View(new MyCustomModel{ ... });
    }
}

@*View file located in ~/Views/Shared/Components/MyCustom/Default.cshtml*@
@model WebApplication1.Models.MyCustomModel
<p>Hello @Model.UserName!</p>

모든 뷰 (또는 ViewComponentResult 를 반환하여 컨트롤러)에서 호출 할 수 있습니다.

@await Component.InvokeAsync("MyCustom", new {param1 = "foo", param2 = 42})

로그인 구성 요소

기본 프로젝트 템플릿은 _LoginPartial.cshtml 부분 뷰를 생성합니다.이 뷰에는 사용자가 로그인했는지 여부를 알아 내고 해당 사용자 이름을 찾을 수있는 로직이 있습니다.

다음 예제는 LoginPartial을 뷰 컴포넌트로 변환하는 방법을 보여줍니다. (로직이 관련되어 있고 2 개의 서비스가 주입 되었기 때문에)보기 컴포넌트가 더 적합 할 수 있습니다.

구성 요소 클래스보기

public class LoginViewComponent : ViewComponent
{
    private readonly SignInManager<ApplicationUser> signInManager;
    private readonly UserManager<ApplicationUser> userManager;

    public LoginViewComponent(SignInManager<ApplicationUser> signInManager, UserManager<ApplicationUser> userManager)
    {
        this.signInManager = signInManager;
        this.userManager = userManager;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        if (signInManager.IsSignedIn(this.User as ClaimsPrincipal))
        {                
            return View("SignedIn", await userManager.GetUserAsync(this.User as ClaimsPrincipal));
        }
        return View("SignedOut");
    }
}

SignedIn보기 (~ / Views / Shared / Components / Login / SignedIn.cshtml)

@model WebApplication1.Models.ApplicationUser

<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @Model.UserName!</a>
        </li>
        <li>
            <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
        </li>
    </ul>
</form>

SignedOut보기 (~ / Views / Shared / Components / Login / SignedOut.cshtml)

<ul class="nav navbar-nav navbar-right">
    <li><a asp-area="" asp-controller="Account" asp-action="Register">Register</a></li>
    <li><a asp-area="" asp-controller="Account" asp-action="Login">Log in</a></li>
</ul>

_Layout.cshtml 에서 호출

@await Component.InvokeAsync("Login")

컨트롤러 동작에서의 복귀

프레임 워크에서 제공하는 기본 Controller 클래스에서 상속하는 경우 편리한 메소드 ViewComponent() 를 사용하여 액션에서보기 구성 요소를 반환 할 수 있습니다.

public IActionResult GetMyComponent()
{
    return ViewComponent("Login", new { param1 = "foo", param2 = 42 });
}

POCO 클래스를 컨트롤러로 사용하는 경우 ViewComponentResult 클래스의 인스턴스를 수동으로 만들 수 있습니다. 위의 코드와 동일합니다.

public IActionResult GetMyComponent()
{
    return new ViewComponentResult 
    { 
        ViewComponentName = "Login",
        Arguments = new { param1 = "foo", param2 = 42 } 
    };
}