Componenti di visualizzazione in ASP.NET CoreView components in ASP.NET Core

Di Rick AndersonBy Rick Anderson

Visualizzare o scaricare il codice di esempio (procedura per il download)View or download sample code (how to download)

Componenti di visualizzazioneView components

I componenti di visualizzazione hanno aspetti comuni con le visualizzazioni parziali, ma sono molto più efficienti.View components are similar to partial views, but they're much more powerful. I componenti di visualizzazione non usano l'associazione di modelli. Dipendono soltanto dai dati specificati in fase di chiamata.View components don't use model binding, and only depend on the data provided when calling into it. Questo articolo è stato scritto usando controller e visualizzazioni, ma i componenti di visualizzazione funzionano anche con Razor Pages.This article was written using controllers and views, but view components also work with Razor Pages.

Un componente di visualizzazione:A view component:

  • Esegue il rendering di un blocco anziché di un'intera risposta.Renders a chunk rather than a whole response.
  • Include la stessa separazione dei concetti e gli stessi vantaggi per i test individuati nel controller e nella visualizzazione.Includes the same separation-of-concerns and testability benefits found between a controller and view.
  • Può contenere parametri e logica di business.Can have parameters and business logic.
  • In genere viene richiamato da una pagina di layout.Is typically invoked from a layout page.

I componenti di visualizzazione possono essere impiegati in un punto qualsiasi della logica di rendering riutilizzabile che risulta troppo complessa per una visualizzazione parziale, ad esempio:View components are intended anywhere you have reusable rendering logic that's too complex for a partial view, such as:

  • Menu di spostamento dinamiciDynamic navigation menus
  • Tag cloud (nel quale viene eseguita una query del database)Tag cloud (where it queries the database)
  • Pannello di accessoLogin panel
  • Carrello acquistiShopping cart
  • Articoli recentemente pubblicatiRecently published articles
  • Contenuto dell'intestazione laterale in un blog tradizionaleSidebar content on a typical blog
  • Pannello di accesso che viene eseguito in ogni pagina e che visualizza il collegamento di accesso o di disconnessione, a seconda dello stato di accesso dell'utenteA 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 componente di visualizzazione è costituito da due parti: la classe (in genere derivata da ViewComponent) e il risultato restituito (in genere una visualizzazione).A view component consists of two parts: the class (typically derived from ViewComponent) and the result it returns (typically a view). Come per i controller, un componente di visualizzazione può essere un oggetto POCO. Molti sviluppatori preferiscono tuttavia sfruttare i metodi e le proprietà disponibili derivando da 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.

Quando si valuta se i componenti di visualizzazione soddisfano le specifiche di un'app, provare a usare Componenti Razor.When considering if view components meet an app's specifications, consider using Razor Components instead. Componenti Razor inoltre combina markup con codice C# per produrre unità riutilizzabili dell'interfaccia utente.Razor Components also combine markup with C# code to produce reusable UI units. Componenti Razor è progettato per la produttività degli sviluppatori quando si fornisce la composizione e la logica dell'interfaccia utente lato client.Razor Components are designed for developer productivity when providing client-side UI logic and composition. Per altre informazioni, vedere Creare e usare ASP.NET Core componenti Razor.For more information, see Creare e usare ASP.NET Core componenti Razor.

Creazione di un componente di visualizzazioneCreating a view component

Questa sezione contiene i requisiti principali per creare un componente di visualizzazione.This section contains the high-level requirements to create a view component. Più avanti in questo articolo, vengono esaminati nel dettaglio tutti i passaggi e viene creato un componente di visualizzazione.Later in the article, we'll examine each step in detail and create a view component.

Classe del componente di visualizzazioneThe view component class

È possibile creare una classe del componente di visualizzazione in uno dei modi seguenti:A view component class can be created by any of the following:

  • Derivando da ViewComponentDeriving from ViewComponent
  • Assegnando a una classe con l'attributo [ViewComponent] o derivando da una classe con l'attributo [ViewComponent]Decorating a class with the [ViewComponent] attribute, or deriving from a class with the [ViewComponent] attribute
  • Creando una classe in cui il nome termina con il suffisso ViewComponentCreating a class where the name ends with the suffix ViewComponent

