Ansichtskomponenten in ASP.NET CoreView components in ASP.NET Core

Von Rick AndersonBy Rick Anderson

Anzeigen oder Herunterladen von Beispielcode (Vorgehensweise zum Herunterladen)View or download sample code (how to download)

AnsichtskomponentenView components

Ansichtskomponenten ähneln zwar den Teilansichten, sind aber wesentlich leistungsstärker.View components are similar to partial views, but they're much more powerful. Ansichtskomponenten verwenden keine Modellbindungen und sind nur von den Daten abhängig, die bei ihrem Aufruf bereitgestellt werden.View components don't use model binding, and only depend on the data provided when calling into it. Dieser Artikel wurde mit Controllern und Ansichten geschrieben, aber Ansichts Komponenten funktionieren auch mit Razor Seiten.This article was written using controllers and views, but view components also work with Razor Pages.

Eine Ansichtskomponente:A view component:

  • Rendert nur einen Block statt einer gesamten Antwort.Renders a chunk rather than a whole response.
  • Umfasst die gleiche Trennung von Belangen und Vorzüge der Testbarkeit, die auch zwischen einem Controller und einer Ansicht bestehen.Includes the same separation-of-concerns and testability benefits found between a controller and view.
  • Kann Parameter und Geschäftslogik aufweisen.Can have parameters and business logic.
  • Wird normalerweise von einer Layoutseite aus aufgerufen.Is typically invoked from a layout page.

Ansichtskomponenten wurden für wiederverwendbare Renderinglogik entwickelt, die für eine Teilansicht zu komplex ist. Dazu gehören:View components are intended anywhere you have reusable rendering logic that's too complex for a partial view, such as:

  • Dynamische NavigationsmenüsDynamic navigation menus
  • Tag Cloud (dort, wo die Datenbank abgefragt wird)Tag cloud (where it queries the database)
  • ein AnmeldebereichLogin panel
  • EinkaufswagenShopping cart
  • vor Kurzem veröffentlichte ArtikelRecently published articles
  • Inhalt in einer Seitenleiste auf einem klassischen BlogSidebar content on a typical blog
  • Ein Anmeldebereich, der auf jeder Seite gerendert wird und der die Links zum Abmelden bzw. Anmelden anzeigt, je nachdem, ob der Benutzer an- oder abgemeldet istA 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

Eine Ansichtskomponenten besteht aus zwei Teilen: der Klasse (normalerweise von ViewComponent abgeleitet) und dem von dieser Klasse zurückgegebenen Ergebnis (normalerweise eine Ansicht).A view component consists of two parts: the class (typically derived from ViewComponent) and the result it returns (typically a view). Eine Ansichtskomponente kann, ähnlich wie Controller, ein POCO sein. Die meisten Entwickler sollten jedoch von den Methoden und Eigenschaften, die von ViewComponent abgeleitet werden, Gebrauch machen.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.

Wenn Sie überlegen, ob Ansichts Komponenten die Spezifikationen einer APP erfüllen, erwägen Sie stattdessen die Verwendung von- Razor Komponenten.When considering if view components meet an app's specifications, consider using Razor Components instead. RazorKomponenten kombinieren auch Markup mit c#-Code, um wiederverwendbare UI-Einheiten zu schaffen Components also combine markup with C# code to produce reusable UI units. RazorKomponenten sind für Entwickler Produktivität konzipiert, wenn Sie Client seitige Benutzeroberflächen Logik und Komposition bereitstellen. Components are designed for developer productivity when providing client-side UI logic and composition. Weitere Informationen finden Sie unter Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.For more information, see Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.

Erstellen einer AnsichtskomponenteCreating a view component

In diesem Abschnitt werden die allgemeinen Anforderungen zum Erstellen einer Ansichtskomponente beschrieben.This section contains the high-level requirements to create a view component. Im Folgenden wird jeder Schritt ausführlich betrachtet, und Sie erstellen im Zuge dessen eine Ansichtskomponente.Later in the article, we'll examine each step in detail and create a view component.

Die AnsichtskomponentenklasseThe view component class

