ASP.NET Core Blazor 依存関係の挿入

var builder = WebApplication.CreateBuilder(args);

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

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

新しいアプリを作成した後、Startup.cs で Startup.ConfigureServices メソッドを調べます。

using Microsoft.Extensions.DependencyInjection;

...

public void ConfigureServices(IServiceCollection services)
{
    ...
}

ConfigureServices メソッドには、サービス記述子オブジェクトのリストである IServiceCollection が渡されます。 サービスは、ConfigureServices メソッドでサービス コレクションにサービス記述子を提供することによって追加されます。 次の例では、IDataAccess インターフェイスとその具象実装 DataAccess での概念を示します。

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<IDataAccess, DataAccess>();
}

プリレンダリング中にクライアント側サービスが失敗する

このセクションは、Blazor Web App の WebAssembly コンポーネントにのみ適用されます。

通常、Blazor Web App はクライアント側の WebAssembly コンポーネントをプリレンダリングします。 .Client プロジェクトに登録されている必要なサービスのみでアプリが実行されている場合、コンポーネントがプリレンダリング中にその必要なサービスを使用しようとすると、アプリの実行で次のようなランタイム エラーが発生します。

InvalidOperationException: 型 '{ASSEMBLY}}.Client.Pages.{COMPONENT NAME}' の {PROPERTY} の値を指定できません。 型 '{SERVICE}' の登録済みサービスはありません。

この問題を解決するには、次の "いずれか" の方法を使用します。

• メイン プロジェクトにサービスを登録して、コンポーネントのプリレンダリング中に使用できるようにする。
• コンポーネントにプリレンダリングが必要ない場合は、ASP.NET Core Blazor レンダー モードのガイダンスに従ってプリレンダリングを無効にする。 このアプローチを採用する場合、サービスをメイン プロジェクトに登録する必要はありません。

詳細については、「プリレンダリング中にクライアント側サービスによる解決が失敗する」を参照してください。

コンポーネントにサービスを挿入するために、Blazor はコンストラクター挿入とプロパティ挿入をサポートしています。

コンストラクターの挿入

サービスがサービス コレクションに追加されたら、コンストラクター挿入を使って 1 つ以上のサービスをコンポーネントに挿入します。 次の例では、NavigationManager サービスを挿入します。

ConstructorInjection.razor:

@page "/constructor-injection"

<button @onclick="HandleClick">
    Take me to the Counter component
</button>

ConstructorInjection.razor.cs:

using Microsoft.AspNetCore.Components;

public partial class ConstructorInjection(NavigationManager navigation)
{
    private void HandleClick()
    {
        navigation.NavigateTo("/counter");
    }
}

プロパティの挿入

キー付きサービスをコンポーネントに挿入する

Blazor では、[Inject] 属性を使ったキー付きサービスの挿入がサポートされています。 キーを利用すると、依存関係の挿入を使うときに、サービスの登録と使用のスコープを設定できます。 InjectAttribute.Key プロパティを使用して、挿入するサービスのキーを指定します:

[Inject(Key = "my-service")]
public IMyService MyService { get; set; }

@page "/time-travel"
@inject ITimeTravel TimeTravel1
@inherits OwningComponentBase

<h1><code>OwningComponentBase</code> Example</h1>

<ul>
    <li>TimeTravel1.DT: @TimeTravel1?.DT</li>
    <li>TimeTravel2.DT: @TimeTravel2?.DT</li>
</ul>

@code {
    private ITimeTravel TimeTravel2 { get; set; } = default!;

    protected override void OnInitialized()
    {
        TimeTravel2 = ScopedServices.GetRequiredService<ITimeTravel>();
    }
}

@page "/time-travel"
@inject ITimeTravel TimeTravel1
@inherits OwningComponentBase

<h1><code>OwningComponentBase</code> Example</h1>

<ul>
    <li>TimeTravel1.DT: @TimeTravel1?.DT</li>
    <li>TimeTravel2.DT: @TimeTravel2?.DT</li>
