Composants de vue dans ASP.NET CoreView components in ASP.NET Core

Par Rick AndersonBy Rick Anderson

Affichez ou téléchargez l’exemple de code (procédure de téléchargement)View or download sample code (how to download)

Composants de vueView components

Les composants de vue sont similaires aux vues partielles, mais ils sont beaucoup plus puissants.View components are similar to partial views, but they're much more powerful. Les composants de vue n’utilisent pas la liaison de données ; ils dépendent uniquement des données fournies en réponse à l’appel d’un composant de vue.View components don't use model binding, and only depend on the data provided when calling into it. Cet article a été écrit avec des contrôleurs et des vues, mais les composants de vue fonctionnent également avec les Razor Pages.This article was written using controllers and views, but view components also work with Razor Pages.

Un composant de vue a les caractéristiques suivantes :A view component:

  • Il effectue le rendu d’un bloc de code au lieu d’une réponse entière.Renders a chunk rather than a whole response.
  • Il garantit la même « séparation des préoccupations » et offre les mêmes avantages de testabilité qu’entre un contrôleur et une vue.Includes the same separation-of-concerns and testability benefits found between a controller and view.
  • Il peut avoir des paramètres et une logique métier.Can have parameters and business logic.
  • Il est généralement appelé à partir d’une page de disposition.Is typically invoked from a layout page.

Les composants de vue sont conçus pour être utilisés là où vous avez une logique de rendu réutilisable qui est trop complexe pour une vue partielle. Ils ciblent les vues suivantes, par exemple :View components are intended anywhere you have reusable rendering logic that's too complex for a partial view, such as:

  • Menus de navigation dynamiquesDynamic navigation menus
  • Nuage de mots clés (pour l’interrogation de la base de données)Tag cloud (where it queries the database)
  • Panneau de connexionLogin panel
  • Panier d’achatShopping cart
  • Articles récemment publiésRecently published articles
  • Contenu de la barre latérale dans un blog standardSidebar content on a typical blog
  • Panneau de connexion inclus dans chaque page pour afficher les liens de connexion ou déconnexion, en fonction de l’état de connexion de l’utilisateurA login panel that would be rendered on every page and show either the links to log out or log in, depending on the log in state of the user

Un composant de vue a deux éléments : sa classe (généralement dérivée de ViewComponent) et le résultat qu’il retourne (en général, une vue).A view component consists of two parts: the class (typically derived from ViewComponent) and the result it returns (typically a view). Comme les contrôleurs, un composant de vue peut être un OCT, mais la plupart des développeurs préfèrent utiliser les méthodes et propriétés dérivées de ViewComponent.Like controllers, a view component can be a POCO, but most developers will want to take advantage of the methods and properties available by deriving from ViewComponent.

Lorsque vous vérifiez si des composants de vue répondent aux spécifications d’une application, utilisez plutôt des composants Razor.When considering if view components meet an app's specifications, consider using Razor Components instead. Les composants Razor combinent également un balisage avec un code C# pour produire des unités d’interface utilisateur réutilisables.Razor Components also combine markup with C# code to produce reusable UI units. Les composants Razor sont conçus pour la productivité des développeurs lorsque vous fournissez une logique d’interface utilisateur et une composition côté client.Razor Components are designed for developer productivity when providing client-side UI logic and composition. Pour plus d'informations, consultez Create and use Razor components.For more information, see Create and use Razor components.

Création d’un composant de vueCreating a view component

Cette section présente les exigences générales relatives à la création d’un composant de vue.This section contains the high-level requirements to create a view component. Plus loin dans cet article, nous décrirons chaque étape en détail et nous créerons un composant de vue.Later in the article, we'll examine each step in detail and create a view component.

Classe de composant de vueThe view component class

