次の方法で共有


ASP.NET Core Razor コンポーネントを ASP.NET Core アプリに統合する

この記事では、ASP.NET Core アプリの Razor コンポーネント統合シナリオについて説明します。

Razor コンポーネント統合

Razor コンポーネントは、Razor Pages、MVC、その他の種類の ASP.NET Core アプリに統合できます。 Razor コンポーネントは、カスタム HTML 要素として、ASP.NET Core に基づいていないアプリを含め、任意の Web アプリに統合することもできます。

アプリの要件に応じて、次のセクションのガイダンスを使用します。

ページまたはビューでルーティングできないコンポーネントを使用する

コンポーネント タグ ヘルパーで既存の Razor Pages または MVC アプリのページとビューに Razor コンポーネントを統合するには、次のガイダンスを使用してください。

Note

アプリで直接ルーティング可能なコンポーネント (ページやビューに埋め込まれていない) が必要な場合は、このセクションをスキップし、「ASP.NET Core アプリへの Blazor サポートの追加」セクションのガイダンスを使用します。

サーバーのプリレンダリングが使用され、ページまたはビューがレンダリングされるときは:

  • ページまたはビューと共にコンポーネントがプリレンダリングされます。
  • プリレンダリングに使用された初期のコンポーネント状態は失われます。
  • SignalR 接続が確立されると、新しいコンポーネント状態が作成されます。

非対話型の静的コンポーネント レンダリングを含むレンダリング モードの詳細については、「ASP.NET Core のコンポーネント タグ ヘルパー」を参照してください。 プリレンダリングされた Razor コンポーネントの状態を保存するには、「ASP.NET Core でのコンポーネントの状態保持タグ ヘルパー」を参照してください。

プロジェクトのルート フォルダーに Components フォルダーを追加します。

次の内容でインポート ファイルを Components フォルダーに追加します。 {APP NAMESPACE} プレースホルダーをプロジェクトの名前空間に変更します。

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

プロジェクトのレイアウト ファイル (Razor Pages アプリの Pages/Shared/_Layout.cshtml、または MVC アプリの Views/Shared/_Layout.cshtml):

  • 次の <base> タグと HeadOutlet コンポーネントのコンポーネント タグ ヘルパーを、<head> マークアップに追加します。

    <base href="~/" />
    <component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
        render-mode="ServerPrerendered" />
    

    前の例の href 値 (アプリ ベースのパス) は、アプリがルート URL パス (/) に置かれていることを前提としています。 アプリがサブアプリケーションになっている場合は、「ASP.NET Core Blazor のホストと展開」記事の「アプリのベース パス」セクションのガイダンスに従ってください。

    HeadOutlet コンポーネントは、Razor コンポーネントによって設定されたページタイトル (PageTitle コンポーネント) とその他の head 要素 (HeadContent コンポーネント) の head (<head>) コンテンツをレンダリングするために使用されます。 詳しくは、「ASP.NET Core Blazor アプリで コンテンツを制御する」をご覧ください。

  • blazor.web.js スクリプトの <script> タグを、Scripts レンダリング セクション (@await RenderSectionAsync(...)) の直前に追加します。

    <script src="_framework/blazor.web.js"></script>
    

    Blazor フレームワークは、blazor.web.js スクリプトをアプリに自動的に追加します。

Note

通常、レイアウトは _ViewStart.cshtml ファイルを介して読み込まれます。

操作なし (no-op) App コンポーネントをプロジェクトに追加します。

Components/App.razor:

@* No-op App component *@

サービスが登録されるときに、Razor コンポーネントのサービスと対話型サーバー コンポーネントのレンダリングをサポートするサービスを追加します。

Program ファイルの先頭で、プロジェクトのコンポーネント用のファイルの先頭に using ステートメントを追加します。

using {APP NAMESPACE}.Components;

上記の行では、{APP NAMESPACE} プレースホルダーをアプリの名前空間に変更します。 次に例を示します。

using BlazorSample.Components;

Program ファイルのアプリをビルドする行 (builder.Build()) の前で:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

対話型サーバーおよび WebAssembly コンポーネントのサポートの追加に関する詳細については、「ASP.NET Core Blazor のレンダー モード」を参照してください。