Eine Ansichtskomponentenklasse kann durch folgende Aktionen erstellt werden:A view component class can be created by any of the following:

  • durch die Ableitung von ViewComponentDeriving from ViewComponent
  • durch Ergänzen der Klasse mit dem Attribut [ViewComponent] oder durch das Ableiten von einer Klasse mit dem Attribut [ViewComponent]Decorating a class with the [ViewComponent] attribute, or deriving from a class with the [ViewComponent] attribute
  • durch das Erstellen einer Klasse, deren Name mit dem Suffix ViewComponent endetCreating a class where the name ends with the suffix ViewComponent

Ansichtskomponenten müssen, genauso wie Controller, öffentliche, unverschachtelt und nicht abstrakte Klassen sein.Like controllers, view components must be public, non-nested, and non-abstract classes. Der Ansichtskomponentenname ist der Klassenname ohne den Suffix „ViewComponent“.The view component name is the class name with the "ViewComponent" suffix removed. Er kann zudem explizit mit der Eigenschaft ViewComponentAttribute.Name angegeben werden.It can also be explicitly specified using the ViewComponentAttribute.Name property.

Eine Ansichtskomponentenklasse:A view component class:

  • Unterstützt Constructor Dependency Injection vollständigFully supports constructor dependency injection

  • Ist nicht Bestandteil des Controllerlebenszyklus. Dies bedeutet, dass Sie keine Filter in Ansichtskomponenten verwenden können.Doesn't take part in the controller lifecycle, which means you can't use filters in a view component

AnsichtskomponentenmethodenView component methods

Eine Ansichtskomponente definiert ihre Logik in einer InvokeAsync-Methode, die ein Task<IViewComponentResult> zurückgibt, oder in einer synchronen Invoke-Methode, die ein IViewComponentResult zurückgibt.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. Parameter stammen direkt vom Aufruf der Ansichtskomponente und nicht von der Modellbindung.Parameters come directly from invocation of the view component, not from model binding. Eine Ansichtskomponente behandelt nie direkt eine Anfrage.A view component never directly handles a request. Normalerweise initialisiert eine Ansichtskomponente ein Modell und übergibt dieses an eine Ansicht, indem sie die View-Methode aufruft.Typically, a view component initializes a model and passes it to a view by calling the View method. Zusammengefasst bedeutet dies für Komponentenmethoden Folgendes:In summary, view component methods:

  • Es wird eine InvokeAsync-Methode definiert, die ein Task<IViewComponentResult> zurückgibt, oder eine synchrone Invoke-Methode, die ein IViewComponentResult zurückgibt.Define an InvokeAsync method that returns a Task<IViewComponentResult> or a synchronous Invoke method that returns an IViewComponentResult.
  • Initialisiert in der Regel ein Modell und übergibt es an eine Ansicht, indem die-Methode aufgerufen wird ViewComponent View .Typically initializes a model and passes it to a view by calling the ViewComponent View method.
  • Parameter stammen aus der aufrufenden Methode, nicht aus HTTP.Parameters come from the calling method, not HTTP. Es gibt keine Modellbindung.There's no model binding.
  • Die Methoden sind nicht direkt als HTTP-Endpunkt erreichbar.Are not reachable directly as an HTTP endpoint. Sie werden von Ihrem Code aufgerufen (üblicherweise in einer Ansicht).They're invoked from your code (usually in a view). Eine Ansichtskomponente verarbeitet nie eine Anforderung.A view component never handles a request.
  • Methoden werden in der Signatur überladen, nicht in Details der aktuellen HTTP-Anforderung.Are overloaded on the signature rather than any details from the current HTTP request.

Anzeigen des SuchpfadsView search path

Die Runtime sucht in den folgenden Pfaden nach der Ansicht:The runtime searches for the view in the following paths:

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

Der Suchpfad gilt für Projekte mit Controllern und Ansichten und Razor Seiten.The search path applies to projects using controllers + views and Razor Pages.

Der Standardansichtsname für die Ansichtskomponente ist Default. Dies bedeutet, dass Ihre Ansichtsdatei normalerweise Default.cshtml heißt.The default view name for a view component is Default, which means your view file will typically be named Default.cshtml. Sie können einen anderen Ansichtsnamen angeben, wenn Sie die Ansichtskomponentenergebnisse erstellen oder die View-Methode aufrufen.You can specify a different view name when creating the view component result or when calling the View method.

