ASP.NET Core のビュー コンポーネントView components in ASP.NET Core

作成者: Rick AndersonBy Rick Anderson

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

ビュー コンポーネントView components

ビュー コンポーネントは部分ビューと似ていますが、はるかに強力なものです。View components are similar to partial views, but they're much more powerful. ビュー コンポーネントでは、モデル バインドを使用せず、呼び出すときに指定されたデータのみに依存します。View components don't use model binding, and only depend on the data provided when calling into it. この記事はコントローラーとビューを使用して作成されましたが、ビュー コンポーネントは Razor Pages でも利用できます。This article was written using controllers and views, but view components also work with Razor Pages.

ビュー コンポーネントの特徴は次のとおりです。A view component:

  • 応答全体ではなく、チャンクをレンダリングします。Renders a chunk rather than a whole response.
  • コントローラーとビューの間にあるのと同じ関心の分離とテストの容易性の利点があります。Includes the same separation-of-concerns and testability benefits found between a controller and view.
  • パラメーターとビジネス ロジックを含めることができます。Can have parameters and business logic.
  • 通常、レイアウト ページから呼び出されます。Is typically invoked from a layout page.

ビュー コンポーネントは、次のような部分ビューには複雑すぎる、再利用可能なレンダリング ロジックをどこでも使用できるようにするためのものです。View components are intended anywhere you have reusable rendering logic that's too complex for a partial view, such as:

  • 動的なナビゲーション メニューDynamic navigation menus
  • タグ クラウド (データベースをクエリする場所)Tag cloud (where it queries the database)
  • ログイン パネルLogin panel
  • ショッピング カートShopping cart
  • 新着情報の記事Recently published articles
  • 一般的なブログのサイドバーのコンテンツSidebar content on a typical blog
  • すべてのページでレンダリングされ、ユーザーの状態のログに応じて、ログアウトまたはログインのいずれかのリンクを示すログイン パネルA 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

ビュー コンポーネントは、次の 2 つのパーツで構成されます。クラス (通常、ViewComponent から派生) と、クラスで返される結果 (通常はビュー) です。A view component consists of two parts: the class (typically derived from ViewComponent) and the result it returns (typically a view). コントローラーと同様に、ビュー コンポーネントは POCO の場合がありますが、ほとんどの開発者は 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.

ビュー コンポーネントが、アプリの仕様を満たしているかどうかを検討する場合は、代わりに Razor コンポーネントを使用することを検討してください。When considering if view components meet an app's specifications, consider using Razor Components instead. Razor コンポーネントもまた、C# コードとマークアップを組み合わせて、再利用可能な UI ユニットを生成します。Razor Components also combine markup with C# code to produce reusable UI units. Razor コンポーネントは、クライアント側の UI ロジックとコンポジションを提供する場合の開発者の生産性のために設計されています。Razor Components are designed for developer productivity when providing client-side UI logic and composition. 詳細については、「Create and use Razor components」を参照してください。For more information, see Create and use Razor components.

ビューのコンポーネントを作成するCreating a view component

このセクションには、ビュー コンポーネントを作成するための高レベルの要件が含まれています。This section contains the high-level requirements to create a view component. 記事の後半で、各ステップの詳細を検証し、ビュー コンポーネントを作成します。Later in the article, we'll examine each step in detail and create a view component.

ビュー コンポーネント クラスThe view component class

ビュー コンポーネント クラスは、次のいずれかによって作成できます。A view component class can be created by any of the following:

  • ViewComponent から派生させるDeriving from ViewComponent
  • [ViewComponent] 属性でクラスを装飾するか、[ViewComponent] 属性でクラスから派生させるDecorating a class with the [ViewComponent] attribute, or deriving from a class with the [ViewComponent] attribute
  • 名前がサフィックス ViewComponent で終わるクラスを作成するCreating a class where the name ends with the suffix ViewComponent