Program ファイルにおいて、Razor Pages アプリで Razor Pages をマップする呼び出し (MapRazorPages)、または MVC アプリで既定のコントローラー ルートをマップする呼び出し (MapControllerRoute) の直後に、MapRazorComponents を呼び出して使用可能なコンポーネントを検出し、アプリのルート コンポーネント (最初に読み込まれるコンポーネント) を指定します。 既定では、アプリのルート コンポーネントは App コンポーネント (App.razor) です。 AddInteractiveServerRenderMode の呼び出しをチェーン化して、アプリの対話型サーバー側レンダリング (対話型 SSR) を構成します。

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Note

アプリが Antiforgery ミドルウェアを含むようにまだ更新されていない場合は、UseAuthorization が呼び出された後に次の行を追加します。

app.UseAntiforgery();

コンポーネントを任意のページまたはビューに統合します。 たとえば、プロジェクトの Components フォルダーに EmbeddedCounter コンポーネントを追加します。

Components/EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Razor Pages:

Razor Pages アプリのプロジェクトの Index ページで、EmbeddedCounter コンポーネントの名前空間を追加し、そのコンポーネントをページに埋め込みます。 Index ページが読み込まれるとき、EmbeddedCounter コンポーネントはページにプリレンダリングされます。 次の例では、{APP NAMESPACE} プレースホルダーをプロジェクトの名前空間に置き換えます。

Pages/Index.cshtml:

@page
@using {APP NAMESPACE}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

MVC:

MVC アプリのプロジェクトの Index ビューで、EmbeddedCounter コンポーネントの名前空間を追加し、そのコンポーネントをビューに埋め込みます。 Index ビューが読み込まれるとき、EmbeddedCounter コンポーネントはページにプリレンダリングされます。 次の例では、{APP NAMESPACE} プレースホルダーをプロジェクトの名前空間に置き換えます。

Views/Home/Index.cshtml:

@using {APP NAMESPACE}.Components
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

ASP.NET Core アプリに Blazor のサポートを追加する

このセクションでは、ASP.NET Core アプリへの Blazor のサポートの追加について説明します。

Note

このセクションの例では、アプリの名前と名前空間は BlazorSample です。

静的サーバー側レンダリング (静的 SSR) の追加

アプリに Components フォルダーを追加します。

_Imports コンポーネントで使用される名前空間用に次の Razor ファイルを追加してください。

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

名前空間プレースホルダー ({APP NAMESPACE}) をアプリの名前空間に変更します。 次に例を示します。

@using BlazorSample
@using BlazorSample.Components

アプリの Components フォルダーに配置されている Routes コンポーネント内のアプリに Blazor ルーター (<Router>Router) を追加します。

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

アプリに App コンポーネントを追加します。このコンポーネントはルート コンポーネントとして機能し、アプリが最初に読み込むコンポーネントとなります。

Components/App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["{ASSEMBLY NAME}.styles.css"]" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="{ASSEMBLY NAME}.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

{ASSEMBLY NAME} プレースホルダーは、アプリのアセンブリ名です。 たとえば、ContosoApp というアセンブリ名を持つプロジェクトでは、ContosoApp.styles.css というスタイルシート ファイル名を使用します。

ルーティング可能な Razor コンポーネントを保持する Pages フォルダーを Components フォルダーに追加してください。

次の Welcome コンポーネントを追加して、静的 SSR を示してください。

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

ASP.NET Core プロジェクトの Program ファイルで、次の手順を実行してください。

  • プロジェクトのコンポーネントのファイルの先頭に using ステートメントを追加してください。

    using {APP NAMESPACE}.Components;
    

    上記の行では、{APP NAMESPACE} プレースホルダーをアプリの名前空間に変更します。 次に例を示します。

    using BlazorSample.Components;
    
  • Razor コンポーネント サービスを追加します (AddRazorComponents)。これは、偽造防止サービスも自動的に追加します (AddAntiforgery)。 builder.Build() を呼び出す行の前に次の行を追加してください。

    builder.Services.AddRazorComponents();
    
  • UseAntiforgery を使用して、要求処理パイプラインに偽造防止ミドルウェアを追加します。 UseRouting の呼び出しの後に UseAntiforgery が呼び出されます。 UseRoutingUseEndpoints の呼び出しがある場合、UseAntiforgery の呼び出しはそれらの間に置く必要があります。 UseAntiforgery の呼び出しは、UseAuthenticationUseAuthorization の呼び出しの後に置く必要があります。

    app.UseAntiforgery();
    
  • 既定のルート コンポーネント (最初に読み込まれるコンポーネント) として指定されている App コンポーネント (App.razor) を使って、アプリの要求処理パイプラインに MapRazorComponents を追加してください。 app.Run を呼び出す行の前に次のコードを配置してください。

    app.MapRazorComponents<App>();
    