Es wird empfohlen, dass Sie die Ansichtsdatei Default.cshtml nennen und den Pfad View/Shared/Components/{Ansichtskomponentenname}/{Ansichtsname} verwenden.We recommend you name the view file Default.cshtml and use the Views/Shared/Components/{View Component Name}/{View Name} path. Die Ansichtskomponente PriorityList, die in diesem Beispiel verwendet wird, verwendet Views/Shared/Components/PriorityList/Default.cshtml für die Ansichtskomponentenansicht.The PriorityList view component used in this sample uses Views/Shared/Components/PriorityList/Default.cshtml for the view component view.

Anpassen des AnsichtssuchpfadsCustomize the view search path

Um den Suchpfad für die Ansicht anzupassen, ändern Sie Razor die ViewLocationFormats Sammlung.To customize the view search path, modify Razor's ViewLocationFormats collection. Um z. B. nach Ansichten im Pfad „/Components/{Name der Ansichtskomponente}/{Name der Ansicht}“ zu suchen, fügen Sie der Auflistung ein neues Element hinzu:For example, to search for views within the path "/Components/{View Component Name}/{View Name}", add a new item to the collection:

services.AddMvc()
    .AddRazorOptions(options =>
    {
        options.ViewLocationFormats.Add("/{0}.cshtml");
    })
    .SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

Im vorangehenden Code stellt der Platzhalter „{0}“ den Pfad „Components/{Name der Ansichtskomponente}/{Name der Ansicht}“ dar.In the preceding code, the placeholder "{0}" represents the path "Components/{View Component Name}/{View Name}".

Aufrufen einer AnsichtskomponenteInvoking a view component

Rufen Sie Folgendes in der Ansicht auf, wenn Sie die Ansichtskomponente verwenden möchten:To use the view component, call the following inside a view:

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

Die Parameter werden an die InvokeAsync-Methode übergeben.The parameters will be passed to the InvokeAsync method. Die Ansichtskomponente PriorityList, die im Artikel entwickelt wurde, wird von der Ansichtsdatei Views/ToDo/Index.cshtml aufgerufen.The PriorityList view component developed in the article is invoked from the Views/ToDo/Index.cshtml view file. Im folgenden Code wird die InvokeAsync-Methode mit zwei Parametern aufgerufen:In the following, the InvokeAsync method is called with two parameters:

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

Aufrufen einer Ansichtskomponente als TaghilfsprogrammInvoking a view component as a Tag Helper

In ASP.NET Core 1.1 und höher können Sie eine Ansichtskomponente als Taghilfsprogramm aufrufen.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>

Namen von Klassen und Methodenparameter für Taghilfsprogramme, die in Pascal-Schreibweise angegeben sind, werden in Kebab-Schreibweise übersetzt.Pascal-cased class and method parameters for Tag Helpers are translated into their kebab case. Das Taghilfsprogramm zum Aufrufen einer Ansichtskomponente verwendet das <vc></vc>-Element.The Tag Helper to invoke a view component uses the <vc></vc> element. Die Ansichtskomponente wird wie folgt angegeben:The view component is specified as follows:

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

Damit Sie eine Ansichtskomponente als Taghilfsprogramm verwenden können, registrieren Sie die Assembly, die die Ansichtskomponente enthält, mit der @addTagHelper-Anweisung.To use a view component as a Tag Helper, register the assembly containing the view component using the @addTagHelper directive. Wenn Ihre Ansichtskomponente eine Assembly mit dem Namen MyWebApp ist, fügen Sie die folgende Anweisung zu der Datei _ViewImports.cshtml hinzu:If your view component is in an assembly called MyWebApp, add the following directive to the _ViewImports.cshtml file:

@addTagHelper *, MyWebApp

Sie können eine Ansichtskomponente als Taghilfsprogramm für jede Datei registrieren, die auf die Ansichtskomponente verweist.You can register a view component as a Tag Helper to any file that references the view component. Weitere Informationen zum Registrieren eines Taghilfsprogramms finden Sie unter Managing Tag Helper Scope (Verwalten des Bereichs des Taghilfsprogramms).See Managing Tag Helper Scope for more information on how to register Tag Helpers.

Die InvokeAsync-Methode, die in diesem Tutorial verwendet wird:The InvokeAsync method used in this tutorial:

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

In Taghilfsprogramm-Markup:In Tag Helper markup:

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