Come i controller, i componenti di visualizzazione devono essere classi pubbliche, non devono essere classi annidate e astratte.Like controllers, view components must be public, non-nested, and non-abstract classes. Il nome del componente di visualizzazione corrisponde al nome della classe privato del suffisso "ViewComponent".The view component name is the class name with the "ViewComponent" suffix removed. È anche possibile specificarlo in modo esplicito usando la proprietà ViewComponentAttribute.Name.It can also be explicitly specified using the ViewComponentAttribute.Name property.

Una classe del componente di visualizzazione:A view component class:

  • Supporta pienamente l'inserimento delle dipendenze del costruttoreFully supports constructor dependency injection

  • Non partecipa al ciclo di vita del controller, non è quindi possibile usare i filtri in un componente di visualizzazioneDoesn't take part in the controller lifecycle, which means you can't use filters in a view component

Metodi del componente di visualizzazioneView component methods

Un componente di visualizzazione definisce la propria logica in un metodo InvokeAsync che restituisce Task<IViewComponentResult> o in un metodo asincrono Invoke che restituisce 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. I parametri vengono rilevati direttamente dalla chiamata del componente di visualizzazione e non dall'associazione di modelli.Parameters come directly from invocation of the view component, not from model binding. Un componente di visualizzazione non gestisce mai direttamente una richiesta.A view component never directly handles a request. In genere, inizializza un modello e lo passa a una visualizzazione chiamando il metodo View.Typically, a view component initializes a model and passes it to a view by calling the View method. Riepilogando, i metodi del componente di visualizzazione:In summary, view component methods:

  • Definiscono un metodo InvokeAsync che restituisce Task<IViewComponentResult> o un metodo sincrono Invoke che restituisce IViewComponentResult.Define an InvokeAsync method that returns a Task<IViewComponentResult> or a synchronous Invoke method that returns an IViewComponentResult.
  • In genere, inizializzano un modello e lo passano a una visualizzazione chiamando il metodo ViewComponent View.Typically initializes a model and passes it to a view by calling the ViewComponent View method.
  • I parametri vengono rilevati dal metodo di chiamata, non da HTTP, eParameters come from the calling method, not HTTP. non vi è alcuna associazione di modelli.There's no model binding.
  • Non sono raggiungibili direttamente come un endpoint HTTP.Are not reachable directly as an HTTP endpoint. Vengono richiamati dal codice (in genere in una vista).They're invoked from your code (usually in a view). Un componente di visualizzazione non gestisce mai una richiesta.A view component never handles a request.
  • Sono sottoposti a overload sulla firma e non sui dettagli dalla richiesta HHTP corrente.Are overloaded on the signature rather than any details from the current HTTP request.

Percorso di ricerca della visualizzazioneView search path

Il runtime esegue la ricerca della visualizzazione nei percorsi seguenti:The runtime searches for the view in the following paths:

  • /Views/{Nome controller}/Components/{Nome componente visualizzazione}/{Nome visualizzazione}/Views/{Controller Name}/Components/{View Component Name}/{View Name}
  • /Views/Shared/Components/{Nome componente visualizzazione}/{Nome visualizzazione}/Views/Shared/Components/{View Component Name}/{View Name}
  • /Pages/Shared/Components/{Nome componente visualizzazione}/{Nome visualizzazione}/Pages/Shared/Components/{View Component Name}/{View Name}

Il percorso di ricerca si applica ai progetti che usano controller e visualizzazioni e Razor Pages.The search path applies to projects using controllers + views and Razor Pages.

Il nome di visualizzazione predefinito per un componente di visualizzazione è Default, quindi il file della visualizzazione viene solitamente denominato Default.cshtml.The default view name for a view component is Default, which means your view file will typically be named Default.cshtml. È possibile specificare un nome di visualizzazione diverso quando si crea il risultato del componente di visualizzazione o quando si chiama il metodo View.You can specify a different view name when creating the view component result or when calling the View method.

Si consiglia di denominare il file della visualizzazione Default.cshtml e usare il percorso Views/Shared/Components/{Nome componente visualizzazione}/{Nome visualizzazione} .We recommend you name the view file Default.cshtml and use the Views/Shared/Components/{View Component Name}/{View Name} path. Il componente di visualizzazione PriorityList in questo esempio usa Views/Shared/Components/PriorityList/Default.cshtml per la visualizzazione del componente di visualizzazione.The PriorityList view component used in this sample uses Views/Shared/Components/PriorityList/Default.cshtml for the view component view.

Chiamata di un componente di visualizzazioneInvoking a view component

Per usare il componente di visualizzazione, chiamare il codice seguente all'interno di una visualizzazione:To use the view component, call the following inside a view:

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