</ul>

@code {
    private ITimeTravel TimeTravel2 { get; set; } = default!;

    protected override void OnInitialized()
    {
        TimeTravel2 = ScopedServices.GetRequiredService<ITimeTravel>();
    }
}

クライアント側の一時的な破棄を検出する

カスタム コードをクライアント側 Blazor アプリに追加して、アプリ内で OwningComponentBase を使用する必要がある、破棄可能で一時的なサービスを検出できます。 このアプローチは、将来的にアプリに追加されるコードが、ライブラリによって追加されたサービスを含む 1 つ以上の一時的で破棄可能なサービスを使用することが懸念される場合に役立ちます。 デモ コードはBlazor サンプル GitHub リポジトリ (ダウンロード方法) にあります。

.NET 6 以降のバージョンのBlazorSample_WebAssembly サンプルで、次の内容を調べます。

• DetectIncorrectUsagesOfTransientDisposables.cs
• Services/TransientDisposableService.cs
• In: Program.cs
  • アプリの Services 名前空間が、ファイルの先頭に用意されています (using BlazorSample.Services;)。
  • DetectIncorrectUsageOfTransients は、builder が WebAssemblyHostBuilder.CreateDefault から割り当てられた直後に呼び出されます。
  • TransientDisposableService が登録されます (builder.Services.AddTransient<TransientDisposableService>();)。
  • EnableTransientDisposableDetection が、アプリの処理パイプライン内のビルドされたホスト (host.EnableTransientDisposableDetection();) で呼び出されます。
• アプリによって、例外をスローせずに TransientDisposableService サービスが登録されます。 ただし、TransientService.razor でサービスを解決しようとすると、フレームワークが TransientDisposableService のインスタンスを構築しようとしたときに InvalidOperationException がスローされます。

サーバー側の一時的な破棄可能なアイテムを検出する

カスタム コードをサーバー側 Blazor アプリに追加して、アプリ内で OwningComponentBase を使用する必要がある、サーバー側の破棄可能で一時的なサービスを検出できます。 このアプローチは、将来的にアプリに追加されるコードが、ライブラリによって追加されたサービスを含む 1 つ以上の一時的で破棄可能なサービスを使用することが懸念される場合に役立ちます。 デモ コードはBlazor サンプル GitHub リポジトリ (ダウンロード方法) にあります。

.NET 8 以降のバージョンの BlazorSample_BlazorWebApp サンプルで、次の内容を調べます。

.NET 6 または .NET 7 のバージョンの BlazorSample_Server サンプルで、次の内容を調べます。

• DetectIncorrectUsagesOfTransientDisposables.cs
• Services/TransitiveTransientDisposableDependency.cs:
• In: Program.cs
  • アプリの Services 名前空間が、ファイルの先頭に用意されています (using BlazorSample.Services;)。
  • DetectIncorrectUsageOfTransients が、ホスト ビルダー (builder.DetectIncorrectUsageOfTransients();) で呼び出されます。
  • TransientDependency サービスが登録されます (builder.Services.AddTransient<TransientDependency>();)。
  • TransitiveTransientDisposableDependency が ITransitiveTransientDisposableDependency (builder.Services.AddTransient<ITransitiveTransientDisposableDependency, TransitiveTransientDisposableDependency>();) に登録されます。
• アプリによって、例外をスローせずに TransientDependency サービスが登録されます。 ただし、TransientService.razor でサービスを解決しようとすると、フレームワークが TransientDependency のインスタンスを構築しようとしたときに InvalidOperationException がスローされます。

IHttpClientFactory/HttpClient ハンドラーの一時的なサービス登録

IHttpClientFactory/HttpClient ハンドラーの一時サービス登録をお勧めします。 アプリが IHttpClientFactory/HttpClient ハンドラーを含んでおり、IRemoteAuthenticationBuilder<TRemoteAuthenticationState,TAccount> を使用して認証のサポートを追加する場合は、クライアント側認証用の次の一時的な破棄も検出されますが、これは想定されたもので、無視して構いません。

