ASP.NET Core Blazor のグローバリゼーションおよびローカライズ

Blazor WebAssembly は、縮小されたグローバリゼーション API と組み込みの International Components for Unicode (ICU) ロケールのセットを使います。 詳細については、「.NET グローバリゼーションと ICU: WebAssembly での ICU」を参照してください。

カスタム ICU データ ファイルを読み込んでアプリのロケールを制御するには、「WASM グローバリゼーション Icu」を参照してください。 現在は、カスタム ICU データ ファイルを手動で構築する必要があります。 このファイルの作成プロセスを簡単にする .NET ツールは、2024 年 11 月の .NET 9 で予定されています。

Blazor WebAssembly は、縮小されたグローバリゼーション API と組み込みの International Components for Unicode (ICU) ロケールのセットを使います。 詳細については、「.NET グローバリゼーションと ICU: WebAssembly での ICU」を参照してください。

Blazor WebAssembly アプリでロケールのカスタム サブセットを読み込むことは、.NET 8 以降でサポートされています。 詳細については、この記事の 8.0 以降のバージョンに関するセクションにアクセスしてください。

タイムゾーン情報

このセクションは、クライアント側の Blazor シナリオにのみ適用されます。

インバリアント グローバリゼーション を採用すると、ローカライズされていないタイムゾーン名のみが使用されることになります。 タイムゾーン コードとデータをトリミングしてアプリのダウンロード サイズを削減し、アプリの起動を高速化するには、アプリのプロジェクト ファイルで、true の値を持つ <InvariantTimezone> MSBuild プロパティを適用します。

<PropertyGroup>
  <InvariantTimezone>true</InvariantTimezone>
</PropertyGroup>

データ ファイルは、タイムゾーン情報を正しく保つために含まれています。 アプリでこの機能を必要としない場合は、アプリのプロジェクト ファイル内の <BlazorEnableTimeZoneSupport> MSBuild プロパティを false に設定して無効にすることを検討してください。

<PropertyGroup>
  <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
</PropertyGroup>

"クライアント側の開発" では、クライアント側アプリのプロジェクト ファイル (.csproj ) で BlazorWebAssemblyLoadAllGlobalizationData プロパティを true に設定します。

<PropertyGroup>
  <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>

"クライアント側の開発" では、Accept-Language ヘッダーからカルチャを動的に設定することはできません。

サーバー側の開発では要求カルチャをチェックするミドルウェアの前に、アプリでサポートされているカルチャを指定します。 一般に、 MapRazorComponentsを呼び出す直前に、要求ローカリゼーション ミドルウェアを配置します。 次の例では、英語 (米国) とスペイン語 (コスタリカ) でサポートされるカルチャを構成しています。

サーバー側の開発ではルーティング ミドルウェア (UseRouting) が処理パイプラインに追加された直後に、アプリでサポートされているカルチャを指定します。 次の例では、英語 (米国) とスペイン語 (コスタリカ) でサポートされるカルチャを構成しています。

アプリのプロジェクト ファイル (.csproj) で BlazorWebAssemblyLoadAllGlobalizationData プロパティを true に設定します。

<PropertyGroup>
  <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>

クライアント側のレンダリングに対する中間言語 (IL) リンカーの構成によって、明示的に要求されたロケールを除き、国際化情報が削除されます。 詳しくは、「ASP.NET Core Blazor 用のリンカーを構成する」をご覧ください。

Blazor Web App:

<script>
  Blazor.start({
    webAssembly: {
      applicationCulture: 'en-US'
    }
  });
</script>

スタンドアロン Blazor WebAssembly:

サーバー側のアプリはローカライズ ミドルウェアを使用してローカライズされます。 AddLocalization を使用して、ローカライズ サービスをアプリに追加します。

Program ファイルで次のように指定します。

builder.Services.AddLocalization();

要求カルチャを確認する可能性のあるミドルウェアの前に、 Program ファイルで静的カルチャを指定します。 一般に、要求ローカリゼーション ミドルウェアは、 MapRazorComponentsの直前に配置します。 次の例では、英語 (米国) を構成しています。

ルーティング ミドルウェア (UseRouting) が処理パイプラインに追加された直後に、Program ファイルに静的カルチャを指定します。 次の例では、英語 (米国) を構成しています。