コントローラーと同様に、ビュー コンポーネントは、パブリック クラス、入れ子にされていないクラス、および非抽象クラスである必要があります。Like controllers, view components must be public, non-nested, and non-abstract classes. ビュー コンポーネント名は、"ViewComponent" サフィックスを除いたクラス名です。The view component name is the class name with the "ViewComponent" suffix removed. また、これは ViewComponentAttribute.Name プロパティを使用して、明示的に指定することもできます。It can also be explicitly specified using the ViewComponentAttribute.Name property.

ビュー コンポーネント クラスの特徴は次のとおりです。A view component class:

  • コンストラクターの依存性の注入を完全にサポートしますFully supports constructor dependency injection

  • コントローラーのライフサイクルに関わりません。つまり、ビュー コンポーネントでフィルターを使用できないということですDoesn't take part in the controller lifecycle, which means you can't use filters in a view component

ビュー コンポーネント メソッドView component methods

ビュー コンポーネントでは、Task<IViewComponentResult> を返す InvokeAsync メソッドまたは IViewComponentResult を返す同期 Invoke メソッドでロジックを定義します。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. パラメーターは、モデル バインドではなく、ビュー コンポーネントから直接取得します。Parameters come directly from invocation of the view component, not from model binding. ビュー コンポーネントが要求を直接処理することはありません。A view component never directly handles a request. 通常、ビュー コンポーネントは、モデルを初期化し、View メソッドを呼び出してビューに渡します。Typically, a view component initializes a model and passes it to a view by calling the View method. 要約すると、ビュー コンポーネント メソッドの特徴は次のとおりです。In summary, view component methods:

  • Task<IViewComponentResult> を返す InvokeAsync メソッドまたは IViewComponentResult を返す同期 Invoke メソッドを定義します。Define an InvokeAsync method that returns a Task<IViewComponentResult> or a synchronous Invoke method that returns an IViewComponentResult.
  • 通常、モデルを初期化し、ViewComponent View メソッドを呼び出してビューに渡します。Typically initializes a model and passes it to a view by calling the ViewComponent View method.
  • パラメーターは HTTP ではなく、呼び出し元のメソッドから取得されます。Parameters come from the calling method, not HTTP. モデル バインドはありません。There's no model binding.
  • HTTP エンドポイントとして直接到達することはできません。Are not reachable directly as an HTTP endpoint. (通常はビュー内で) コードから呼び出されます。They're invoked from your code (usually in a view). ビュー コンポーネントでは要求が処理されません。A view component never handles a request.
  • 現在の HTTP 要求からの詳細ではなく、シグネチャでオーバーロードされます。Are overloaded on the signature rather than any details from the current HTTP request.

ビューの検索パスView search path

ランタイムでは、次のパスでビューを検索します。The runtime searches for the view in the following paths:

  • /Views/{コントローラー名}/Components/{ビュー コンポーネント名}/{ビュー名}/Views/{Controller Name}/Components/{View Component Name}/{View Name}
  • /Views/Shared/Components/{ビュー コンポーネント名}/{ビュー名}/Views/Shared/Components/{View Component Name}/{View Name}
  • /Pages/Shared/Components/{ビュー コンポーネント名}/{ビュー名}/Pages/Shared/Components/{View Component Name}/{View Name}

検索パスは、コントローラー + ビューおよび Razor Pages を使うプロジェクトに適用されます。The search path applies to projects using controllers + views and Razor Pages.

ビュー コンポーネントの既定のビュー名は、Default です。つまり、通常、ビュー ファイルは Default.cshtml という名前になるということです。The default view name for a view component is Default, which means your view file will typically be named Default.cshtml. ビュー コンポーネントの結果を作成したり、View メソッドを呼び出したりするときに、別のビュー名を指定することができます。You can specify a different view name when creating the view component result or when calling the View method.

ビュー ファイルに Default.cshtml という名前を付けて、"Views/Shared/Components/{ビュー コンポーネント名}/{ビュー名} " というパスを使用することをお勧めします。We recommend you name the view file Default.cshtml and use the Views/Shared/Components/{View Component Name}/{View Name} path. このサンプルで使用される PriorityList ビュー コンポーネントは、ビュー コンポーネント ビューに Views/Shared/Components/PriorityList/Default.cshtml を使用します。The PriorityList view component used in this sample uses Views/Shared/Components/PriorityList/Default.cshtml for the view component view.

