Try   HackMD

參考文件

環境

  • 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); } } } }