參考文件

• 多國語系魔術
• ASP.NET Core Blazor 全球化和本地化
• Localization in Blazor WebAssembly Applications

環境

• Blazor Webassembly
• .Net 6

專案

Github

操作流程

1. 安裝套件

套件名稱：Microsoft.Extensions.Localization

2. 服務註冊

在 Program.cs 加入：

builder.Services.AddLocalization();

3. 取得JS儲存的語系

在 Program.cs 加入：

var host = builder.Build();
CultureInfo culture;
var js = host.Services.GetRequiredService<IJSRuntime>();
var result = await js.InvokeAsync<string>("blazorCulture.get");//取得 JS localStorage的儲存內容
if (result != null)
{
    culture = new CultureInfo(result);
}
else
{
    culture = new CultureInfo("en-US");
    await js.InvokeVoidAsync("blazorCulture.set", "en-US");
}
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

4. 專案設定

點擊專案後，加入：

<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>

未設定導致的錯誤訊息

5. JS的blazorCulture存取設定

在 wwwroot/index.html 加入：

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

6. 建立資源檔

• 新增ResourceFiles資料夾存放檔案
• 加入 :arrow_right: 新增項目 :arrow_right: 資源檔

命名規則：

• 檔名.resx
  ex. Resource.resx
• 檔名.語系.resx
  ex. Resource.en.resx

7. 設定資源檔

設定語系所呈現的文字。

注意事項：Resource.resx的存取修飾詞要設定為Public，其他Resource檔案(ex. Resource.en.resx)不用設定。

8. 頁面顯示內容設定

使用 IStringLocalizer<資源檔> 呼叫名稱對應的值

@using Blazor_WASM_Localization.Shared.ResourceFiles
@inject Microsoft.Extensions.Localization.IStringLocalizer<Resource> localizer
    
@localizer["helloWorld"] <!--顯示對應的語系內容-->

9. 下拉選單變更語系

<select @bind="Culture">
    @foreach (var culture in supportedCultures)
    {
        <option value="@culture">@culture.DisplayName</option>
    }
</select>


@code
{
    CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("zh-TW"),
    };

    CultureInfo Culture
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                var js = (IJSInProcessRuntime)JSRuntime;
                js.InvokeVoid("blazorCulture.set", value.Name);//設定JS中blazorCulture的值
                Nav.NavigateTo(Nav.Uri, forceLoad: true);
            }
        }
    }
}