app.UseRequestLocalization("en-US");

UseRequestLocalization のカルチャ値は、BCP-47 言語タグ形式に準拠している必要があります。

Program ファイルのミドルウェア パイプラインでのローカライズ ミドルウェアの順序付けについては、「ASP.NET Core のミドルウェア」を参照してください。

サーバー側のアプリはローカライズ ミドルウェアを使用してローカライズされます。 AddLocalization を使用して、ローカライズ サービスをアプリに追加します。

Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

ルーティング ミドルウェアが処理パイプラインに追加された直後に、Startup.Configure (Startup.cs) で静的カルチャを指定します。 次の例では、英語 (米国) を構成しています。

app.UseRequestLocalization("en-US");

UseRequestLocalization のカルチャ値は、BCP-47 言語タグ形式に準拠している必要があります。

Startup.Configure のミドルウェア パイプラインでのローカライズ ミドルウェアの順序付けについては、「ASP.NET Core のミドルウェア」を参照してください。

プロジェクト ファイルで BlazorWebAssemblyLoadAllGlobalizationData プロパティを true に設定します。

<PropertyGroup>
  <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select @bind="selectedCulture" @bind:after="ApplySelectedCultureAsync">
            @foreach (var culture in supportedCultures)
            {
                <option value="@culture">@culture.DisplayName</option>
            }
        </select>
    </label>
</p>

@code
{
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("es-CR"),
    };

    private CultureInfo? selectedCulture;

    protected override void OnInitialized()
    {
        selectedCulture = CultureInfo.CurrentCulture;
    }

    private async Task ApplySelectedCultureAsync()
    {
        if (CultureInfo.CurrentCulture != selectedCulture)
        {
            await JS.InvokeVoidAsync("blazorCulture.set", selectedCulture!.Name);

            Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
        }
    }
}

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select value="@selectedCulture" @onchange="HandleSelectedCultureChanged">
            @foreach (var culture in supportedCultures)
            {
                <option value="@culture">@culture.DisplayName</option>
            }
        </select>
    </label>
</p>

@code
{
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("es-CR"),
    };

    private CultureInfo? selectedCulture;

    protected override void OnInitialized()
    {
        selectedCulture = CultureInfo.CurrentCulture;
    }

    private async Task HandleSelectedCultureChanged(ChangeEventArgs args)
    {
        selectedCulture = CultureInfo.GetCultureInfo((string)args.Value!);

        if (CultureInfo.CurrentCulture != selectedCulture)
        {
            await JS.InvokeVoidAsync("blazorCulture.set", selectedCulture!.Name);

            Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
        }
    }
}

要求処理パイプラインで MapRazorComponents を呼び出す前に、次のコードを置換します。

ルーティング ミドルウェア (UseRouting) が要求処理パイプラインに追加されたら、次のコードを配置します。

App コンポーネントには次の名前空間が必要です。

• System.Globalization
• Microsoft.AspNetCore.Localization

App コンポーネント ファイル (Components/App.razor) の先頭に次を追加します。

@using System.Globalization
@using Microsoft.AspNetCore.Localization

App コンポーネント ファイルの末尾に次の @code ブロックを追加します。

@code {
    [CascadingParameter]
    public HttpContext? HttpContext { get; set; }

    protected override void OnInitialized()
    {
        HttpContext?.Response.Cookies.Append(
            CookieRequestCultureProvider.DefaultCookieName,
            CookieRequestCultureProvider.MakeCookieValue(
                new RequestCulture(
                    CultureInfo.CurrentCulture,
                    CultureInfo.CurrentUICulture)));
    }
}

Pages/_Host.cshtml ファイルを変更するには、次の名前空間が必要です。

• System.Globalization
• Microsoft.AspNetCore.Localization

ファイルに次のコードを追加します。

@using System.Globalization
@using Microsoft.AspNetCore.Localization
@{
    this.HttpContext.Response.Cookies.Append(
        CookieRequestCultureProvider.DefaultCookieName,
        CookieRequestCultureProvider.MakeCookieValue(
            new RequestCulture(
                CultureInfo.CurrentCulture,
                CultureInfo.CurrentUICulture)));
}

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select @bind="selectedCulture" @bind:after="ApplySelectedCultureAsync">
            @foreach (var culture in supportedCultures)
            {
                <option value="@culture">@culture.DisplayName</option>
            }
        </select>
    </label>