ビュー コンポーネントを呼び出すInvoking a view component

ビュー コンポーネントを使用するには、ビュー内で以下を呼び出します。To use the view component, call the following inside a view:

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

パラメーターは、InvokeAsync メソッドに渡されます。The parameters will be passed to the InvokeAsync method. この記事で開発した PriorityList ビュー コンポーネントは、Views/ToDo/Index.cshtml ビュー ファイルから呼び出されます。The PriorityList view component developed in the article is invoked from the Views/ToDo/Index.cshtml view file. 以下では、InvokeAsync メソッドは、2 つのパラメーターで呼び出されます。In the following, the InvokeAsync method is called with two parameters:

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

タグ ヘルパーとしてビュー コンポーネントを呼び出すInvoking a view component as a Tag Helper

ASP.NET Core 1.1 以降の場合は、タグ ヘルパーとしてビュー コンポーネントを呼び出すことができます。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>

タグ ヘルパーのパスカル ケースのクラスとメソッドのパラメーターは、それぞれケバブ ケースに変換されます。Pascal-cased class and method parameters for Tag Helpers are translated into their kebab case. ビュー コンポーネントを呼び出すタグ ヘルパーでは、<vc></vc> 要素を使用します。The Tag Helper to invoke a view component uses the <vc></vc> element. ビュー コンポーネントは、次のように指定されます。The view component is specified as follows:

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

ビュー コンポーネントをタグ ヘルパーとして使用するには、@addTagHelper ディレクティブを使用して、ビュー コンポーネントを含むアセンブリを登録します。To use a view component as a Tag Helper, register the assembly containing the view component using the @addTagHelper directive. ビュー コンポーネントが MyWebApp と呼ばれるアセンブリにある場合は、次のディレクティブを _ViewImports.cshtml ファイルに追加します。If your view component is in an assembly called MyWebApp, add the following directive to the _ViewImports.cshtml file:

@addTagHelper *, MyWebApp

ビュー コンポーネントを参照する任意のファイルへのタグ ヘルパーとして、ビュー コンポーネントを登録できます。You can register a view component as a Tag Helper to any file that references the view component. タグ ヘルパーを登録する方法の詳細については、「Managing Tag Helper Scope」 (タグ ヘルパーのスコープの管理) を参照してください。See Managing Tag Helper Scope for more information on how to register Tag Helpers.

このチュートリアルで使用される InvokeAsync メソッドは、次のとおりです。The InvokeAsync method used in this tutorial:

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

タグ ヘルパーのマークアップでは、次のようになります。In Tag Helper markup:

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

上記のサンプルでは、PriorityList ビュー コンポーネントは priority-list になります。In the sample above, the PriorityList view component becomes priority-list. ビュー コンポーネントに対するパラメーターは、ケバブ ケースの属性として渡されます。The parameters to the view component are passed as attributes in kebab case.

ビュー コンポーネントをコントローラーから直接呼び出すInvoking a view component directly from a controller

通常、ビュー コンポーネントはビューから呼び出されますが、コントローラー メソッドから直接呼び出すことができます。View components are typically invoked from a view, but you can invoke them directly from a controller method. ビュー コンポーネントでコントローラーなどのエンドポイントを定義しないときに、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 this example, the view component is called directly from the controller:

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

チュートリアル: 単純なビュー コンポーネントの作成Walkthrough: Creating a simple view component

スタート コードをダウンロード、ビルド、およびテストします。Download, build and test the starter code. これは、 [ToDo] 項目のリストを表示する ToDo コントローラーを備えた、単純なプロジェクトです。It's a simple project with a ToDo controller that displays a list of ToDo items.

[ToDo] のリスト

ViewComponent クラスの追加Add a ViewComponent class

ViewComponents フォルダーを作成して、次の PriorityListViewComponent クラスを追加します。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();
        }
    }
}

