My Github

Blazor学习之旅(10)多语言+本地化

大家好,我是Edison。

上一篇我提到了接下来会介绍一下如何在Blazor中实现多语言,这就安排上了。

多语言+本地化的背景

在Web应用开发中,我们可能会有一些需要多语言+本地化的场景,特别在一些国际化的外资企业当中特别常见。例如,Edison所在的IT开发团队,就需要英语,中文和德语三种语言的支持,用户可以通过“切换页面语言”这个功能来切换到适合他的语言来浏览页面的内容。因此,为Web应用提供多语言,页面内容可以本地化,会扩展我们的IT系统受众范围,提升一点用户体验。

因此,如何在Blazor中实现多语言+本地化就被提上议程。

一些基本的名词术语

为了更好地理解下面的内容,我们先来了解一下行业内通用的名词术语:

  • Globalization (G11N):全球化,即使应用支持不同语言和区域的过程。G11N 是首字母、尾字母和它们之间字母的个数组成的,下同,不再赘述。

  • Localization (L10N):本地化,即针对特定语言和区域自定义全球化应用的过程。

  • Internationalization (I18N):国际化,又称为多语言,包含了全球化和本地化。

  • Culture:区域性,即一种语言文化或区域。

  • Neutral Culture:非特定区域性,即具有指定语言但不具有区域的区域性。例如“zh”、“en”,仅仅表示中文或英文,并没有包含指定地区,如大陆、香港、台湾等。

  • Specific Culture: 特定区域性,即具有指定语言和区域的区域性。例如“zh-CN”、“zh-HK”。

  • Parent Culture: 父区域性,例如“zh”就是“zh-CN”和“zh-HK”的父区域性。

在Blazor中实现本地化的方式

在Blaozr中实现本地化的方式,其实也就是ASP.NET Core提供的那些本地化工具:

  • IStringLocalizer

  • IStringLocalizerFactory

  • IHtmlLocalizer

  • IViewLocalizer

在Blazor中,我们最常用的就是IStringLocalizer,它可以在运行时提供区域性资源,使用非常简单,就像操作字典一样,提供一个 Key,就能获取到指定区域的资源。

接下来,我就以IStringLocalizer为例,介绍如何通过它来在Blazor应用中实现多语言和本地化。

在Blazor中实现本地化的步骤

(1)准备工作

假设我们已经有了一个Blazor应用程序,并且有一个Home.razor的页面,需要支持中文(默认语言)、英语和德语。

(2)创建三个资源文件

在根目录下创建一个Resources目录,再创建一个Pages子目录,然后再创建三个resx资源文件。这里我们可以使用一个资源文件来覆盖所有页面的本地化内容,也可以针对多个页面配置多个资源文件。为了演示,这里只有一个资源文件Home.resx应对演示页面Home.razor。

key:HelloWorldTip, value: 你好,世界      -- 中文
key:HelloWorldTip, value: Hello, World!  -- 英语
key:HelloWorldTip, value: Hallo, welt!   -- 德语

补充:如果你习惯使用json作为资源文件,也可以使用My.Extensions.Localization.Json 这个包来将resx换为json文件。

(3)在Programs.cs中注册和使用本地化

添加本地化服务,并指向我们刚刚创建的Resources目录,并声明系统需要支持三种语言,中文为默认的语言。

var builder = WebApplication.CreateBuilder(args);
......
// Add Localization
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");

var app = builder.Build();
......
app.MapControllers();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

// Use Localization
const string CULTURE_CHINESE = "zh-CN";
const string CULTURE_ENGLISTH = "en-US";
const string CULTURE_GERMAN = "de-DE";
app.UseRequestLocalization(options =>
{
    var cultures = new[] { CULTURE_CHINESE, CULTURE_ENGLISTH, CULTURE_GERMAN };
    options.AddSupportedCultures(cultures);
    options.AddSupportedUICultures(cultures);
    options.SetDefaultCulture(CULTURE_CHINESE);
    // 当Http响应时,将 当前区域信息 设置到 Response Header:Content-Language 中
    options.ApplyCurrentCultureToResponseHeaders = true;
});
......

(4)在_Imports.razor中添加全局注入

为了方便后续的使用,我们直接将IStringLocalizer和NavigationManager进行全局的注入。

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

@inject IStringLocalizer<Home> _translator;
@inject NavigationManager _navigation;
......

(5)新建一个CultureController用于Culture的切换

为了让页面上的语言切换能够更新系统的当前Culture,我们让其通过调用API的方式来实现。

namespace EDT.BlazorServer.App.Controllers
{
    [Route("[controller]/[action]")]
    public class CultureController : Controller
    {
        public IActionResult Set(string culture, string redirectUri)
        {
            if (!string.IsNullOrEmpty(culture))
            {
                HttpContext.Response.Cookies.Append(
                    CookieRequestCultureProvider.DefaultCookieName,
                    CookieRequestCultureProvider.MakeCookieValue(
                      new RequestCulture(culture, culture)), 
                      new CookieOptions { Secure = true, HttpOnly = true });
            }

            return LocalRedirect(redirectUri);
        }
    }
}

(6)改造Home.razor让其可以实现本地化

这里我们在页面上使用IStringLocalizer对象来实现一个内容的切换。

@page "/home"

<PageTitle>Index</PageTitle>

<h1>@_translator["HelloWorldTip"]</h1>
<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("zh-CN"),
        new CultureInfo("en-US"),
        new CultureInfo("de-DE")
    };

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

    public CultureInfo Culture 
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                var uri = new Uri(_navigation.Uri)
                    .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
                var cultureEscaped = Uri.EscapeDataString(value.Name);
                var uriEscaped = Uri.EscapeDataString(uri);

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

(7)效果演示

如下图所示:

小结

本篇,我们在Blazor中通过IStringLocalizer来实现了多语言和本地化。但其实IStringLocalizer只是ASP.NET Core中本地化实现方式的一种而已,关于更多全球化和本地化的内容,建议阅读参考资料中的两篇文章,特别是建军兄最近整理的《理解ASP.NET Core - 全球化与本地化》值得一读!

参考代码

GitHub:https://github.com/Coder-EdisonZhou/BlazorSamples/tree/main

参考资料

Microsoft,《ASP.NET Core Blazor 全球化与本地化》

xiaoxiaotank,《理解ASP.NET Core - 全球化与本地化》(五星推荐)

 

posted @ 2023-08-02 08:54  EdisonZhou  阅读(698)  评论(0编辑  收藏  举报