</p>

@code
{
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("es-CR"),
    };

    private CultureInfo? selectedCulture;

    protected override void OnInitialized()
    {
        selectedCulture = CultureInfo.CurrentCulture;
    }

    private async Task ApplySelectedCultureAsync()
    {
        if (CultureInfo.CurrentCulture != selectedCulture)
        {
            var uri = new Uri(Navigation.Uri)
                .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var cultureEscaped = Uri.EscapeDataString(selectedCulture.Name);
            var uriEscaped = Uri.EscapeDataString(uri);

            Navigation.NavigateTo(
                $"Culture/Set?culture={cultureEscaped}&redirectUri={uriEscaped}",
                forceLoad: true);
        }
    }
}

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select value="@selectedCulture" @onchange="HandleSelectedCultureChanged">
            @foreach (var culture in supportedCultures)
            {
                <option value="@culture">@culture.DisplayName</option>
            }
        </select>
    </label>
</p>

@code
{
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("es-CR"),
    };

    private CultureInfo? selectedCulture;

    protected override void OnInitialized()
    {
        selectedCulture = CultureInfo.CurrentCulture;
    }

    private async Task HandleSelectedCultureChanged(ChangeEventArgs args)
    {
        selectedCulture = CultureInfo.GetCultureInfo((string)args.Value!);

        if (CultureInfo.CurrentCulture != selectedCulture)
        {
            var uri = new Uri(Navigation.Uri)
                .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var cultureEscaped = Uri.EscapeDataString(selectedCulture.Name);
            var uriEscaped = Uri.EscapeDataString(uri);

            Navigation.NavigateTo(
                $"Culture/Set?culture={cultureEscaped}&redirectUri={uriEscaped}",
                forceLoad: true);
        }
    }
}

MainLayout コンポーネントに CultureSelector コンポーネントを追加します。 Components/Layout/MainLayout.razor ファイルの終了 </main> タグの中に次のマークアップを配置します。

MainLayout コンポーネントに CultureSelector コンポーネントを追加します。 Shared/MainLayout.razor ファイルの終了 </main> タグの中に次のマークアップを配置します。

前の例では、App コンポーネント (Components/App.razor) の Routes コンポーネントで対話型サーバー レンダー モードを指定することで、アプリで "グローバル" インタラクティビティが採用されていることを前提としています。

<Routes @rendermode="InteractiveServer" />

アプリでページ/コンポーネント単位のインタラクティビティが採用されている場合、次の変更を行います。

• CultureExample1 コンポーネント ファイル (Components/Pages/CultureExample1.razor) の先頭に対話型サーバー レンダリング モードを追加します。

  @rendermode InteractiveServer
  

• アプリのメイン レイアウト (Components/Layout/MainLayout.razor) で、CultureSelector コンポーネントに対話型サーバー レンダリング モードを適用します。

  <CultureSelector @rendermode="InteractiveServer" />
  

ユーザー設定に応じて、Blazor Web App にカルチャを動的に設定する

このセクションは、自動 (サーバーおよび WebAssembly) 対話機能を採用する Blazor Web App に適用されます。

アプリでユーザーの設定を保存する場所の例として、ブラウザーのローカル ストレージ (クライアント側のシナリオで一般的)、ローカライズ cookie またはデータベース (サーバー側のシナリオで一般的)、ローカル ストレージとローカライズ cookie (サーバーと WebAssembly コンポーネントを備えたBlazor Web App)、または外部データベースにアタッチされ、Web API からアクセスされる外部サービスがあります。 次の例は、クライアント側レンダリング (CSR) コンポーネントにブラウザーのローカル ストレージを使い、サーバー側でレンダリング (SSR) コンポーネントにローカライズ cookie を使う方法を示しています。

.Client プロジェクトの更新

Microsoft.Extensions.Localization パッケージを .Client プロジェクトに追加します。

