为你的Blazor程序加入本地化多语言功能

本地化

本地化是为给定语言和地区定制应用程序的过程. BootstrapBlazor 组件允许您将其 UI 元素转换为所需的语言。这包括按钮、过滤器操作符属性等文本。组件内部默认使用当前请求 UI 文化语言，本文将向您展示如何在应用程序中使用此功能：

BootstrapBlazor 组件库

简介
BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。

小提示

阅读以下知识点前请先查看 微软官方文档
由于 wasm 模式无法获取系统语言文化信息，默认文化信息为 en
组件内置本地化资源文件为 en zh 由网友提供的其他本地化资源文件 de es pt zh-TW 放置在项目文件夹 localization 内，可自行下载通过注入服务引入到项目中

本地化在组件中的工作原理

BootstrapBlazor 组件额外支持使用 Json 类型的键值信息作为资源文件，将其解析为 UI 中呈现的字符串。BootstrapBlazor 包自带以下资源文件。

• 中文（zh）
• 英语（en）

额外本地化语言 json 文件

• 德语（de）
• 葡萄牙语（pu）
• 西班牙语（es）
• 中國台灣（zh-TW）

组件库本地化详细资讯链接

https://www.blazor.zone/localization

开始撸码

跟往常一样,CV福音

源码在此.

Bootstrap Blazor App 模板, 快速搭建项目

1. 新建bb模板工程

dotnet new install Bootstrap.Blazor.Templates::9.0.4
dotnet new bbapp

2. 加入语言选择功能

右键新建blazor组件 CultureChooser.razor

新建组件步骤参考往期文章

加入如下代码

@inherits BootstrapComponentBase
@namespace BootstrapBlazor.Server.Components.Components<div @attributes="@AdditionalAttributes" class="@ClassString"><span>@Label</span><Select Value="@SelectedCulture" OnSelectedItemChanged="@SetCulture"><Options>@foreach (var kv in BootstrapOptions.CurrentValue.GetSupportedCultures()){<SelectOption Text="@GetDisplayName(kv)" Value="@kv.Name" />}</Options></Select>
</div>

新建代码后置文件 CultureChooser.razor.cs

新建代码后置文件步骤参考往期文章

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using Microsoft.Extensions.Options;
using Microsoft.JSInterop;
using System.Diagnostics.CodeAnalysis;
using System.Globalization;namespace BootstrapBlazor.Server.Components.Components;/// <summary>
/// 
/// </summary>
public partial class CultureChooser
{[Inject][NotNull]private IOptionsMonitor<BootstrapBlazorOptions>? BootstrapOptions { get; set; }[Inject][NotNull]private IStringLocalizer<CultureChooser>? Localizer { get; set; }[Inject][NotNull]private NavigationManager? NavigationManager { get; set; }private string? ClassString => CssBuilder.Default("culture-selector").AddClassFromAttributes(AdditionalAttributes).Build();private string SelectedCulture { get; set; } = CultureInfo.CurrentCulture.Name;[NotNull]private string? Label { get; set; }/// <summary>/// OnInitialized 方法/// </summary>protected override void OnInitialized(){base.OnInitialized();Label ??= Localizer[nameof(Label)];}private async Task SetCulture(SelectedItem item){if (RendererInfo.Name == "Server"){// 使用 api 方式 适用于 Server-Side 模式if (SelectedCulture != item.Value){var culture = item.Value;var uri = new Uri(NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.SafeUnescaped);var query = $"?culture={Uri.EscapeDataString(culture)}&redirectUri={Uri.EscapeDataString(uri)}";// use a path that matches your culture redirect controller from the previous stepsNavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);}}else{if (SelectedCulture != item.Value){var culture = item.Value;await JSRuntime.InvokeVoidAsync("bbCulture.set", culture);NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);}}}private string GetDisplayName(CultureInfo culture){string? ret;if (RendererInfo.Name == "Server"){ret = culture.NativeName;}else{ret = culture.Name switch{"zh-CN" => "中文（中国）","en-US" => "English (United States)",_ => ""};}return ret;}
}

3. 布局文件添加语言选择

编辑 MainLayout.razor 在<Widget></Widget>后面加入一行

<BootstrapBlazor.Server.Components.Components.CultureChooser />

4. 增加多语言支持配置信息,启用本地化

编辑 Program.cs 在builder.Services.AddBootstrapBlazor();后加入这些代码

// 增加多语言支持配置信息
builder.Services.AddRequestLocalization<IOptionsMonitor<BootstrapBlazorOptions>>((localizerOption, blazorOption) =>
{blazorOption.OnChange(Invoke);Invoke(blazorOption.CurrentValue);return;void Invoke(BootstrapBlazorOptions option){var supportedCultures = option.GetSupportedCultures();localizerOption.SupportedCultures = supportedCultures;localizerOption.SupportedUICultures = supportedCultures;}
});builder.Services.AddControllers();

然后在var app = builder.Build();后加入这行代码

// 启用本地化
var option = app.Services.GetService<IOptions<RequestLocalizationOptions>>();
if (option != null)
{app.UseRequestLocalization(option.Value);
}

最后在app.MapStaticAssets();后加入这行代码

app.MapDefaultControllerRoute();

5. 添加控制器

新建文件夹Controllers, 新建文件 CultureController.cs

using Microsoft.AspNetCore.Localization;
using Microsoft.AspNetCore.Mvc;
using RouteAttribute = Microsoft.AspNetCore.Mvc.RouteAttribute;namespace BootstrapBlazor.Controllers;/// <summary>
/// 文化 Controller
/// </summary>
[Route("[controller]/[action]")]
public class CultureController : Controller
{/// <summary>/// 设置文化方法/// </summary>/// <param name="culture"></param>/// <param name="redirectUri"></param>/// <returns></returns>public IActionResult SetCulture(string culture, string redirectUri){if (string.IsNullOrEmpty(culture)){HttpContext.Response.Cookies.Delete(CookieRequestCultureProvider.DefaultCookieName);}else{HttpContext.Response.Cookies.Append(CookieRequestCultureProvider.DefaultCookieName,CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture, culture)), new CookieOptions(){Expires = DateTimeOffset.Now.AddYears(1)});}return LocalRedirect(redirectUri);}/// <summary>/// 重置文化方法/// </summary>/// <param name="redirectUri"></param>/// <returns></returns>public IActionResult ResetCulture(string redirectUri){HttpContext.Response.Cookies.Delete(CookieRequestCultureProvider.DefaultCookieName);return LocalRedirect(redirectUri);}
}

6. 运行工程

因为模板工程已经带了部分多语言配置, 我们点击Table或者花名册页面就可以看到效果

7. 实践

通过主页面改变欢迎词来练习

代码<SurveyPrompt Title="How is Blazor working for you?" />改为

<SurveyPrompt Title="@Localizer["Wellcome"]" />
<SurveyPrompt Title="@Localizer["How is Blazor working for you?"]" />@code{[Inject][NotNull]private IStringLocalizer<Index>? Localizer { get; set; }}

在这里我们写了两行@Localizer,先买个关子,运行时候看看是什么效果.

添加本地化资源

分别在Locales/zh.json和Locales/en.json添加对应的文字

  "BootstrapBlazorApp.Server.Components.Pages.Index": {"Wellcome": "Blazor 对你有什么帮助？"}

  "BootstrapBlazorApp.Server.Components.Pages.Index": {"Wellcome": "How is Blazor working for you?"}

运行工程

现在可以看到效果了, 找到资源的已经正确显示对应文本, 未找到资源的,会回落显示为key.

8. 组件库本地化详细资讯链接

https://www.blazor.zone/localization