アプリを実行すると、Welcome コンポーネントは /welcome エンドポイントでアクセスされます。

対話型サーバー側レンダリング (対話型 SSR) を有効にする

静的サーバー側レンダリング (静的 SSR) の追加」セクションのガイダンスに従います。

アプリの Programファイルで、Razor コンポーネント サービスが AddRazorComponents で追加される位置に AddInteractiveServerComponents の呼び出しを追加します。

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Razor コンポーネントが MapRazorComponents でマップされている AddInteractiveServerRenderMode への呼び出しを追加してください。

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

対話型サーバー側レンダリング (対話型 SSR) を採用するアプリに次の Counter コンポーネントを追加します。

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

アプリを実行すると、Counter コンポーネントは /counter でアクセスされます。

対話型自動 (Auto) またはクライアント側レンダリング (CSR) を有効にする

静的サーバー側レンダリング (静的 SSR) の追加」セクションのガイダンスに従います。

対話型自動レンダリング モードを使用するコンポーネントは、最初は対話型 SSR を使用します。 .NET ランタイムとアプリ バンドルがバックグラウンドでクライアントにダウンロードされ、キャッシュされるため、以降のアクセスで使用できます。 対話型 WebAssembly レンダリング モードを使用するコンポーネントは、Blazor バンドルがダウンロードされて Blazor ランタイムがアクティブ化された後にのみ、クライアント上で対話形式でレンダリングされます。 対話型自動または対話型 WebAssembly レンダリング モードを使用する場合、クライアントにダウンロードされるコンポーネント コードは非公開ではないことに注意してください。 詳細については、「ASP.NET Core Blazor レンダリング モード」を参照してください。

採用するレンダリング モードを決定した後の手順:

Microsoft.AspNetCore.Components.WebAssembly.Server NuGet パッケージのパッケージ参照をアプリに追加してください。

Note

.NET アプリへのパッケージの追加に関するガイダンスについては、「パッケージ利用のワークフロー」 (NuGet ドキュメント) の "パッケージのインストールと管理" に関する記事を参照してください。 NuGet.org で正しいパッケージ バージョンを確認します。

ドナー Blazor Web App を作成して、アプリに資産を提供します。 「ASP.NET Core Blazor 用のツール」の記事のガイダンスに従い、Blazor Web App の生成時に次のテンプレート機能のサポートを選択してください。

アプリの名前は、ASP.NET Core アプリと同じ名前を使用してください。これにより、コンポーネント内のアプリ名マークアップが一致し、コード内の名前空間が一致します。 資産をドナー アプリから ASP.NET Core アプリに移動した後に名前空間を調整できるため、同じ名前または名前空間の使用は厳密には必須ではありません。 ただし、最初に名前空間を照合すると時間を節約できます。

Visual Studio:

  • 対話型レンダリング モードでは、[自動] (サーバーと WebAssembly) を選択します。
  • [対話機能の場所][ページ/コンポーネントごと] に設定してください。
  • [サンプル ページを含める] のチェックボックスの選択を解除してください。

.NET CLI:

  • -int Auto オプションを使用します。
  • -ai|--all-interactive オプションは使用しないでください。
  • -e|--empty オプションを渡してください。

ドナー Blazor Web App から、.Client プロジェクト全体を ASP.NET Core アプリのソリューション フォルダーにコピーしてください。

重要

ASP.NET Core プロジェクトの .Client フォルダーにフォルダーをコピーしないでください。 .NET ソリューションを整理するための最善の方法は、ソリューションの各プロジェクトを最上位のソリューション フォルダー内の独自のフォルダーに配置することです。 ASP.NET Core プロジェクトのフォルダーの上にソリューション フォルダーが存在しない場合は、作成してください。 次に、.Client プロジェクトのフォルダーをドナー Blazor Web App からソリューション フォルダーにコピーしてください。 最終的なプロジェクト フォルダー構造は、次のレイアウトになります。

  • BlazorSampleSolution (最上位レベルのソリューション フォルダー)
    • BlazorSample (元の ASP.NET Core プロジェクト)
    • BlazorSample.Client (ドナー Blazor Web App からの .Client プロジェクト フォルダー)