I parametri saranno passati al metodo InvokeAsync.The parameters will be passed to the InvokeAsync method. Il componente di visualizzazione PriorityList sviluppato nell'articolo viene richiamato dal file di visualizzazione Views/ToDo/Index.cshtml.The PriorityList view component developed in the article is invoked from the Views/ToDo/Index.cshtml view file. Nell'esempio seguente il metodo InvokeAsync viene chiamato con due parametri:In the following, the InvokeAsync method is called with two parameters:

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

Chiamata di un componente di visualizzazione come helper tagInvoking a view component as a Tag Helper

Per ASP.NET Core 1.1 e versioni successive, è possibile richiamare un componente di visualizzazione come helper tag: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>

La classe scritta usando la convenzione Pascal e i parametri del metodo per gli helper tag vengono convertiti nel formato corrispondente kebab case.Pascal-cased class and method parameters for Tag Helpers are translated into their kebab case. Per richiamare un componente di visualizzazione, l'helper tag usa l'elemento <vc></vc>.The Tag Helper to invoke a view component uses the <vc></vc> element. Il componente di visualizzazione viene specificato nel modo seguente:The view component is specified as follows:

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

Per usare un componente di visualizzazione come helper tag, registrare l'assembly contenente il componente di visualizzazione usando la direttiva @addTagHelper.To use a view component as a Tag Helper, register the assembly containing the view component using the @addTagHelper directive. Se il componente di visualizzazione si trova in un assembly denominato MyWebApp, aggiungere la direttiva seguente al file _ViewImports.cshtml:If your view component is in an assembly called MyWebApp, add the following directive to the _ViewImports.cshtml file:

@addTagHelper *, MyWebApp

È possibile registrare un componente di visualizzazione come helper tag per qualsiasi file che fa riferimento al componente di visualizzazione.You can register a view component as a Tag Helper to any file that references the view component. Vedere Gestione dell'ambito dell'helper tag per altre informazioni su come registrare gli helper tag.See Managing Tag Helper Scope for more information on how to register Tag Helpers.

Il metodo InvokeAsync usato in questa esercitazione:The InvokeAsync method used in this tutorial:

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

Nel markup dell'helper tag:In Tag Helper markup:

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

Nell'esempio precedente il componente di visualizzazione PriorityList diventa priority-list.In the sample above, the PriorityList view component becomes priority-list. I parametri per il componente di visualizzazione vengono passati come attributi nel formato kebab case.The parameters to the view component are passed as attributes in kebab case.

Richiamo di un componente di visualizzazione direttamente da un controllerInvoking a view component directly from a controller

I componenti di visualizzazione sono solitamente richiamati da una visualizzazione, ma possono essere richiamati direttamente da un metodo del controller.View components are typically invoked from a view, but you can invoke them directly from a controller method. A differenza dei controller i componenti di visualizzazione non definiscono endpoint. È tuttavia possibile implementare semplicemente un'azione del controller in modo che venga restituito il contenuto di un oggetto ViewComponentResult.While view components don't define endpoints like controllers, you can easily implement a controller action that returns the content of a ViewComponentResult.

In questo esempio il componente di visualizzazione viene chiamato direttamente dal controller:In this example, the view component is called directly from the controller:

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

Procedura dettagliata: Creazione di un componente di visualizzazione sempliceWalkthrough: Creating a simple view component

Scaricare, compilare e testare il codice di avvio.Download, build and test the starter code. Si tratta di un progetto semplice con un controller ToDo che visualizza un elenco di elementi ToDo.It's a simple project with a ToDo controller that displays a list of ToDo items.

Elenco di elementi ToDo

Aggiungere una classe ViewComponentAdd a ViewComponent class

Creare una cartella ViewComponents e aggiungere la classe PriorityListViewComponent seguente: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();
        }
    }
}