.Client プロジェクト ファイルで BlazorWebAssemblyLoadAllGlobalizationData プロパティを true に設定します。

<PropertyGroup>
  <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>

System.Globalization と Microsoft.JSInterop の名前空間を、.Client プロジェクトの Program ファイルの先頭に追加します。

using System.Globalization;
using Microsoft.JSInterop;

次の行を削除します。

- await builder.Build().RunAsync();

前の行を、次のコードで置き換えます。 このコードを使用すると、Blazor のローカライズ サービスが AddLocalization を含むアプリのサービス コレクションに追加されたり、JS 相互運用が JS への呼び出しに使用されたりすることに加え、ローカル ストレージからユーザーが選択したカルチャが取得されます。 ローカル ストレージにユーザーのカルチャが含まれていない場合、コードは英語 (米国) (en-US) の既定値を設定します。

builder.Services.AddLocalization();

var host = builder.Build();

const string defaultCulture = "en-US";

var js = host.Services.GetRequiredService<IJSRuntime>();
var result = await js.InvokeAsync<string>("blazorCulture.get");
var culture = CultureInfo.GetCultureInfo(result ?? defaultCulture);

if (result == null)
{
    await js.InvokeVoidAsync("blazorCulture.set", defaultCulture);
}

CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

await host.RunAsync();

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

このコンポーネントは、SSR または CSR コンポーネントのいずれかで機能する次のアプローチを採用しています。

• クライアント側のグローバリゼーション データには、サーバー側のグローバリゼーション データが提供するカルチャ表示名のローカライズされたテキストが含まれるため、ドロップダウン リストで使用できる各カルチャの表示名はディクショナリによって提供されます。 たとえば、サーバー側ローカライズには、en-US がカルチャである場合は English (United States)、別のカルチャが使われている場合は Ingles () が表示されます。 カルチャ表示名のローカライズは Blazor WebAssembly グローバリゼーションでは使用できないため、読み込まれたカルチャに対するクライアント上の米国英語の表示名は単に en-US になります。 カスタム ディクショナリを使うと、コンポーネントは少なくとも完全な英語のカルチャ名を表示できます。
• ユーザーがカルチャを変更すると、JS 相互運用機能によってローカル ブラウザー ストレージにカルチャが設定され、コントローラー アクションによってそのカルチャでローカライズ cookie が更新されます。 コントローラーは、後述する「サーバー プロジェクトの更新」セクションでアプリに追加されます。

Pages/CultureSelector.razor:

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select @bind="@selectedCulture" @bind:after="ApplySelectedCultureAsync">
            @foreach (var culture in supportedCultures)
            {
                <option value="@culture">@cultureDict[culture.Name]</option>
            }
        </select>
    </label>
</p>

@code
{
    private Dictionary<string, string> cultureDict = 
        new()
        {
            { "en-US", "English (United States)" },
            { "es-CR", "Spanish (Costa Rica)" }
        };

    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("es-CR"),
    };

    private CultureInfo? selectedCulture;

    protected override void OnInitialized()
    {
        selectedCulture = CultureInfo.CurrentCulture;
    }

    private async Task ApplySelectedCultureAsync()
    {
        if (CultureInfo.CurrentCulture != selectedCulture)
        {
            await JS.InvokeVoidAsync("blazorCulture.set", selectedCulture!.Name);

            var uri = new Uri(Navigation.Uri)
                .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var cultureEscaped = Uri.EscapeDataString(selectedCulture.Name);
            var uriEscaped = Uri.EscapeDataString(uri);

            Navigation.NavigateTo(
                $"Culture/Set?culture={cultureEscaped}&redirectUri={uriEscaped}",
                forceLoad: true);
        }
    }
}

.Client プロジェクトに次の CultureClient コンポーネントを配置して、CSR コンポーネントのグローバリゼーションがどのように機能するかを調べます。

Pages/CultureClient.razor:

@page "/culture-client"
@rendermode InteractiveWebAssembly
@using System.Globalization

<PageTitle>Culture Client</PageTitle>

<h1>Culture Client</h1>

<ul>
    <li><b>CurrentCulture</b>: @CultureInfo.CurrentCulture</li>
    <li><b>CurrentUICulture</b>: @CultureInfo.CurrentUICulture</li>
