クライアントBlazorでのアプリケーション設定

3843 ワード

目次
クライアント・アプリケーションの設定のロード
クライアントへの設定の公開
クライアントからの設定の取得
ASPを通ります.NETは甘やかされて、アプリケーションの設定が正常に動作することを望んでいますが、クライアントBlazorはまだ構成しやすいアプリケーションの設定文章がありません.Azureアプリケーションで各環境(dev/test/beta/prod)に設定できるようにしたいです.ターゲットは、環境間を変化なく移動する構築ワークである.
Blazorアプリケーションを静的ファイルとして管理する場合は、アプリケーション設定ファイルを異なる環境ごとに変更する必要があります.したがって、私はASPを使用しません.NET Core Web Hosted.アプリケーションにAppSettings Exampleという名前を付けました.そのため、ソリューションにはAppSettings Exampleがあります.Client(WASMアプリケーション)、AppSettingsExample.サーバ(管理アプリケーション)とAppSettings Example.Shared(クライアントとサーバ間で共有されるコード)

クライアント・アプリケーションの設定のロード


私たちはAppSettingsExampleを通じてサーバに組み込まれた構成ストレージとアクセスクライアントアプリケーションの設定.このため、次のappsettingsを追加します.json値.
{
  "ClientAppSettings": {
    "BaseApiUrl": "http://somesite.com/api"
  }
}

私たちはまたAppSettingsExampleにいます.Sharedプロジェクトにクラスを作成して、これらの構成を保存します.
public class ClientAppSettings
{
    public string BaseApiUrl { get; set; }
}

そして、AppSettingsExample.ServerのStartupでは、アプリケーション構成への参照を取得し、ローカル変数に格納します.
private readonly IConfiguration _configuration;

public Startup(IConfiguration configuration)
{
    _configuration = configuration;
}

これによりappsettingsから構成を使用することができます.jsonに設定をロードし、依存項目注入構成に単一の例として追加します.
public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton(_configuration.GetSection("ClientAppSettings").Get());

クライアントへの設定の公開


クライアントBlazorアプリケーションに設定を渡す簡単な方法はありません.そのため、サーバからアプリケーションを要求する必要があります.ClientAppSettingsコントローラをAppSettings Exampleに作成します.サーバは、これらの設定を提供します.
[Route("api/[controller]")]
[ApiController]
public class ClientAppSettingsController : ControllerBase
{
    private readonly ClientAppSettings _clientAppSettings;

    public ClientAppSettingsController(ClientAppSettings clientAppSettings)
    {
        _clientAppSettings = clientAppSettings;
    }

    [HttpGet]
    public ClientAppSettings GetClientAppSettings()
    {
        return _clientAppSettings;
    }
}

クライアントからの設定の取得


これは私の一番面倒なところです.アプリケーションが実行を続ける前に、これらの設定を完全にロードする必要があります.この操作を非同期で実行すると、ロードの設定が完了する前に、現在のページで初期化メソッドとParameterSetメソッドの実行が開始されます.呼び出しをしようとしたらWait()非同期Webリクエストの同期が完了すると、アプリケーションはロックされます.
この問題を解決するために、設定をロードし、ロード後にサブコンテンツを表示するコンポーネントを作成できます.次に、設定をロードする前にパラメータの初期化や設定を開始しないように、このコンポーネントにコンテンツをパッケージできます.まずAppSettingsリーダーを作成しますrazor
@using AppSettingExample.Shared
@inject HttpClient http

@if (IsLoaded)
{
    @ChildContent
}


@code 
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public bool IsLoaded { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        if (!IsLoaded)
        {
            var appSettings = await http.GetJsonAsync("api/ClientAppSettings");
            AppSettings.BaseApiUrl = appSettings.BaseApiUrl;
            IsLoaded = true;
        }
    }
}

ClientAppSettingsインスタンスをアプリケーション全体で使用可能にするために依存注入にロードできない(またはできない)ため、静的クラスに値を置くだけです.
今、MainLayout.razorではAppSettingsLoaderでパッケージ@body

@Body

最後にIndexでrazorページでAppSettings.BaseApiUrl.それを証明するために、ページに表示します.
@page "/"

Hello, world!

@AppSettings.BaseApiUrl

ここでjsonのClientAppSettingsセクションでは、Azureアプリケーションサービスの構成セクションで設定できる一般的なアプリケーション設定とみなされます.