Vous pouvez créer une classe de composant de vue à l’aide d’une des méthodes suivantes :A view component class can be created by any of the following:

  • En la dérivant de ViewComponentDeriving from ViewComponent
  • En décorant une classe avec l’attribut [ViewComponent] ou en dérivant la classe d’une classe définie avec l’attribut [ViewComponent]Decorating a class with the [ViewComponent] attribute, or deriving from a class with the [ViewComponent] attribute
  • En créant une classe dont le nom se termine par le suffixe ViewComponentCreating a class where the name ends with the suffix ViewComponent

Comme les contrôleurs, les composants de vue doivent être des classes publiques, non imbriquées et non abstraites.Like controllers, view components must be public, non-nested, and non-abstract classes. Le nom du composant de vue correspond au nom de la classe sans le suffixe ViewComponent.The view component name is the class name with the "ViewComponent" suffix removed. Il peut également être spécifié explicitement à l’aide de la propriété ViewComponentAttribute.Name.It can also be explicitly specified using the ViewComponentAttribute.Name property.

Une classe de composant de vue :A view component class:

  • Prend entièrement en charge l’injection de dépendances dans le constructeurFully supports constructor dependency injection

  • N’intervient pas dans le cycle de vie du contrôleur, ce qui signifie que vous ne pouvez pas utiliser de filtres dans un composant de vueDoesn't take part in the controller lifecycle, which means you can't use filters in a view component

Méthodes d’un composant de vueView component methods

Un composant de vue définit sa logique dans une méthode InvokeAsync qui retourne un Task<IViewComponentResult>, ou dans une méthode Invoke synchrone qui retourne un IViewComponentResult.A view component defines its logic in an InvokeAsync method that returns a Task<IViewComponentResult> or in a synchronous Invoke method that returns an IViewComponentResult. Les paramètres sont fournis directement en réponse à l’appel du composant de vue ; ils ne proviennent pas de la liaison de données.Parameters come directly from invocation of the view component, not from model binding. Un composant de vue ne traite jamais une requête directement.A view component never directly handles a request. En règle générale, un composant de vue initialise un modèle et le passe à une vue en appelant la méthode View.Typically, a view component initializes a model and passes it to a view by calling the View method. En résumé, les méthodes d’un composant de vue :In summary, view component methods:

  • Définissent une InvokeAsync méthode qui retourne un Task<IViewComponentResult> ou une méthode Invoke synchrone qui retourne un IViewComponentResult.Define an InvokeAsync method that returns a Task<IViewComponentResult> or a synchronous Invoke method that returns an IViewComponentResult.
  • Permettent généralement d’initialiser un modèle et de le passer à une vue en appelant la méthode View de ViewComponent.Typically initializes a model and passes it to a view by calling the ViewComponent View method.
  • Les paramètres proviennent de la méthode appelante, et non pas de HTTP.Parameters come from the calling method, not HTTP. Il n’y a pas de liaison de modèle.There's no model binding.
  • Ne sont pas accessibles directement comme point de terminaison HTTP.Are not reachable directly as an HTTP endpoint. Elles sont appelées depuis votre code (généralement dans une vue).They're invoked from your code (usually in a view). Un composant de vue ne traite jamais une requête.A view component never handles a request.
  • Sont surchargées sur la signature, plutôt que sur des détails de la requête HTTP en cours.Are overloaded on the signature rather than any details from the current HTTP request.

Chemin de recherche de la vueView search path

Le Runtime recherche la vue dans les chemins suivants :The runtime searches for the view in the following paths:

  • /Views/{Controller Name}/Components/{View Component Name}/{View Name}/Views/{Controller Name}/Components/{View Component Name}/{View Name}
  • /Views/Shared/Components/{View Component Name}/{View Name}/Views/Shared/Components/{View Component Name}/{View Name}
  • /Pages/Shared/Components/{View Component Name}/{View Name}/Pages/Shared/Components/{View Component Name}/{View Name}

