asp.net-core
Afficher les composants

Créer un composant de vue

Les composants de vue encapsulent des éléments de logique et des vues réutilisables. Ils sont définis par:

• Classe ViewComponent contenant la logique d'extraction et de préparation des données pour la vue et de choix de la vue à rendre.
• Une ou plusieurs vues

Comme ils contiennent une logique, ils sont plus flexibles que les vues partielles tout en favorisant une bonne séparation des préoccupations.

Un composant de vue personnalisée simple est défini comme suit:

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>

Ils peuvent être appelés depuis n'importe quelle vue (ou même un contrôleur en retournant un ViewComponentResult )

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

Composant View View

Le modèle de projet par défaut crée une vue partielle _LoginPartial.cshtml qui contient un peu de logique pour savoir si l'utilisateur est connecté ou non et trouver son nom d'utilisateur.

Comme un composant de vue peut convenir mieux (car il y a une logique impliquée et même 2 services injectés), l'exemple suivant montre comment convertir le LoginPartial en un composant de vue.

Afficher la classe de composant

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 view (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>

Vue SignedOut (dans ~ / 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>

Invocation depuis _Layout.cshtml

@await Component.InvokeAsync("Login")

Retour de l'action du contrôleur

Lorsque vous héritez de la classe Controller de base fournie par la structure, vous pouvez utiliser la méthode ViewComponent() pour renvoyer un composant de vue à partir de l'action:

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

Si vous utilisez une classe POCO en tant que contrôleur, vous pouvez créer manuellement une instance de la classe ViewComponentResult . Ce serait équivalent au code ci-dessus:

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