• BaseAddressAuthorizationMessageHandler
• AuthorizationMessageHandler

IHttpClientFactory/HttpClient の他のインスタンスも検出されます。 これらのインスタンスは無視することもできます。

Blazor サンプル GitHub リポジトリ (ダウンロード方法) の Blazor サンプル アプリは、一時的な破棄可能を検出するコードを示しています。 ただし、サンプル アプリには IHttpClientFactory/HttpClient ハンドラーが含まれているため、コードは非アクティブ化されています。

デモ コードをアクティブにしてその操作を確認するには、以下の手順を実行します。

• Program.cs 内の一時的な破棄可能の行のコメントを解除します。

• アプリのナビゲーション サイドバーに TransientService コンポーネントが表示されないようにする、NavLink.razor の条件チェックを削除します。

  - else if (name != "TransientService")
  + else
  

• サンプル アプリを実行し、/transient-service にある TransientService コンポーネントに移動します。

回線アクティビティ ハンドラーには、Blazor ではない依存関係の挿入 (DI) スコープ (IHttpClientFactory を使って作成されたスコープなど) からスコープ付き Blazor サービスにアクセスするためのアプローチが用意されています。

.NET 8 の ASP.NET Core がリリースされる前は、他の依存関係の挿入スコープから回線スコープ付きサービスにアクセスするには、カスタム ベース コンポーネントの種類を使う必要がありました。 回線アクティビティ ハンドラーを使う場合、次の例で示すようにカスタム ベース コンポーネントの種類は必要ありません。

public class CircuitServicesAccessor
{
    static readonly AsyncLocal<IServiceProvider> blazorServices = new();

    public IServiceProvider? Services
    {
        get => blazorServices.Value;
        set => blazorServices.Value = value;
    }
}

public class ServicesAccessorCircuitHandler(
    IServiceProvider services, CircuitServicesAccessor servicesAccessor) 
    : CircuitHandler
{
    public override Func<CircuitInboundActivityContext, Task> CreateInboundActivityHandler(
        Func<CircuitInboundActivityContext, Task> next) => 
            async context =>
            {
                servicesAccessor.Services = services;
                await next(context);
                servicesAccessor.Services = null;
            };
}

public static class CircuitServicesServiceCollectionExtensions
{
    public static IServiceCollection AddCircuitServicesAccessor(
        this IServiceCollection services)
    {
        services.AddScoped<CircuitServicesAccessor>();
        services.AddScoped<CircuitHandler, ServicesAccessorCircuitHandler>();

        return services;
    }
}

必要な場所に CircuitServicesAccessor を挿入して、回線スコープ付きサービスにアクセスします。

IHttpClientFactory を使って DelegatingHandler の設定から AuthenticationStateProvider にアクセスする方法を示す例については、「サーバーサイド ASP.NET Core Blazor のセキュリティに関するその他のシナリオ」を参照してください。

Razor コンポーネントが、別の DI スコープでコードを実行する非同期メソッドを呼び出す場合があります。 正しいアプローチを使用しないと、これらの DI スコープで Blazor のサービスにアクセスできません (IJSRuntime や Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage など)。

たとえば、IHttpClientFactory を使って作成された HttpClient インスタンスには、独自の DI サービス スコープがあります。 その結果、HttpClient で構成された HttpMessageHandler インスタンスは、Blazor サービスを直接挿入できません。

AsyncLocal を定義するクラス BlazorServiceAccessor を作成します。これは、現在の非同期コンテキストの BlazorIServiceProvider を格納します。 BlazorServiceAccessor インスタンスを別の DI サービス スコープ内から取得して、Blazor サービスにアクセスできます。

BlazorServiceAccessor.cs:

internal sealed class BlazorServiceAccessor
{
    private static readonly AsyncLocal<BlazorServiceHolder> s_currentServiceHolder = new();