Le chemin de recherche s’applique aux projets utilisant des contrôleurs + des vues et des Razor Pages.The search path applies to projects using controllers + views and Razor Pages.

Le nom de la vue par défaut pour un composant de vue est Default. Votre fichier de vue est donc normalement appelé Default.cshtml.The default view name for a view component is Default, which means your view file will typically be named Default.cshtml. Vous pouvez spécifier un nom de vue différent quand vous créez le résultat du composant de vue ou quand vous appelez la méthode View.You can specify a different view name when creating the view component result or when calling the View method.

Nous vous recommandons de nommer le fichier de vue Default.cshtml et d’utiliser le chemin Views/Shared/Components/{View Component Name}/{View Name}.We recommend you name the view file Default.cshtml and use the Views/Shared/Components/{View Component Name}/{View Name} path. Le composant de vue PriorityList montré dans cet exemple utilise le chemin Views/Shared/Components/PriorityList/Default.cshtml pour la vue.The PriorityList view component used in this sample uses Views/Shared/Components/PriorityList/Default.cshtml for the view component view.

Appel d’un composant de vueInvoking a view component

Pour utiliser le composant de vue, appelez-le dans une vue, comme ci-dessous :To use the view component, call the following inside a view:

@await Component.InvokeAsync("Name of view component", {Anonymous Type Containing Parameters})

Les paramètres sont passés à la méthode InvokeAsync.The parameters will be passed to the InvokeAsync method. Le composant de vue PriorityList décrit dans cet article est appelé du fichier de vue Views/ToDo/Index.cshtml.The PriorityList view component developed in the article is invoked from the Views/ToDo/Index.cshtml view file. Dans le code suivant, la méthode InvokeAsync est appelée avec deux paramètres :In the following, the InvokeAsync method is called with two parameters:

@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

Appel d’un composant de vue en tant que Tag HelperInvoking a view component as a Tag Helper

Dans ASP.NET Core 1.1 et les versions ultérieures, vous pouvez appeler un composant de vue en tant que Tag Helper :For ASP.NET Core 1.1 and higher, you can invoke a view component as a Tag Helper:

<vc:priority-list max-priority="2" is-done="false">
</vc:priority-list>

Les paramètres de méthode et de classe de casse Pascal pour les Tag Helpers sont convertis en casse kebab (mots séparés par des tirets).Pascal-cased class and method parameters for Tag Helpers are translated into their kebab case. Le Tag Helper utilisé pour appeler un composant de vue contient l’élément <vc></vc>.The Tag Helper to invoke a view component uses the <vc></vc> element. Le composant de vue est spécifié de la façon suivante :The view component is specified as follows:

<vc:[view-component-name]
  parameter1="parameter1 value"
  parameter2="parameter2 value">
</vc:[view-component-name]>

Pour utiliser un composant de vue en tant que Tag Helper, inscrivez l’assembly contenant le composant de vue à l’aide de la directive @addTagHelper.To use a view component as a Tag Helper, register the assembly containing the view component using the @addTagHelper directive. Si votre composant de vue se trouve dans un assembly appelé MyWebApp, ajoutez la directive suivante dans le fichier _ViewImports.cshtml :If your view component is in an assembly called MyWebApp, add the following directive to the _ViewImports.cshtml file:

@addTagHelper *, MyWebApp

Vous pouvez inscrire un composant de vue en tant que Tag Helper dans n’importe quel fichier qui référence ce composant.You can register a view component as a Tag Helper to any file that references the view component. Pour plus d’informations sur l’inscription des Tag Helpers, consultez Gestion de l’étendue des Tag Helpers.See Managing Tag Helper Scope for more information on how to register Tag Helpers.

Méthode InvokeAsync utilisée dans ce didacticiel :The InvokeAsync method used in this tutorial:

@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

Dans le balisage Tag Helper :In Tag Helper markup:

<vc:priority-list max-priority="2" is-done="false">
</vc:priority-list>