Note riguardanti il codice:Notes on the code:

  • Le classi del componente di visualizzazione possono essere contenute in qualsiasi cartella del progetto.View component classes can be contained in any folder in the project.

  • Poiché il nome della classe PriorityListViewComponent termina con il suffisso ViewComponent, il runtime usa la stringa "PriorityList" per fare riferimento al componente della classe da una visualizzazione.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. Questo aspetto viene poi spiegato in modo più dettagliato.I'll explain that in more detail later.

  • L'attributo [ViewComponent] può modificare il nome usato per fare riferimento a un componente di visualizzazione.The [ViewComponent] attribute can change the name used to reference a view component. Ad esempio, sarebbe stato possibile denominare la classe XYZ e applicare l'attributo ViewComponent:For example, we could've named the class XYZ and applied the ViewComponent attribute:

    [ViewComponent(Name = "PriorityList")]
       public class XYZ : ViewComponent
    
  • L'attributo [ViewComponent] precedente indica al selettore del componente di visualizzazione di usare il nome PriorityList per eseguire la ricerca delle visualizzazioni associate al componente e di usare la stringa "PriorityList" per fare riferimento al componente della classe da una visualizzazione.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. Questo aspetto viene poi spiegato in modo più dettagliato.I'll explain that in more detail later.

  • Il componente usa l'inserimento delle dipendenze per rendere disponibile il contesto dei dati.The component uses dependency injection to make the data context available.

  • InvokeAsync espone un metodo che può essere chiamato da una visualizzazione e può accettare un numero arbitrario di argomenti.InvokeAsync exposes a method which can be called from a view, and it can take an arbitrary number of arguments.

  • Il metodo InvokeAsync restituisce il set di elementi ToDo che soddisfano i parametri isDone e maxPriority.The InvokeAsync method returns the set of ToDo items that satisfy the isDone and maxPriority parameters.

Creare la visualizzazione Razor del componente di visualizzazioneCreate the view component Razor view

  • Creare la cartella Views/Shared/Components.Create the Views/Shared/Components folder. Il nome di questa cartella deve essere Components.This folder must be named Components.

  • Creare la cartella Views/Shared/Components/PriorityList.Create the Views/Shared/Components/PriorityList folder. Il nome di questa cartella deve corrispondere al nome della classe del componente di visualizzazione oppure al nome della classe privato del suffisso (se è stata adottata la convenzione ed è stato usato il suffisso ViewComponent nel nome della 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). Se è stato usato l'attributo ViewComponent, il nome della classe dovrà corrispondere alla designazione dell'attributo.If you used the ViewComponent attribute, the class name would need to match the attribute designation.

  • Creare una visualizzazione 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 visualizzazione Razor accetta un elenco di oggetti TodoItem e li visualizza.The Razor view takes a list of TodoItem and displays them. Se il metodo InvokeAsync del componente di visualizzazione non passa il nome della visualizzazione (come in questo esempio), per convenzione viene usato Default come nome della visualizzazione.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. Più avanti nell'esercitazione viene illustrato come passare il nome della visualizzazione.Later in the tutorial, I'll show you how to pass the name of the view. Per sostituire lo stile predefinito per un controller specifico, aggiungere una visualizzazione alla cartella di visualizzazione specifica del controller, ad esempio 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).

    Se il componente di visualizzazione è specifico del controller, è possibile aggiungerlo alla cartella specifica del controller (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).

  • Aggiungere un oggetto div contenente una chiamata al componente dell'elenco priorità alla fine del file 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>
    

Il markup @await Component.InvokeAsync illustra la sintassi per chiamare i componenti di visualizzazione.The markup @await Component.InvokeAsync shows the syntax for calling view components. Il primo argomento corrisponde al nome del componente che si vuole richiamare o chiamare.The first argument is the name of the component we want to invoke or call. I parametri successivi vengono passati al componente.Subsequent parameters are passed to the component. InvokeAsync può accettare un numero arbitrario di argomenti.InvokeAsync can take an arbitrary number of arguments.

Eseguire il test dell'app.Test the app. La figura seguente illustra l'elenco ToDo e gli elementi con priorità:The following image shows the ToDo list and the priority items:

elenco todo ed elementi con priorità

È anche possibile chiamare il componente di visualizzazione direttamente dal controller:You can also call the view component directly from the controller:

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

elementi con priorità dall'azione IndexVC

Impostazione di un nome di visualizzazioneSpecifying a view name

Per un componente di visualizzazione, in alcune condizioni è possibile dover specificare una visualizzazione non predefinita.A complex view component might need to specify a non-default view under some conditions. Il codice seguente illustra come specificare la visualizzazione "PVC" dal metodo InvokeAsync.The following code shows how to specify the "PVC" view from the InvokeAsync method. Aggiornare il metodo InvokeAsync nella 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);
}

Copia il file Views/Shared/Components/PriorityList/Default.cshtml in una visualizzazione denominata 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. Aggiungere un'intestazione per indicare che viene usata una visualizzazione PVC.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>