</ul>

<h2>Rendered values</h2>

<ul>
    <li><b>Date</b>: @dt</li>
    <li><b>Number</b>: @number.ToString("N2")</li>
</ul>

<h2><code>&lt;input&gt;</code> elements that don't set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.CurrentCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input @bind="number" /></label></li>
</ul>

<h2><code>&lt;input&gt;</code> elements that set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.InvariantCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input type="date" @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input type="number" @bind="number" /></label></li>
</ul>

@code {
    private DateTime dt = DateTime.Now;
    private double number = 1999.69;
}

サーバー プロジェクトの更新

サーバー プロジェクトに Microsoft.Extensions.Localization パッケージを追加します。

サーバー側のアプリはローカライズ ミドルウェアを使用してローカライズされます。 AddLocalization を使用して、ローカライズ サービスをアプリに追加します。

サービスが登録されているサーバー プロジェクトの Program ファイル内。

builder.Services.AddLocalization();

アプリの既定とサポートされるカルチャを RequestLocalizationOptions に設定します。

要求処理パイプラインで MapRazorComponents を呼び出す前に、次のコードを置換します。

var supportedCultures = new[] { "en-US", "es-CR" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

app.UseRequestLocalization(localizationOptions);

次の例では、ローカライズ ミドルウェアによって読み取ることができる cookie で現在のカルチャを設定する方法を示します。

App コンポーネントには次の名前空間が必要です。

• System.Globalization
• Microsoft.AspNetCore.Localization

App コンポーネント ファイル (Components/App.razor) の先頭に次を追加します。

@using System.Globalization
@using Microsoft.AspNetCore.Localization

クライアント側レンダリング用のアプリのカルチャは、Blazor フレームワークの API を使用して設定されます。 ユーザーのカルチャ選択は、CSR コンポーネントのブラウザーのローカル ストレージに保存できます。

Blazor の <script> タグの後に、ブラウザーのローカル ストレージを使ってユーザーのカルチャ選択を取得および設定する JS 関数を指定します。

<script>
  window.blazorCulture = {
    get: () => window.localStorage['BlazorCulture'],
    set: (value) => window.localStorage['BlazorCulture'] = value
  };
</script>

App コンポーネント ファイルの末尾に次の @code ブロックを追加します。

@code {
    [CascadingParameter]
    public HttpContext? HttpContext { get; set; }

    protected override void OnInitialized()
    {
        HttpContext?.Response.Cookies.Append(
            CookieRequestCultureProvider.DefaultCookieName,
            CookieRequestCultureProvider.MakeCookieValue(
                new RequestCulture(
                    CultureInfo.CurrentCulture,
                    CultureInfo.CurrentUICulture)));
    }
}

サーバー プロジェクトがコントローラー アクションを処理するように構成されていない場合:

• Program ファイルでサービス コレクションに対して AddControllers を呼び出して、MVC サービスを追加します。

  builder.Services.AddControllers();
  

• IEndpointRouteBuilder (app) で MapControllers を呼び出し、Program ファイルにコントローラー エンドポイント ルーティングを追加します。

  app.MapControllers();
  

ユーザーが SSR コンポーネントのカルチャを選択できるようにするには、ローカライズ cookie による "リダイレクトベースのアプローチ" を使います。 アプリでは、コントローラーへのリダイレクトによって、ユーザーが選択したカルチャが保持されます。 コントローラーによって、ユーザーが選択したカルチャが cookie に設定され、ユーザーは元の URI にリダイレクトされます。 このプロセスは、ユーザーがセキュリティで保護されたリソースにアクセスしようとしたときに、Web アプリで発生する処理に似ています。ユーザーがサインイン ページにリダイレクトされ、元のリソースに戻されます。

Controllers/CultureController.cs:

using Microsoft.AspNetCore.Localization;
using Microsoft.AspNetCore.Mvc;

[Route("[controller]/[action]")]
public class CultureController : Controller
{
    public IActionResult Set(string culture, string redirectUri)
    {
        if (culture != null)
        {
            HttpContext.Response.Cookies.Append(
                CookieRequestCultureProvider.DefaultCookieName,
                CookieRequestCultureProvider.MakeCookieValue(
                    new RequestCulture(culture, culture)));
        }

        return LocalRedirect(redirectUri);
    }
}

MainLayout コンポーネントに CultureSelector コンポーネントを追加します。 Components/Layout/MainLayout.razor ファイルの終了 </main> タグの中に次のマークアップを配置します。

<article class="bottom-row px-4">
    <CultureSelector @rendermode="InteractiveAuto" />
</article>

「デモンストレーション コンポーネント」セクションに示されている CultureExample1 コンポーネントを使用して、前述の例のしくみを確認します。

サーバー プロジェクトに次の CultureServer コンポーネントを配置して、SSR コンポーネントのグローバリゼーションがどのように機能するかを調べます。

Components/Pages/CultureServer.razor:

@page "/culture-server"
@rendermode InteractiveServer
@using System.Globalization

<PageTitle>Culture Server</PageTitle>

<h1>Culture Server</h1>

<ul>
    <li><b>CurrentCulture</b>: @CultureInfo.CurrentCulture</li>
    <li><b>CurrentUICulture</b>: @CultureInfo.CurrentUICulture</li>
</ul>

<h2>Rendered values</h2>

<ul>
    <li><b>Date</b>: @dt</li>
    <li><b>Number</b>: @number.ToString("N2")</li>
</ul>

<h2><code>&lt;input&gt;</code> elements that don't set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.CurrentCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input @bind="number" /></label></li>
</ul>

<h2><code>&lt;input&gt;</code> elements that set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.InvariantCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input type="date" @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input type="number" @bind="number" /></label></li>
</ul>

@code {
    private DateTime dt = DateTime.Now;
    private double number = 1999.69;
}

CultureClient と CultureServer の両コンポーネントを Components/Layout/NavMenu.razor のサイドバー ナビゲーションに追加します。

<div class="nav-item px-3">
    <NavLink class="nav-link" href="culture-server">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Server)
    </NavLink>