Dans l’exemple ci-dessus, le composant de vue PriorityList devient priority-list.In the sample above, the PriorityList view component becomes priority-list. Les paramètres sont passés au composant de vue sous forme d’attributs dans la casse kebab.The parameters to the view component are passed as attributes in kebab case.

Appel d’un composant de vue directement à partir d’un contrôleurInvoking a view component directly from a controller

Les composants de vue sont généralement appelés depuis une vue, mais ils peuvent aussi être appelés directement d’une méthode de contrôleur.View components are typically invoked from a view, but you can invoke them directly from a controller method. Les composants de vue ne définissent pas de points de terminaison comme le font les contrôleurs, mais vous pouvez facilement implémenter une action de contrôleur qui retourne le contenu d’un ViewComponentResult.While view components don't define endpoints like controllers, you can easily implement a controller action that returns the content of a ViewComponentResult.

Dans cet exemple, le composant de vue est appelé directement du contrôleur :In this example, the view component is called directly from the controller:

public IActionResult IndexVC()
{
    return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });
}

Procédure pas à pas : Création d’un composant de vue simpleWalkthrough: Creating a simple view component

Téléchargez, générez et testez le code de démarrage.Download, build and test the starter code. Il s’agit d’un projet simple avec un contrôleur ToDo qui affiche une liste de tâches ToDo.It's a simple project with a ToDo controller that displays a list of ToDo items.

Liste des tâches Todo

Ajouter une classe ViewComponentAdd a ViewComponent class

Créez un dossier ViewComponents et ajoutez la classe PriorityListViewComponent suivante :Create a ViewComponents folder and add the following PriorityListViewComponent class:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;

namespace ViewComponentSample.ViewComponents
{
    public class PriorityListViewComponent : ViewComponent
    {
        private readonly ToDoContext db;

        public PriorityListViewComponent(ToDoContext context)
        {
            db = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(
        int maxPriority, bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }
        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo.Where(x => x.IsDone == isDone &&
                                 x.Priority <= maxPriority).ToListAsync();
        }
    }
}

Remarques sur le code :Notes on the code:

  • Les classes ViewComponent peuvent être ajoutées à n’importe quel dossier dans le projet.View component classes can be contained in any folder in the project.

  • Étant donné que le nom de classe PriorityListViewComponent se termine par le suffixe ViewComponent, le Runtime utilise la chaîne « PriorityList » pour référencer le composant de la classe à partir d’une vue.Because the class name PriorityListViewComponent ends with the suffix ViewComponent, the runtime will use the string "PriorityList" when referencing the class component from a view. J’expliquerai ce point plus en détail plus tard.I'll explain that in more detail later.

  • L’attribut [ViewComponent] peut changer le nom utilisé pour faire référence à un composant de vue.The [ViewComponent] attribute can change the name used to reference a view component. Par exemple, nous pourrions avoir nommé la classe XYZ et appliqué l’attribut ViewComponent :For example, we could've named the class XYZ and applied the ViewComponent attribute:

    [ViewComponent(Name = "PriorityList")]
       public class XYZ : ViewComponent
    
  • L’attribut [ViewComponent] ci-dessus indique au sélecteur du composant de vue d’utiliser le nom PriorityList pour rechercher les vues associées au composant et d’utiliser la chaîne « PriorityList » pour faire référence au composant de la classe à partir d’une vue.The [ViewComponent] attribute above tells the view component selector to use the name PriorityList when looking for the views associated with the component, and to use the string "PriorityList" when referencing the class component from a view. J’expliquerai ce point plus en détail plus tard.I'll explain that in more detail later.

  • Le composant utilise l’injection de dépendances pour rendre le contexte de données disponible.The component uses dependency injection to make the data context available.

  • InvokeAsync expose une méthode qui peut être appelée à partir d’une vue et qui peut prendre un nombre arbitraire d’arguments.InvokeAsync exposes a method which can be called from a view, and it can take an arbitrary number of arguments.

  • La méthode InvokeAsync retourne l’ensemble des tâches ToDo qui correspondent aux paramètres isDone et maxPriority spécifiés.The InvokeAsync method returns the set of ToDo items that satisfy the isDone and maxPriority parameters.