Aggiornare Views/ToDo/Index.cshtml:Update Views/ToDo/Index.cshtml:

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

Eseguire l'app e verificare la visualizzazione PVC.Run the app and verify PVC view.

Componente di visualizzazione con priorità

Se non viene eseguito il rendering della visualizzazione PVC, verificare che si stia chiamando il componente di visualizzazione con priorità pari a 4 o superiore.If the PVC view isn't rendered, verify you are calling the view component with a priority of 4 or higher.

Esaminare il percorso di visualizzazioneExamine the view path

  • Modificare il parametro relativo alla priorità impostandolo su tre o priorità inferiore perché la visualizzazione con priorità non venga restituita.Change the priority parameter to three or less so the priority view isn't returned.

  • Rinominare temporaneamente la cartella Views/ToDo/Components/PriorityList/Default.cshtml in 1Default.cshtml.Temporarily rename the Views/ToDo/Components/PriorityList/Default.cshtml to 1Default.cshtml.

  • Testare l'app. Verrà visualizzato il messaggio seguente: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
    
  • Copiare Views/ToDo/Components/PriorityList/1Default.cshtml in Views/Shared/Components/PriorityList/Default.cshtml.Copy Views/ToDo/Components/PriorityList/1Default.cshtml to Views/Shared/Components/PriorityList/Default.cshtml.

  • Aggiungere markup alla visualizzazione del componente di visualizzazione ToDo in Shared per indicare che la visualizzazione proviene dalla cartella Shared.Add some markup to the Shared ToDo view component view to indicate the view is from the Shared folder.

  • Testare la visualizzazione del componente Shared.Test the Shared component view.

Output di ToDo con visualizzazione del componente Shared

Evitare stringhe hardcodedAvoiding hard-coded strings

Per garantire la sicurezza in fase di compilazione, è possibile sostituire il nome del componente di compilazione hardcoded con il nome della classe.If you want compile time safety, you can replace the hard-coded view component name with the class name. Creare il componente di visualizzazione senza il suffisso "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();
        }
    }
}

Aggiungere un'istruzione using al file di visualizzazione Razor e usare l'operatore 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 multiple viewcomponents 
            with the same name after the compiler removes the suffix "ViewComponent"
        *@

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

Eseguire operazioni sincronePerform synchronous work

Il framework gestisce la chiamata di un metodo Invoke sincrono se non è necessario eseguire operazioni asincrone.The framework handles invoking a synchronous Invoke method if you don't need to perform asynchronous work. Il metodo seguente crea un componente di visualizzazione Invoke sincrono: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);
    }
}

Il file Razor del componente di visualizzazione elenca le stringhe passate al metodo 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>

Il componente di visualizzazione viene richiamato in un file Razor (ad esempio Views/Home/Index.cshtml) usando uno degli approcci seguenti:The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) using one of the following approaches:

Per usare l'approccio IViewComponentHelper, chiamare Component.InvokeAsync:To use the IViewComponentHelper approach, call Component.InvokeAsync:

Il componente di visualizzazione viene richiamato in un file Razor (ad esempio Views/Home/Index.cshtml) con IViewComponentHelper.The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) with IViewComponentHelper.

Chiamare Component.InvokeAsync:Call Component.InvokeAsync:

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

Per usare l'helper tag, registrare l'assembly contenente il componente di visualizzazione usando la direttiva @addTagHelper (il componente di visualizzazione è in un assembly denominato 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

Usare l'helper tag del componente di visualizzazione nel file di markup 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 firma del metodo di PriorityList.Invoke è sincrona, ma Razor trova e chiama il metodo con Component.InvokeAsync nel file di markup.The method signature of PriorityList.Invoke is synchronous, but Razor finds and calls the method with Component.InvokeAsync in the markup file.

Tutti i parametri del componente di visualizzazione sono obbligatoriAll view component parameters are required

Ogni parametro in un componente di visualizzazione è un attributo obbligatorio.Each parameter in a view component is a required attribute. Vedere il problema in GitHub.See this GitHub issue. Se un parametro viene omesso:If any parameter is omitted:

  • La firma del metodo InvokeAsync non corrisponde, quindi il metodo non verrà eseguito.The InvokeAsync method signature won't match, therefore the method won't execute.
  • ViewComponent non esegue il rendering dei markup.The ViewComponent won't render any markup.
  • Non vengono generati errori.No errors will be thrown.

Risorse aggiuntiveAdditional resources