コードに関する注意事項Notes on the code:

  • ビュー コンポーネント クラスは、プロジェクト内の任意のフォルダーに含めることができます。View component classes can be contained in any folder in the project.

  • クラス名 PriorityListViewComponent は、サフィックス ViewComponent で終わるため、ビューからクラス コンポーネントを参照するときに、ランタイムでは文字列 "PriorityList" を使用します。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. これについては、後で詳しく説明します。I'll explain that in more detail later.

  • [ViewComponent] 属性では、ビュー コンポーネントを参照するために使用する名前を変更できます。The [ViewComponent] attribute can change the name used to reference a view component. たとえば、クラスに XYZ という名前を付けて、ViewComponent 属性を適用することができます。For example, we could've named the class XYZ and applied the ViewComponent attribute:

    [ViewComponent(Name = "PriorityList")]
       public class XYZ : ViewComponent
    
  • 上述の [ViewComponent] 属性は、ビュー コンポーネント セレクターに、コンポーネントに関連付けられたビューを探す場合は PriorityList という名前を使用し、ビューからクラス コンポーネントを参照する場合は文字列 "PriorityList" を使用するように指示します。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. これについては、後で詳しく説明します。I'll explain that in more detail later.

  • コンポーネントでは、依存性の注入を使用して、データ コンテキストを利用できるようにします。The component uses dependency injection to make the data context available.

  • InvokeAsync ではビューから呼び出すことができるメソッドを表示し、任意の数の引数を取得できます。InvokeAsync exposes a method which can be called from a view, and it can take an arbitrary number of arguments.

  • InvokeAsync メソッドでは、isDonemaxPriority パラメーターを満たす ToDo 項目のセットを返します。The InvokeAsync method returns the set of ToDo items that satisfy the isDone and maxPriority parameters.

ビュー コンポーネントの Razor ビューの作成Create the view component Razor view

  • Views/Shared/Components フォルダーを作成します。Create the Views/Shared/Components folder. このフォルダーは、Components という名前にする必要がありますThis folder must be named Components.

  • Views/Shared/Components/PriorityList フォルダーを作成します。Create the Views/Shared/Components/PriorityList folder. このフォルダー名は、ビュー コンポーネント クラスの名前、または (規則に従い、クラス名に ViewComponent サフィックスを使用した場合は) サフィックスを差し引いたクラスの名前に一致する必要があります。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). ViewComponent 属性を使用した場合は、クラス名は属性の指定に一致する必要があります。If you used the ViewComponent attribute, the class name would need to match the attribute designation.

  • Views/Shared/Components/PriorityList/Default.cshtml Razor ビューを作成します。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>
    

    Razor ビューでは、TodoItem のリストを取得して表示します。The Razor view takes a list of TodoItem and displays them. ビュー コンポーネントの InvokeAsync メソッドで (サンプルのように) ビューの名前を渡さない場合、Default が規則によってビュー名に使用されます。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. このチュートリアルの後半で、ビューの名前を渡す方法について示します。Later in the tutorial, I'll show you how to pass the name of the view. 特定のコントローラーの既定のスタイルをオーバーライドするには、コントローラーに固有のビュー フォルダー (例: 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).

    ビュー コンポーネントがコントローラーに固有の場合、それをコントローラーに固有のフォルダー (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).

  • 優先順位リストのコンポーネントの呼び出しを含む divViews/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>
    

@await Component.InvokeAsync マークアップは、ビュー コンポーネントを呼び出すための構文を示します。The markup @await Component.InvokeAsync shows the syntax for calling view components. 最初の引数は、呼び出す必要があるコンポーネントの名前です。The first argument is the name of the component we want to invoke or call. 後続のパラメーターは、そのコンポーネントに渡されます。Subsequent parameters are passed to the component. InvokeAsync では、任意の数の引数を取得できます。InvokeAsync can take an arbitrary number of arguments.

アプリをテストします。Test the app. 次の画像は、[ToDo] リストと優先順位の項目を示します。The following image shows the ToDo list and the priority items:

[ToDo] リストと優先順位の項目

また、コントローラーから直接ビュー コンポーネントを呼び出すこともできます。You can also call the view component directly from the controller:

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

IndexVC アクションからの優先順位の項目

ビュー名を指定するSpecifying a view name