ASP.NET Core ソリューション ファイルの場合は、ASP.NET Core プロジェクトのフォルダーに残すことができます。 または、プロジェクトがソリューション フォルダー内の 2 つのプロジェクトのプロジェクト ファイル (.csproj) を正しく参照している限り、ソリューション ファイルを移動したり、最上位のソリューション フォルダーに新しいファイルを作成したりできます。

ASP.NET Core アプリと同じドナー プロジェクトを作成したときに、ドナー Blazor Web App に名前を付けた場合、寄付された資産によって使用される名前空間は、ASP.NET Core アプリのそれと一致します。 名前空間を一致させるためのその他の手順は必要ありません。 ドナー Blazor Web App プロジェクトの作成時に別の名前空間を使用した場合は、このガイダンスの rest を記されているとおりに使用する場合、寄付された資産全体の名前空間を調整する必要があります。 名前空間が一致しない場合は、先に進む前に名前空間を調整するか、"または"、このセクションの残りのガイダンスに従って名前空間を調整してください。

ドナー Blazor Web App は、このプロセスではこれ以上使用されないため、削除してください。

ソリューションに .Client プロジェクトを追加します。

  • Visual Studio: ソリューション エクスプローラーでソリューションを右クリックし、[追加]>[既存のプロジェクト]の順に選択してください。 .Client フォルダーに移動し、プロジェクト ファイル (.csproj) を選択してください。

  • .NET CLI: dotnet sln add コマンドを使用して、.Client プロジェクトをソリューションに追加してください。

ASP.NET Core プロジェクトからクライアント プロジェクトにプロジェクト参照を追加します。

  • Visual Studio: ASP.NET Core プロジェクトを右クリックし、[追加]>[プロジェクト参照] の順に選択してください。 .Client プロジェクトを選択し、[OK] を選択してください。

  • .NET CLI: ASP.NET Core プロジェクトのフォルダーから、次のコマンドを使用してください。

    dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj
    

    上記のコマンドは、次を前提としています。

    • プロジェクト ファイル名は BlazorSample.Client.csproj
    • .Client プロジェクトは、ソリューション フォルダー内の BlazorSample.Client フォルダーにある。 .Client フォルダーは、ASP.NET Core プロジェクトのフォルダーと並んで表示される。

    dotnet add reference コマンドの詳細については、dotnet add reference (.NET のドキュメント) を参照してください。

ASP.NET Core アプリの Program ファイルに次の変更を加えてください。

  • AddInteractiveWebAssemblyComponents で対話型の WebAssembly コンポーネント サービスを追加してください。Razor コンポーネント サービスは AddRazorComponents で追加されます。

    対話型の自動レンダリングの場合:

    builder.Services.AddRazorComponents()
        .AddInteractiveServerComponents()
        .AddInteractiveWebAssemblyComponents();
    

    対話型の WebAssembly レンダリングの場合のみ:

    builder.Services.AddRazorComponents()
        .AddInteractiveWebAssemblyComponents();
    
  • 対話型の WebAssembly レンダリング モード (AddInteractiveWebAssemblyRenderMode) と、MapRazorComponents で Razor コンポーネントがマップされる .Client プロジェクトの追加アセンブリを追加してください。

    対話型自動 (Auto) レンダリングの場合:

    app.MapRazorComponents<App>()
        .AddInteractiveServerRenderMode()
        .AddInteractiveWebAssemblyRenderMode()
        .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);
    

    対話型の WebAssembly レンダリングの場合のみ:

    app.MapRazorComponents<App>()
        .AddInteractiveWebAssemblyRenderMode()
        .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);
    

    前の例では、.Client プロジェクトの名前空間に合わせて BlazorSample.Client 変更してください。

Pages フォルダーを .Client プロジェクトに追加してください。

ASP.NET Core プロジェクトに既存の Counter コンポーネントがある場合:

  • .Client プロジェクトの Pages フォルダーにコンポーネントを移動してください。
  • コンポーネント ファイルの先頭にある @rendermode ディレクティブを削除してください。

