クライアントBlazorでのアプリケーション設定
目次
クライアント・アプリケーションの設定のロード
クライアントへの設定の公開
クライアントからの設定の取得
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値.
私たちはまたAppSettingsExampleにいます.Sharedプロジェクトにクラスを作成して、これらの構成を保存します.
そして、AppSettingsExample.ServerのStartupでは、アプリケーション構成への参照を取得し、ローカル変数に格納します.
これによりappsettingsから構成を使用することができます.jsonに設定をロードし、依存項目注入構成に単一の例として追加します.
クライアントBlazorアプリケーションに設定を渡す簡単な方法はありません.そのため、サーバからアプリケーションを要求する必要があります.ClientAppSettingsコントローラをAppSettings Exampleに作成します.サーバは、これらの設定を提供します.
これは私の一番面倒なところです.アプリケーションが実行を続ける前に、これらの設定を完全にロードする必要があります.この操作を非同期で実行すると、ロードの設定が完了する前に、現在のページで初期化メソッドとParameterSetメソッドの実行が開始されます.呼び出しをしようとしたらWait()非同期Webリクエストの同期が完了すると、アプリケーションはロックされます.
この問題を解決するために、設定をロードし、ロード後にサブコンテンツを表示するコンポーネントを作成できます.次に、設定をロードする前にパラメータの初期化や設定を開始しないように、このコンポーネントにコンテンツをパッケージできます.まずAppSettingsリーダーを作成しますrazor
ClientAppSettingsインスタンスをアプリケーション全体で使用可能にするために依存注入にロードできない(またはできない)ため、静的クラスに値を置くだけです.
今、MainLayout.razorではAppSettingsLoaderでパッケージ@body
最後にIndexでrazorページでAppSettings.BaseApiUrl.それを証明するために、ページに表示します.
ここでjsonのClientAppSettingsセクションでは、Azureアプリケーションサービスの構成セクションで設定できる一般的なアプリケーション設定とみなされます.
クライアント・アプリケーションの設定のロード
クライアントへの設定の公開
クライアントからの設定の取得
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アプリケーションサービスの構成セクションで設定できる一般的なアプリケーション設定とみなされます.