Im Beispiel oben stehenden Beispiel wird die Ansichtskomponente PriorityList zu priority-list.In the sample above, the PriorityList view component becomes priority-list. Die Parameter der Ansichtskomponente werden als Attribute in Kebab-Schreibweise übergeben.The parameters to the view component are passed as attributes in kebab case.

Direkter Aufrufe einer Ansichtskomponente von einem ControllerInvoking a view component directly from a controller

Ansichtskomponenten werden normalerweise von einer Ansicht aus aufgerufen, aber Sie können sie auch direkt von einer Controllermethode aus aufrufen.View components are typically invoked from a view, but you can invoke them directly from a controller method. Obwohl Ansichtskomponenten keine Endpunkte so wie Controller definieren, können Sie trotzdem eine Controlleraktion implementieren, die den Inhalt von ViewComponentResult zurückgibt.While view components don't define endpoints like controllers, you can easily implement a controller action that returns the content of a ViewComponentResult.

In diesem Beispiel wird die Ansichtskomponente direkt von einem Controller aus aufgerufen:In this example, the view component is called directly from the controller:

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

Exemplarische Vorgehensweise: Erstellen einer einfachen AnsichtskomponenteWalkthrough: Creating a simple view component

Laden Sie den Startercode herunter, und erstellen und testen Sie diesen.Download, build and test the starter code. Dabei handelt es sich um ein einfaches Projekt mit einem ToDo-Controller, in dem eine Liste von ToDo-Elementen angezeigt wird.It's a simple project with a ToDo controller that displays a list of ToDo items.

Liste mit ToDo-Elementen

Hinzufügen einer ViewComponent-KlasseAdd a ViewComponent class

Erstellen Sie einen ViewComponents-Ordner, und fügen Sie die folgende PriorityListViewComponent-Klasse hinzu: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();
        }
    }
}

Bemerkungen zum Code:Notes on the code:

  • Ansichtskomponentenklassen können sich in jedem Ordner im Projekt befinden.View component classes can be contained in any folder in the project.

  • Da der Klassenname „PriorityListViewComponent mit dem Suffix ViewComponent endet, verwendet die Runtime die Zeichenfolge „PriorityList“, wenn Sie von einer Ansicht aus auf die Klassenkomponente verweist.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. Dies wird im Folgenden noch ausführlicher erklärt.I'll explain that in more detail later.

  • Das [ViewComponent]-Attribut kann den Namen ändern, der zum Verweis auf eine Ansichtskomponente verwendet wird.The [ViewComponent] attribute can change the name used to reference a view component. Wir hätten die Klasse auch XYZ nennen und das ViewComponent-Attribut anwenden können:For example, we could've named the class XYZ and applied the ViewComponent attribute:

    [ViewComponent(Name = "PriorityList")]
       public class XYZ : ViewComponent
    
  • Das oben stehende [ViewComponent]-Attribut teilt dem Ansichtskomponentenselektor mit, den Namen PriorityList zu verwenden, wenn er nach den Ansichten sucht, die mit der Komponente verknüpft sind. Zudem wird er informiert, die Zeichenfolge „“ zu verwenden, wenn er von einer Ansicht aus auf die Klassenkomponente verweist.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. Dies wird im Folgenden noch ausführlicher erklärt.I'll explain that in more detail later.

  • Die Komponente verwendet Dependency Injection, um den Datenkontext verfügbar zu machen.The component uses dependency injection to make the data context available.

  • InvokeAsync macht eine Methode verfügbar, die von einer Ansicht aus aufgerufen werden kann, und akzeptiert eine arbiträre Anzahl von Argumenten.InvokeAsync exposes a method which can be called from a view, and it can take an arbitrary number of arguments.

  • Die InvokeAsync-Methode gibt mehrere ToDo-Elemente zurück, die die Bedingungen der Parameter isDone und maxPriority erfüllen.The InvokeAsync method returns the set of ToDo items that satisfy the isDone and maxPriority parameters.