    public IServiceProvider? Services
    {
        get => s_currentServiceHolder.Value?.Services;
        set
        {
            if (s_currentServiceHolder.Value is { } holder)
            {
                // Clear the current IServiceProvider trapped in the AsyncLocal.
                holder.Services = null;
            }

            if (value is not null)
            {
                // Use object indirection to hold the IServiceProvider in an AsyncLocal
                // so it can be cleared in all ExecutionContexts when it's cleared.
                s_currentServiceHolder.Value = new() { Services = value };
            }
        }
    }

    private sealed class BlazorServiceHolder
    {
        public IServiceProvider? Services { get; set; }
    }
}

async コンポーネント メソッドが呼び出されたときに BlazorServiceAccessor.Services の値を自動的に設定するには、Razor コンポーネント コードに 3 つの主要な非同期エントリ ポイントを再実装するカスタム基本コンポーネントを作成します。

• IComponent.SetParametersAsync
• IHandleEvent.HandleEventAsync
• IHandleAfterRender.OnAfterRenderAsync

次のクラスは、基本コンポーネントの実装を示しています。

CustomComponentBase.cs:

using Microsoft.AspNetCore.Components;

public class CustomComponentBase : ComponentBase, IHandleEvent, IHandleAfterRender
{
    private bool hasCalledOnAfterRender;

    [Inject]
    private IServiceProvider Services { get; set; } = default!;

    [Inject]
    private BlazorServiceAccessor BlazorServiceAccessor { get; set; } = default!;

    public override Task SetParametersAsync(ParameterView parameters)
        => InvokeWithBlazorServiceContext(() => base.SetParametersAsync(parameters));

    Task IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, object? arg)
        => InvokeWithBlazorServiceContext(() =>
        {
            var task = callback.InvokeAsync(arg);
            var shouldAwaitTask = task.Status != TaskStatus.RanToCompletion &&
                task.Status != TaskStatus.Canceled;

            StateHasChanged();

            return shouldAwaitTask ?
                CallStateHasChangedOnAsyncCompletion(task) :
                Task.CompletedTask;
        });

    Task IHandleAfterRender.OnAfterRenderAsync()
        => InvokeWithBlazorServiceContext(() =>
        {
            var firstRender = !hasCalledOnAfterRender;
            hasCalledOnAfterRender |= true;

            OnAfterRender(firstRender);

            return OnAfterRenderAsync(firstRender);
        });

    private async Task CallStateHasChangedOnAsyncCompletion(Task task)
    {
        try
        {
            await task;
        }
        catch
        {
            if (task.IsCanceled)
            {
                return;
            }

            throw;
        }

        StateHasChanged();
    }

    private async Task InvokeWithBlazorServiceContext(Func<Task> func)
    {
        try
        {
            BlazorServiceAccessor.Services = Services;
            await func();
        }
        finally
        {
            BlazorServiceAccessor.Services = null;
        }
    }
}

CustomComponentBase を拡張するすべてのコンポーネントでは、BlazorServiceAccessor.Services が現在の Blazor DI スコープの IServiceProvider に自動的に設定されます。

最後に、Program ファイルで、スコープ付きサービスとして BlazorServiceAccessor を追加します:

builder.Services.AddScoped<BlazorServiceAccessor>();

最後に、Startup.cs の Startup.ConfigureServices で BlazorServiceAccessor をスコープ付きサービスとして追加します。

services.AddScoped<BlazorServiceAccessor>();

• Blazor Web App で、最上位レベルのインポート ファイル (_Imports.razor) を使用したサービスの挿入
• ASP.NET Core での依存関係の挿入
• 一時的なインスタンスと共有インスタンスのための IDisposable ガイダンス
• ASP.NET Core でのビューへの依存関係の挿入
• プライマリ コンストラクター (C# ガイド)

• ASP.NET Core での依存関係の挿入
• 一時的なインスタンスと共有インスタンスのための IDisposable ガイダンス
• ASP.NET Core でのビューへの依存関係の挿入