複雑なビュー コンポーネントでは、いくつかの条件下で、既定以外のビューを指定する必要がある場合があります。A complex view component might need to specify a non-default view under some conditions. 次のコードでは、InvokeAsync メソッドから "PVC" ビューを指定する方法を示しています。The following code shows how to specify the "PVC" view from the InvokeAsync method. PriorityListViewComponent クラスで InvokeAsync メソッドを更新します。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);
}

Views/Shared/Components/PriorityList/Default.cshtml ファイルを 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. 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>

Views/ToDo/Index.cshtml を更新します。Update Views/ToDo/Index.cshtml:

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

アプリを実行して、PVC ビューを確認します。Run the app and verify PVC view.

優先順位のビュー コンポーネント

PVC ビューがレンダリングされない場合は、4 以上の優先順位でビュー コンポーネントを呼び出していることを確認します。If the PVC view isn't rendered, verify you are calling the view component with a priority of 4 or higher.

ビューのパスを調べるExamine the view path

  • 優先順位ビューが返されないように、優先順位パラメーターを 3 以下に変更します。Change the priority parameter to three or less so the priority view isn't returned.

  • 一時的に Views/ToDo/Components/PriorityList/Default.cshtml の名前を 1Default.cshtml に変更します。Temporarily rename the Views/ToDo/Components/PriorityList/Default.cshtml to 1Default.cshtml.

  • アプリをテストすると、次のエラーが表示されます。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
    
  • Views/ToDo/Components/PriorityList/1Default.cshtmlViews/Shared/Components/PriorityList/Default.cshtml にコピーします。Copy Views/ToDo/Components/PriorityList/1Default.cshtml to Views/Shared/Components/PriorityList/Default.cshtml.

  • [Shared] の [ToDo] ビュー コンポーネントのビューにマークアップを追加して、そのビューが [Shared] フォルダーからのものであることを示します。Add some markup to the Shared ToDo view component view to indicate the view is from the Shared folder.

  • [Shared] コンポーネント ビューをテストします。Test the Shared component view.

[Shared] コンポーネント ビューを含む [ToDo] 出力

ハードコーディングされた文字列の回避Avoiding hard-coded strings

コンパイル時間の安全性を確保する必要がある場合は、ハードコーディングされたビュー コンポーネント名をクラス名に置き換えることができます。If you want compile time safety, you can replace the hard-coded view component name with the class name. "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();
        }
    }
}

using ステートメントを Razor ビュー ファイルに追加して、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>

同期作業を実行するPerform synchronous work

非同期作業を実行する必要がない場合は、フレームワークで同期 Invoke メソッドの呼び出しが処理されます。The framework handles invoking a synchronous Invoke method if you don't need to perform asynchronous work. 次のメソッドでは同期 Invoke ビュー コンポーネントを作成します。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);
    }
}

ビュー コンポーネントの Razor ファイルに、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>

次のいずれかの方法を使用して、Razor ファイルでビュー コンポーネントが呼び出されます (たとえば、Views/Home/Index.cshtml)。The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) using one of the following approaches:

IViewComponentHelper の方法を使用するには、Component.InvokeAsync を呼び出します。To use the IViewComponentHelper approach, call Component.InvokeAsync:

IViewComponentHelper を使用して、Razor ファイルでビュー コンポーネントが呼び出されます (たとえば、Views/Home/Index.cshtml)。The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) with IViewComponentHelper.

Component.InvokeAsync を呼び出します。Call Component.InvokeAsync:

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

タグ ヘルパーを使用するには、@addTagHelper ディレクティブを使用して、ビュー コンポーネントを含むアセンブリを登録します (ビュー コンポーネントは、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

Razor マークアップ ファイルでビュー コンポーネントのタグ ヘルパーを使用します。Use the view component Tag Helper in the Razor markup file:

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

PriorityList.Invoke のメソッド署名は同期的ですが、Razor ではマークアップ ファイルで Component.InvokeAsync を使用してメソッドを見つけて呼び出します。The method signature of PriorityList.Invoke is synchronous, but Razor finds and calls the method with Component.InvokeAsync in the markup file.

その他の技術情報Additional resources