Erstellen der Ansichts Komponenten Razor AnsichtCreate the view component Razor view

  • Erstellen Sie den Ordner Views/Shared/Components.Create the Views/Shared/Components folder. Diese Ordner muss den Namen Components besitzen.This folder must be named Components.

  • Erstellen Sie den Ordner Views/Shared/Components/PriorityList.Create the Views/Shared/Components/PriorityList folder. Der Ordnername muss mit dem Namen der Ansichtskomponentenklasse oder mit dem Namen der Klasse ohne Suffix (wenn wir uns an die Konvention gehalten und ViewComponent als Suffix im Klassennamen verwendet haben) übereinstimmen.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). Wenn Sie das Attribut ViewComponent verwenden, muss der Klassenname mit der Attributbezeichnung übereinstimmen.If you used the ViewComponent attribute, the class name would need to match the attribute designation.

  • Erstellen Sie eine Sichten/Shared/Components/prioritylist/default. cshtml - Razor Ansicht: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>
    

    RazorIn der Ansicht wird eine Liste TodoItem von angezeigt und angezeigt.The Razor view takes a list of TodoItem and displays them. Wenn die InvokeAsync-Methode der Ansichtskomponente nicht den Namen der Ansicht übergibt (wie in unserem Beispiel), wird Default per Konvention für den Ansichtsnamen verwendet.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. Später in diesem Tutorial erfahren Sie, wie Sie den Namen der Ansicht übergeben.Later in the tutorial, I'll show you how to pass the name of the view. Fügen Sie eine Ansicht einem controllerspezifischen Ansichtsordner hinzu, um das Standardformat für einen spezifischen Controller zu überschreiben (z.B. 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).

    Wenn die Ansichtskomponente controllerspezifisch ist, können Sie sie dem controllerspezifischen Ordner hinzufügen (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).

  • Fügen Sie ein div-Objekt, das einen Aufruf an eine Prioritätslistenkomponente enthält, am Ende der Datei Views/ToDo/index.cshtml hinzu: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>
    

Das Markup @await Component.InvokeAsync zeigt die Syntax für die aufrufenden Ansichtskomponenten an.The markup @await Component.InvokeAsync shows the syntax for calling view components. Das erste Argument ist der Name der aufzurufenden Komponente.The first argument is the name of the component we want to invoke or call. Darauffolgende Parameter werden an die Komponente übergeben.Subsequent parameters are passed to the component. InvokeAsync kann eine arbiträre Anzahl von Argumenten annehmen.InvokeAsync can take an arbitrary number of arguments.

Testen Sie die App.Test the app. In der folgenden Abbildung werden die ToDo-Liste und die Elemente mit Priorität angezeigt:The following image shows the ToDo list and the priority items:

ToDo-Liste und Prioritätselemente

Sie können Sie Ansichtskomponente auch direkt vom Controller aus aufrufen:You can also call the view component directly from the controller:

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

Prioritätselemente der IndexVC-Aktion

Angeben eines AnsichtsnamensSpecifying a view name

Eine komplexe Ansichtskomponente erfordert möglicherweise, dass unter bestimmten Umständen eine Ansicht angegeben wird, die nicht dem Standard entspricht.A complex view component might need to specify a non-default view under some conditions. Der folgende Code zeigt, wie die Ansicht „PVC“ von der InvokeAsync-Methode aus angegeben wird.The following code shows how to specify the "PVC" view from the InvokeAsync method. Aktualisieren Sie die InvokeAsync-Methode in der PriorityListViewComponent-Klasse.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);
}

Kopieren Sie die Datei Views/Shared/Components/PriorityList/Default.cshtml in eine Ansicht mit dem Namen 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. Fügen Sie eine Überschrift hinzu, um anzugeben, dass die PVC-Ansicht verwendet wird.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>

Aktualisieren Sie Views/ToDo/Index.cshtml:Update Views/ToDo/Index.cshtml:

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

Führen Sie die App aus und überprüfen Sie die PVC-Ansicht.Run the app and verify PVC view.

Ansichtskomponente mit Priorität

Wenn die PVC-Ansicht nicht gerendert wird, stellen Sie sicher, dass Sie die Ansichtskomponente mit einer Priorität von 4 oder höher aufrufen.If the PVC view isn't rendered, verify you are calling the view component with a priority of 4 or higher.