ASP.NET Core アプリに Counter コンポーネントがない場合は、次の Counter コンポーネント (Pages/Counter.razor) を .Client プロジェクトに追加してください。

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

アプリで対話型の WebAssembly レンダリングのみが採用されている場合は、@rendermode ディレクティブと値を削除してください。

- @rendermode InteractiveAuto

"ASP.NET Core アプリ" プロジェクトからソリューションを実行してください。

  • Visual Studio: アプリの実行時にソリューション エクスプローラーで ASP.NET Core プロジェクトが選択されていることを確認してください。

  • .NET CLI: ASP.NET Core プロジェクトのフォルダーからプロジェクトを実行してください。

Counter コンポーネントを読み込むには、/counterに移動してください。

Blazor のレイアウトとスタイルを実装する

必要に応じて、RouteView コンポーネントの RouteView.DefaultLayout パラメーターを使用して、既定のレイアウト コンポーネントを割り当てます。

Routes.razor では、次の例では既定のレイアウトとして MainLayout コンポーネントを使用します。

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

詳しくは、「ASP.NET Core の Blazor レイアウト」を参照してください。

Blazor プロジェクト テンプレートのレイアウトとスタイルシートは、dotnet/aspnetcore GitHub リポジトリから入手できます

  • MainLayout.razor
  • MainLayout.razor.css
  • NavMenu.razor
  • NavMenu.razor.css

Note

通常、.NET 参照ソースへのドキュメント リンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。 特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウン リストを使います。 詳細については、「ASP.NET Core ソース コードのバージョン タグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。

アプリでレイアウト ファイルを整理する方法によっては、アプリのコンポーネントで使用するために、レイアウト ファイルのフォルダーに @using ステートメントをアプリの _Imports.razor ファイルに追加することが必要になる場合があります。

CSS 分離を使用する場合、スタイルシートを明示的に参照する必要はありません。 Blazor フレームワークは、個々のコンポーネント スタイルシートを自動的にバンドルします。 アプリのバンドルされたスタイルシートは、アプリの App コンポーネントで既に参照されています ({ASSEMBLY NAME}.styles.css の、{ASSEMBLY NAME} プレースホルダーはアプリのアセンブリ名です)。

MVC コントローラー アクションから RazorComponentResult を返す

MVC コントローラー アクションは、RazorComponentResult<TComponent> でコンポーネントを返すことができます。

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

コントローラーで:

public IResult GetWelcomeComponent() => 
    new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });

レンダリングされたコンポーネントの HTML マークアップのみが返されます。 レイアウトと HTML ページ マークアップは、コンポーネントと共に自動的にレンダリングされることはありません。 完全な HTML ページを生成するために、<html><head><body> およびその他のタグの HTML マークアップを提供する Blazor レイアウトをアプリで維持できます。 コンポーネントには、コンポーネント定義ファイル (このセクションの例では Welcome.razor) の先頭に @layoutRazor ディレクティブを使用したレイアウトが含まれています。 次の例は、アプリで RazorComponentResultLayout という名前のレイアウトが使われていることを前提としています (Components/Layout/RazorComponentResultLayout.razor):

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Layout フォルダーについての @using ステートメントを個々のコンポーネントに配置することを避けるには、アプリの _Imports.razor ファイルに移動します。

詳しくは、「ASP.NET Core の Blazor レイアウト」を参照してください。

コンポーネントの名前空間

カスタム フォルダーを使用してプロジェクトの Razor コンポーネントを保持する場合は、フォルダーを表す名前空間を、ページまたはビューのいずれかに追加するか、_ViewImports.cshtml ファイルに追加します。 次に例を示します。

  • コンポーネントはプロジェクトの Components フォルダーに格納されます。
  • {APP NAMESPACE} プレースホルダーはロジェクトの名前空間です。 Components はフォルダーの名前を表します。
@using {APP NAMESPACE}.Components

次に例を示します。

@using BlazorSample.Components

_ViewImports.cshtml ファイルは、Razor Pages アプリの Pages フォルダーまたは MVC アプリの Views フォルダーにあります。

詳細については、「ASP.NET Core Razor コンポーネント」を参照してください。

その他のリソース

ASP.NET Core Razor コンポーネントのプリレンダリング