asp.net-core
Bekijk componenten

Maak een weergavecomponent

Bekijk componenten omsluit herbruikbare stukjes logica en aanzichten. Ze worden gedefinieerd door:

• Een klasse ViewComponent met de logica voor het ophalen en voorbereiden van de gegevens voor de weergave en het bepalen welke weergave moet worden weergegeven.
• Een of meer weergaven

Omdat ze logica bevatten, zijn ze flexibeler dan gedeeltelijke weergaven, terwijl ze toch een goede scheiding van zorgen bevorderen.

Een eenvoudige aangepaste weergavecomponent is gedefinieerd als:

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>

Ze kunnen vanuit elke weergave worden opgeroepen (of zelfs een controller door een ViewComponentResult )

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

Login Bekijk Component

De standaard projectsjabloon maakt een gedeeltelijke weergave _LoginPartial.cshtml met een beetje logica om uit te zoeken of de gebruiker al dan niet is aangemeld en de gebruikersnaam te achterhalen.

Omdat een weergavecomponent beter past (omdat er logica bij betrokken is en zelfs 2 services zijn geïnjecteerd), laat het volgende voorbeeld zien hoe het LoginPartial in een weergavecomponent kan worden omgezet.

Bekijk componentklasse

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-weergave (in ~ / 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-weergave (in ~ / 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>

Aanroep van _Layout.cshtml

@await Component.InvokeAsync("Login")

Keer terug van controlleractie

Bij het erven van de basis Controller klasse die door het kader, kunt u het gemak methode gebruiken ViewComponent() om een beeld component terug te keren van de actie:

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

Als u een POCO-klasse als controller gebruikt, kunt u handmatig een instantie van de klasse ViewComponentResult . Dit zou gelijk zijn aan de bovenstaande code:

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