Untersuchen des AnsichtspfadsExamine the view path

  • Ändern Sie den Prioritätsparameter in drei oder weniger, damit die Prioritätsansicht nicht zurückgegeben wird.Change the priority parameter to three or less so the priority view isn't returned.

  • Benennen Sie Views/ToDo/Components/PriorityList/Default.cshtml vorübergehend in 1Default.cshtml um.Temporarily rename the Views/ToDo/Components/PriorityList/Default.cshtml to 1Default.cshtml.

  • Wenn Sie die App testen, erhalten Sie die folgende Fehlermeldung: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
    
  • Kopieren Sie Views/ToDo/Components/PriorityList/1Default.cshtml nach Views/Shared/Components/PriorityList/Default.cshtml.Copy Views/ToDo/Components/PriorityList/1Default.cshtml to Views/Shared/Components/PriorityList/Default.cshtml.

  • Fügen Sie der ToDo-Ansichtskomponentenansicht Shared (Freigegeben) Markup hinzu, um anzugeben, dass die Ansicht aus dem Ordner Shared stammt.Add some markup to the Shared ToDo view component view to indicate the view is from the Shared folder.

  • Testen Sie die Komponentenansicht Shared (Freigegeben).Test the Shared component view.

ToDo-Ausgabe mit Komponentenansicht „Shared“

Vermeiden hart codierter ZeichenfolgenAvoiding hard-coded strings

Wenn Sie Sicherheit zu Kompilierzeit haben möchten, können Sie den hart codierten Komponentennamen durch den Klassennamen ersetzen.If you want compile time safety, you can replace the hard-coded view component name with the class name. Erstellen Sie die Ansichtskomponente ohne den Suffix „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();
        }
    }
}

Fügen Sie using Razor der Ansichts Datei eine-Anweisung hinzu, und verwenden Sie den- nameof Operator: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>

Ausführen synchroner VerarbeitungPerform synchronous work

Das Framework verarbeitet den Aufruf einer synchronen Invoke-Methode, wenn Sie keine asynchrone Verarbeitung durchführen müssen.The framework handles invoking a synchronous Invoke method if you don't need to perform asynchronous work. Die folgende Methode erstellt eine synchrone Invoke-Ansichtskomponente: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);
    }
}

Die Datei der Ansichts Komponente Razor Listet die an die Methode übergebenen Zeichen folgen auf 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>

Die Ansichts Komponente wird in einer Razor Datei (z. b. views/Home/Index. cshtml) mit einem der folgenden Ansätze aufgerufen:The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) using one of the following approaches:

Rufen Sie Component.InvokeAsync auf, um das IViewComponentHelper-Verfahren zu verwenden:To use the IViewComponentHelper approach, call Component.InvokeAsync:

Die Ansichts Komponente wird in einer Razor Datei (z. b. views/Home/Index. cshtml) mit aufgerufen IViewComponentHelper .The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) with IViewComponentHelper.

Rufen Sie Component.InvokeAsync auf:Call Component.InvokeAsync:

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

Um das Taghilfsprogramm zu verwenden, registrieren Sie die Assembly, die die Ansichtskomponente enthält, mit der Anweisung @addTagHelper (die Ansichtskomponente befindet sich in einer Assembly namens 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

Verwenden Sie das taghilfsprogramm für die Ansichts Komponente in der Razor Markup Datei:Use the view component Tag Helper in the Razor markup file:

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

Die Methoden Signatur von PriorityList.Invoke ist synchron, Razor findet jedoch die-Methode Component.InvokeAsync in der Markup Datei und ruft Sie auf.The method signature of PriorityList.Invoke is synchronous, but Razor finds and calls the method with Component.InvokeAsync in the markup file.

Alle Parameter einer Ansichtskomponente sind erforderlichAll view component parameters are required

Jeder Parameter in einer Ansichtskomponente ist ein erforderliches Attribut.Each parameter in a view component is a required attribute. Weitere Informationen finden Sie im entsprechenden GitHub-Issue.See this GitHub issue. Wenn ein Parameter ausgelassen wird, geschieht Folgendes:If any parameter is omitted:

  • Für die Signatur der InvokeAsync-Methode kann keine Übereinstimmung ermittelt werden. Die Methode wird daher nicht ausgeführt.The InvokeAsync method signature won't match, therefore the method won't execute.
  • Das Markup des ViewComponent-Elements wird nicht gerendert.The ViewComponent won't render any markup.
  • Es werden keine Fehler ausgelöst.No errors will be thrown.

Zusätzliche RessourcenAdditional resources