Créer la vue Razor du composant de vueCreate the view component Razor view

  • Créez le dossier Views/Shared/Components.Create the Views/Shared/Components folder. Ce dossier doit être nommé Components.This folder must be named Components.

  • Créez le dossier Views/Shared/Components/PriorityList.Create the Views/Shared/Components/PriorityList folder. Ce nom de dossier doit correspondre au nom de la classe du composant de vue, ou au nom de la classe sans le suffixe (dans le cas où vous avez suivi la convention et utilisé le suffixe ViewComponent dans le nom de la classe).This folder name must match the name of the view component class, or the name of the class minus the suffix (if we followed convention and used the ViewComponent suffix in the class name). Si vous avez utilisé l’attribut ViewComponent, le nom de la classe doit correspondre à la désignation de l’attribut.If you used the ViewComponent attribute, the class name would need to match the attribute designation.

  • Créer une vue Razor Views/Shared/Components/PriorityList/Default.cshtml :Create a Views/Shared/Components/PriorityList/Default.cshtml Razor view:

    @model IEnumerable<ViewComponentSample.Models.TodoItem>
    
    <h3>Priority Items</h3>
    <ul>
        @foreach (var todo in Model)
        {
            <li>@todo.Name</li>
        }
    </ul>
    

    La vue Razor affiche une liste des tâches TodoItem retournées.The Razor view takes a list of TodoItem and displays them. Si la méthode InvokeAsync du composant de vue ne passe pas le nom de la vue (comme dans notre exemple), le nom de vue Default est utilisé par convention.If the view component InvokeAsync method doesn't pass the name of the view (as in our sample), Default is used for the view name by convention. Je vous montrerai comment passer le nom de la vue plus tard dans ce didacticiel.Later in the tutorial, I'll show you how to pass the name of the view. Pour substituer le style par défaut d’un contrôleur spécifique, ajoutez une vue dans le dossier des vues du contrôleur (par exemple, Views/ToDo/Components/PriorityList/Default.cshtml).To override the default styling for a specific controller, add a view to the controller-specific view folder (for example Views/ToDo/Components/PriorityList/Default.cshtml).

    Si le composant de vue est spécifique au contrôleur, vous pouvez l’ajouter au dossier du contrôleur (Views/ToDo/Components/PriorityList/Default.cshtml).If the view component is controller-specific, you can add it to the controller-specific folder (Views/ToDo/Components/PriorityList/Default.cshtml).

  • Ajoutez une balise div contenant un appel au composant de liste des priorités à la fin du fichier Views/ToDo/index.cshtml :Add a div containing a call to the priority list component to the bottom of the Views/ToDo/index.cshtml file:

    </table>
    <div>
        @await Component.InvokeAsync("PriorityList", new { maxPriority = 2, isDone = false })
    </div>
    

Le balisage @await Component.InvokeAsync montre la syntaxe utilisée pour appeler un composant de vue.The markup @await Component.InvokeAsync shows the syntax for calling view components. Le premier argument est le nom du composant à appeler.The first argument is the name of the component we want to invoke or call. Les paramètres suivants sont passés au composant.Subsequent parameters are passed to the component. InvokeAsync peut prendre un nombre arbitraire d’arguments.InvokeAsync can take an arbitrary number of arguments.

Testez l’application.Test the app. L’image suivante montre la liste des tâches ToDo et les tâches prioritaires :The following image shows the ToDo list and the priority items:

liste des tâches ToDo et tâches prioritaires

Vous pouvez également appeler le composant de vue directement à partir du contrôleur :You can also call the view component directly from the controller:

