次の方法で共有

ASP.NET Core の外部で Razor コンポーネントをレンダリングする

Note

これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

Razor コンポーネントは、HTTP 要求のコンテキストの外部でレンダリングできます。 Razor コンポーネントは HTML として直接文字列にレンダリングしたり、または ASP.NET Core ホスティング環境とは無関係にストリームしたりできます。 これは、HTML フラグメントを生成したいシナリオに便利です。たとえば、メール コンテンツの生成、静的サイト コンテンツの生成、コンテンツのテンプレート エンジンの構築などです。

次の例では、Razor コンポーネントがコンソール アプリから HTML 文字列にレンダリングされます。

コマンド シェルで、新しいコンソール アプリ プロジェクトを作成します。

dotnet new console -o ConsoleApp1
cd ConsoleApp1

ConsoleApp1 フォルダー内のコマンド シェルで、Microsoft.AspNetCore.Components.Web と Microsoft.Extensions.Logging のパッケージ参照をコンソール アプリに追加します。

dotnet add package Microsoft.AspNetCore.Components.Web
dotnet add package Microsoft.Extensions.Logging

コンソール アプリのプロジェクト ファイル (ConsoleApp1.csproj) で、Razor SDK を使うようにコンソール アプリ プロジェクトを更新します。

- <Project Sdk="Microsoft.NET.Sdk">
+ <Project Sdk="Microsoft.NET.Sdk.Razor">

次の RenderMessage コンポーネントをプロジェクトに追加します。

RenderMessage.razor:

<h1>Render Message</h1>

<p>@Message</p>

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

Program ファイルを更新します。

RenderComponentAsync への呼び出しは、必ずコンポーネント ディスパッチャーで InvokeAsync を呼び出すコンテキストで行う必要があります。 コンポーネント ディスパッチャーは、HtmlRenderer.Dispatcher プロパティから使用できます。

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using ConsoleApp1;

IServiceCollection services = new ServiceCollection();
services.AddLogging();

IServiceProvider serviceProvider = services.BuildServiceProvider();
ILoggerFactory loggerFactory = serviceProvider.GetRequiredService<ILoggerFactory>();

await using var htmlRenderer = new HtmlRenderer(serviceProvider, loggerFactory);

var html = await htmlRenderer.Dispatcher.InvokeAsync(async () =>
{
    var dictionary = new Dictionary<string, object?>
    {
        { "Message", "Hello from the Render Message component!" }
    };

    var parameters = ParameterView.FromDictionary(dictionary);
    var output = await htmlRenderer.RenderComponentAsync<RenderMessage>(parameters);

    return output.ToHtmlString();
});

Console.WriteLine(html);

Note

パラメーターを渡さずにコンポーネントをレンダリングする場合は、ParameterView.Empty を RenderComponentAsync に渡します。

または、output.WriteHtmlTo(textWriter) を呼び出して TextWriter に HTML を書き込むこともできます。

RenderComponentAsync によって返されるタスクは、非同期ライフサイクル メソッドの完了を含め、コンポーネントが完全にレンダリングされると完了します。 レンダリングされた HTML をさらに早く確認したい場合は、代わりに BeginRenderingComponent を呼び出します。 その後、返された HtmlRootComponent インスタンスで HtmlRootComponent.QuiescenceTask を待機して、コンポーネントのレンダリングが完了するまで待ちます。