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

Note

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

Razor コンポーネントは、ASP.NET Core Blazorで使用される処理ロジックを持つユーザー インターフェイス (UI) の自己完結型部分であり、HTTP 要求のコンテキストの外部でレンダリングできます。 Razor コンポーネントは HTML として直接文字列にレンダリングしたり、または ASP.NET Core ホスティング環境とは無関係にストリームしたりできます。 これは、HTML フラグメントを生成したいシナリオに便利です。たとえば、メール コンテンツの生成、静的サイト コンテンツの生成、コンテンツのテンプレート エンジンの構築などです。

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

コマンド シェルで、新しいコンソール アプリ プロジェクトを作成し、ディレクトリを ConsoleApp1 フォルダーに変更します。

dotnet new console -o ConsoleApp1
cd ConsoleApp1

Microsoft.AspNetCore.Components.Webのパッケージ参照を追加します。

dotnet add package Microsoft.AspNetCore.Components.Web

Microsoft.Extensions.Loggingのパッケージ参照を追加します。

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 ファイル内のコードを次のコードに置き換えます。

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 に渡します。

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

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

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

  • Last updated on