public IActionResult IndexVC()
{
    return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });
}

tâches prioritaires retournées par IndexVC

Spécification d’un nom de vueSpecifying a view name

Un composant de vue complexe peut avoir besoin de spécifier une autre vue que la vue par défaut dans certaines conditions.A complex view component might need to specify a non-default view under some conditions. Le code suivant montre comment spécifier la vue « PVC » à l’aide de la méthode InvokeAsync.The following code shows how to specify the "PVC" view from the InvokeAsync method. Mettez à jour la méthode InvokeAsync dans la classe PriorityListViewComponent.Update the InvokeAsync method in the PriorityListViewComponent class.

public async Task<IViewComponentResult> InvokeAsync(
    int maxPriority, bool isDone)
{
    string MyView = "Default";
    // If asking for all completed tasks, render with the "PVC" view.
    if (maxPriority > 3 && isDone == true)
    {
        MyView = "PVC";
    }
    var items = await GetItemsAsync(maxPriority, isDone);
    return View(MyView, items);
}

Copiez le fichier Views/Shared/Components/PriorityList/Default.cshtml dans une vue nommée Views/Shared/Components/PriorityList/PVC.cshtml.Copy the Views/Shared/Components/PriorityList/Default.cshtml file to a view named Views/Shared/Components/PriorityList/PVC.cshtml. Ajoutez un titre pour indiquer que la vue PVC est utilisée.Add a heading to indicate the PVC view is being used.

@model IEnumerable<ViewComponentSample.Models.TodoItem>

<h2> PVC Named Priority Component View</h2>
<h4>@ViewBag.PriorityMessage</h4>
<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Name</li>
    }
</ul>

Mettez à jour Views/ToDo/Index.cshtml :Update Views/ToDo/Index.cshtml:

@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

Exécutez l’application et vérifiez la vue PVC.Run the app and verify PVC view.

Composant de vue des priorités

Si la vue PVC ne s’affiche pas, vérifiez que vous appelez le composant de vue avec une priorité supérieure ou égale à 4.If the PVC view isn't rendered, verify you are calling the view component with a priority of 4 or higher.

Vérifier le chemin de la vueExamine the view path

  • Changez le paramètre de priorité à une priorité inférieure ou égale à 3 pour empêcher l’affichage de la vue des priorités.Change the priority parameter to three or less so the priority view isn't returned.

  • Renommez temporairement Views/ToDo/Components/PriorityList/Default.cshtml en 1Default.cshtml.Temporarily rename the Views/ToDo/Components/PriorityList/Default.cshtml to 1Default.cshtml.

  • Testez l’application. Vous obtenez l’erreur suivante :Test the app, you'll get the following error:

    An unhandled exception occurred while processing the request.
    InvalidOperationException: The view 'Components/PriorityList/Default' wasn't found. The following locations were searched:
    /Views/ToDo/Components/PriorityList/Default.cshtml
    /Views/Shared/Components/PriorityList/Default.cshtml
    EnsureSuccessful
    
  • Copiez Views/ToDo/Components/PriorityList/1Default.cshtml vers Views/Shared/Components/PriorityList/Default.cshtml.Copy Views/ToDo/Components/PriorityList/1Default.cshtml to Views/Shared/Components/PriorityList/Default.cshtml.

  • Ajoutez du balisage à la vue ToDo Shared du composant de vue pour indiquer que la vue provient du dossier Shared.Add some markup to the Shared ToDo view component view to indicate the view is from the Shared folder.

  • Testez la vue de composant Shared.Test the Shared component view.

Affichage de tâches ToDo avec la vue de composant Shared

Éviter les chaînes codées en durAvoiding hard-coded strings

Pour éviter d’éventuels problèmes au moment de la compilation, vous pouvez remplacer le nom du composant de vue codé en dur par le nom de la classe.If you want compile time safety, you can replace the hard-coded view component name with the class name. Créez le composant de vue sans le suffixe « ViewComponent » :Create the view component without the "ViewComponent" suffix:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;