</div>
<div class="nav-item px-3">
    <NavLink class="nav-link" href="culture-client">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Client)
    </NavLink>
</div>

対話型自動コンポーネント

このセクションのガイダンスは、対話型自動レンダリング モードを採用するコンポーネントにも適用できます。

@rendermode InteractiveAuto

アプリのプロジェクト ファイル (.csproj) で BlazorWebAssemblyLoadAllGlobalizationData プロパティを true に設定します。

<PropertyGroup>
  <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>

• AddLocalization を使用して、ローカライズ サービスをアプリに追加します。
• アプリの既定のカルチャとサポートされるカルチャを Program ファイルで指定します。 次の例では、英語 (米国) とスペイン語 (コスタリカ) でサポートされるカルチャを構成しています。

builder.Services.AddLocalization();

要求カルチャを確認する可能性があるミドルウェアの前に、要求ローカライズ ミドルウェアを配置します。 一般に、ミドルウェアは、 MapRazorComponentsを呼び出す直前に配置します。

ルーティング ミドルウェア (UseRouting) が処理パイプラインに追加された直後:

var supportedCultures = new[] { "en-US", "es-CR" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

app.UseRequestLocalization(localizationOptions);

ミドルウェア パイプラインでのローカライズ ミドルウェアの順序付けについては、「ASP.NET Core のミドルウェア」を参照してください。

• AddLocalization を使用して、ローカライズ サービスをアプリに追加します。
• アプリの既定とサポートされるカルチャを Startup.Configure (Startup.cs) で指定します。 次の例では、英語 (米国) とスペイン語 (コスタリカ) でサポートされるカルチャを構成しています。

Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

ルーティング ミドルウェア (UseRouting) が処理パイプラインに追加された直後のStartup.Configure:

var supportedCultures = new[] { "en-US", "es-CR" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

app.UseRequestLocalization(localizationOptions);

Startup.Configure のミドルウェア パイプラインでのローカライズ ミドルウェアの順序付けについては、「ASP.NET Core のミドルウェア」を参照してください。

WebAssembly カルチャ プロバイダーの参照ソース

Blazor フレームワークによるローカライズの処理方法について詳しくは、ASP.NET Core 参照ソースで WebAssemblyCultureProvider クラスを参照してください。