ASP.NET Core Blazor 實作多國語系

因為在做side project常常喜歡中英夾雜顯示網站資訊，被合夥人嫌棄說又不是每個人都看得懂英文，想說乾脆做多語系讓人自由選擇，所以紀錄一下實作的過程。

要實作網站多語言功能，主要就是得預先把對應的翻譯資料建立好，藉由JS取得使用者慣用語言再顯示對應的語言在畫面上。好在Blazor已經提供了此功能，幾個步驟就能實現。

• Blazor Webassembly
• .Net 6

安裝對應版本的套件

Microsoft.Extensions.Localization

在 Program.cs註冊服務
增加：

C#
builder.Services.AddLocalization();

與

C#
var host = builder.Build();
CultureInfo culture;
var js = host.Services.GetRequiredService<IJSRuntime>();
var result = await js.InvokeAsync<string>("blazorCulture.get");
if (result != null)
{
    culture = new CultureInfo(result);
}
else
{
    culture = new CultureInfo("zh-TW");
    await js.InvokeVoidAsync("blazorCulture.set", "zh-TW");
}
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

主要是藉由JS取得local storage的語系參數，若無則預設為繁體中文。

並移除 await builder.Build().RunAsync(); 改為await host.RunAsync();

全部代碼為:

C#
builder.Services.AddLocalization();

var host = builder.Build();
CultureInfo culture;
var js = host.Services.GetRequiredService<IJSRuntime>();
var result = await js.InvokeAsync<string>("blazorCulture.get");
if (result != null)
{
    culture = new CultureInfo(result);
}
else
{
    culture = new CultureInfo("zh-TW");
    await js.InvokeVoidAsync("blazorCulture.set", "zh-TW");
}
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

//await builder.Build().RunAsync();
await host.RunAsync();

接著需在專案檔增加此項目，點選 你的專案.Client

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

實際會看起來像這樣

<PropertyGroup>
	<TargetFramework>net6.0</TargetFramework>
	<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
	<Nullable>enable</Nullable>
	<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>

取得local storage參數的JS為(新增至wwwroot/index.html):

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

在 你的專案.Client/Shared/ResourceFiles 建立資源檔案

建立資源檔案

與其他語系的資源檔，這裡額外新建英文語系結構如下

專案結構

然後就能建立好key對應實際語系的文字資料。

接下來只要在想要的畫面對應的razor檔案，使用資源檔與注入服務就能達到更換語系的效果。

C#
@inject Microsoft.Extensions.Localization.IStringLocalizer<Resource> localizer
@using ShowcaseBlazorApp.Client.Shared.ResourceFiles

需要做到多語系變換的字串使用

C#
@localizer["key"]

就能順利取得資源檔的value並顯示。

這裡發現若找不到對應的資源檔，會直接顯示key，所以我就直接用中文版本的翻譯當key來使用，這樣就只需要新增英文語系對應的value就好。

官網的範例為新增一個簡單的下拉選單物件 CultureSelector.razor

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

<p>
    <label>
        Select your locale:
        <select @bind="Culture">
            @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("zh-TW"),
    };

    private CultureInfo Culture
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                var js = (IJSInProcessRuntime)JS;
                js.InvokeVoid("blazorCulture.set", value.Name);

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

在MainLayout.razor中增加下拉選單以利使用者能隨時切換語系

C#
<article class="bottom-row px-4">
    <CultureSelector />
</article>

下拉選擇語系選單

以上為針對Blazor Webassembly 增加多語系的實作流程，其實還有部分內容像是自動取得使用者慣用語系..等沒研究，不過使用選單改變語系已剛好符合個人使用需求，所以就先這樣惹。

Reference

• ASP.NET Core Blazor 全球化和當地語系化
• [Blazor Webassembly] 下拉選單選擇多國語系

BlazorWebCsharpJavaScript

Alvin

軟體工程師，喜歡金融知識、健康觀念、心理哲學、自助旅遊與系統設計。

ASP.NET Core API & Blazor 實作快取機制提升效能

ASP.NET Core Blazor 基本概念與模型選擇 (Server vs WebAssembly)

ASP.NET Core Blazor 實作圖片延遲載入

Blazor WASM SEO - 使用預渲染解決 SPA 網頁爬蟲無法讀取問題 (Prerender.io & Cloudflare Workers 操作流程教學)

使用 ASP.NET Core API & Blazor 產生 Sitemap

ASP.NET Core Web API & Blazor 實作Amazon S3 檔案串接