namespace ViewComponentSample.ViewComponents
{
    public class PriorityList : ViewComponent
    {
        private readonly ToDoContext db;

        public PriorityList(ToDoContext context)
        {
            db = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(
        int maxPriority, bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }
        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo.Where(x => x.IsDone == isDone &&
                                 x.Priority <= maxPriority).ToListAsync();
        }
    }
}

Ajoutez une instruction using dans votre fichier de vue Razor et utilisez l’opérateur nameof :Add a using statement to your Razor view file, and use the nameof operator:

@using ViewComponentSample.Models
@using ViewComponentSample.ViewComponents
@model IEnumerable<TodoItem>

    <h2>ToDo nameof</h2>
    <!-- Markup removed for brevity.  -->

    <div>

        @*
            Note: 
            To use the below line, you need to #define no_suffix in ViewComponents/PriorityList.cs or it won't compile.
            By doing so it will cause a problem to index as there will be mutliple viewcomponents 
            with the same name after the compiler removes the suffix "ViewComponent"
        *@

        @*@await Component.InvokeAsync(nameof(PriorityList), new { maxPriority = 4, isDone = true })*@
    </div>

Effectuer un travail synchronePerform synchronous work

Le framework gère l’appel d’une méthode Invoke synchrone si vous n’avez pas besoin d’effectuer un travail asynchrone.The framework handles invoking a synchronous Invoke method if you don't need to perform asynchronous work. La méthode suivante crée un composant de vue Invoke synchrone :The following method creates a synchronous Invoke view component:

public class PriorityList : ViewComponent
{
    public IViewComponentResult Invoke(int maxPriority, bool isDone)
    {
        var items = new List<string> { $"maxPriority: {maxPriority}", $"isDone: {isDone}" };
        return View(items);
    }
}

Le fichier Razor du composant de vue contient les chaînes passées à la méthode Invoke (Views/Home/Components/PriorityList/Default.cshtml) :The view component's Razor file lists the strings passed to the Invoke method (Views/Home/Components/PriorityList/Default.cshtml):

@model List<string>

<h3>Priority Items</h3>
<ul>
    @foreach (var item in Model)
    {
        <li>@item</li>
    }
</ul>

Le composant de vue est appelé dans un fichier Razor (par exemple, Views/Home/Index.cshtml) à l’aide d’une des approches suivantes :The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) using one of the following approaches:

Pour utiliser l’approche IViewComponentHelper, appelez Component.InvokeAsync :To use the IViewComponentHelper approach, call Component.InvokeAsync:

Le composant de vue est appelé dans un fichier Razor (par exemple, Views/Home/Index.cshtml) avec IViewComponentHelper.The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) with IViewComponentHelper.

Appelez Component.InvokeAsync :Call Component.InvokeAsync:

@await Component.InvokeAsync(nameof(PriorityList), new { maxPriority = 4, isDone = true })

Pour utiliser le Tag Helper, inscrivez l’assembly contenant le composant de vue à l’aide de la directive @addTagHelper (le composant de vue se trouve dans un assembly appelé MyWebApp) :To use the Tag Helper, register the assembly containing the View Component using the @addTagHelper directive (the view component is in an assembly called MyWebApp):

@addTagHelper *, MyWebApp

Utilisez le Tag Helper du composant de vue dans le fichier de balisage Razor :Use the view component Tag Helper in the Razor markup file:

<vc:priority-list max-priority="999" is-done="false">
</vc:priority-list>

La signature de méthode de PriorityList.Invoke est synchrone, mais Razor trouve et appelle la méthode avec Component.InvokeAsync dans le fichier de balisage.The method signature of PriorityList.Invoke is synchronous, but Razor finds and calls the method with Component.InvokeAsync in the markup file.

Ressources supplémentairesAdditional resources