在实际使用中,我们经常会遇到需要把程序界面多种语言切换,适应不同地区使用者的需求,本文介绍一个我初学Blazor接触到的库,边撸边讲解.

包名: Toolbelt.Blazor.I18nText https://github.com/jsakamoto/Toolbelt.Blazor.I18nText

此包是在 Blazor Web 应用程序中本地化文本的另一种方法!但不是唯一的方法, 因为微软官方也将 Blazor WebAssembly 从 v.3.2 preview 4 开始正式开始本地化支持。它基于 .NET StandardIStringLocalizer和带有.resx , 大家可以自己取舍.

特性

  • Blazor 服务器和 WebAssembly 都受支持。
  • 在 Blazor Wasm 中,它甚至可以在静态 Web 主机上运行。(不需要 ASP.NET Core 主机)
  • 只需要纯文本编辑器 - 不需要 .resx
  • 静态类型 - IntelliSense、代码提示...
  • 它支持 Blazor 组件库。你可以创建使用“Blazor I18nText”本地化的库的 NuGet 包。

1.新建工程

新建工程n08I18nText

使用 nuget.org 进行 Toolbelt.Blazor.I18nText 组件安装

将项目添加到解决方案中:

dotnet new blazorserver -o n08I18nText
dotnet add n08I18nText package Toolbelt.Blazor.I18nText
dotnet sln add n08I18nText/n08I18nText.csproj

2.创建本地化文本源文件 JSON 或 CSV (注意:文件的编码必须是UTF-8)

新建i18ntext目录, 添加每种语言的本地化文本源文件

本地化的文本源文件必须是简单的仅键值对 JSON 文件,如下例所示:

{
"Key1" : "本地化文本 1 " ,
"Key2" : "本地化文本 2 " ,
...
}

或者,只有 2 列的 CSV 文件,没有标题行,如下例所示。

Key1,Localized text 1
Key2,Localized text 2

本地化文本源文件的命名规则必须如下:

<Text Table Name>.<Language Code>.{json|csv}

我们示例项目添加三个语言文件

中文 MyText.zh.json

{
"Title": "首页",
"HelloWorld": "世界你好!",
"Tip1": "Blazor 可以帮您干啥?", "BarCode": "条码",
"UnitPrice": "价格",
"ProductName": "商品",
"Remark": "备注", "View": "查看",
"Save": "保存",
"Edit": "编辑"
}

英文 MyText.en.json

{
"Title": "Index",
"HelloWorld": "Hello,World!",
"Tip1": "How is Blazor working for you?", "BarCode": "BarCode",
"UnitPrice": "Price",
"ProductName": "ProductName",
"Remark": "Remark", "View": "View",
"Save": "Save",
"Edit": "Edit"
}

西班牙文 MyText.es.json

{
"Title": "Índice",
"HelloWorld": "¡Hola Mundo!",
"Tip1": "¿Cómo funciona Blazor para ti?", "BarCode": "Codigo",
"UnitPrice": "Precio",
"ProductName": "Producto",
"Remark": "Nota", "View": "Vista",
"Save": "Guardar",
"Edit": "Editar"
}

3.每当创建或更新本地化文本源文件时要重新生成项目。或者点一次调试后,下次调试才能生效.

会使用source generator功能生成 "Typed Text Table class"文件."本地化文本资源 JSON"文件将在输出文件夹中生成.

4.添加I18nText服务到Program.cs文件

using Toolbelt.Blazor.Extensions.DependencyInjection; // 添加这行

builder.Services.AddI18nText();  // 添加这行

5.添加代码到Index.razor文件

@inject Toolbelt.Blazor.I18nText.I18nText I18nText //注入服务

@code {
I18nText.MyText MyText = new I18nText.MyText(); protected override async Task OnInitializedAsync()
{
MyText = await I18nText.GetTextTableAsync<I18nText.MyText>(this);
}
}

如果这一步骤出现波浪线或者红字,请参考上一步骤, !!!重新生成工程,或者点一次运行!!!

6.使用

<h1>@MyText["HelloWorld"]</h1>

如果Key字符串的拼写错误也不会出问题,它只会按原样返回Key字符串,不会出现任何运行时异常.

7.完整页面代码如下

@page "/"
@inject Toolbelt.Blazor.I18nText.I18nText I18nText <PageTitle>@MyText["Title"]</PageTitle> <h1>@MyText["HelloWorld"]</h1> <table>
<tr>
<th>@MyText["BarCode"]</th>
<th>@MyText["UnitPrice"]</th>
<th>@MyText["ProductName"]</th>
<th>@MyText["Remark"]</th>
</tr>
<tr>
<td>12345</td>
<td>1.22</td>
<td>Big ball</td>
<td>来之大山深处的原始</td>
</tr>
<tr>
<td>EA888</td>
<td>35.99</td>
<td>Francisco doll</td>
<td>巴拉巴拉巴拉</td>
</tr>
</table> <SurveyPrompt Title="@MyText["Tip1"]" /> <button class="btn btn-primary">@MyText["View"]</button>
<button class="btn btn-secondary">@MyText["Save"]</button>
<button class="btn btn-danger">@MyText["Edit"]</button> <br />
<br />
<br />
<br />
<hr /> <button class="btn btn-primary" @onclick='(async ()=>await OnChangeCurrentLang("zh"))'>中文</button>
<button class="btn btn-primary" @onclick='(async ()=>await OnChangeCurrentLang("en"))'>英文</button>
<button class="btn btn-primary" @onclick='(async ()=>await OnChangeCurrentLang("es"))'>西班牙文</button> @code
{
I18nText.MyText MyText = new I18nText.MyText();
protected override async Task OnInitializedAsync()
{
MyText = await I18nText.GetTextTableAsync<I18nText.MyText>(this);
} private async Task OnChangeCurrentLang(string lang)
{
//"en", "es", "zh"
await I18nText.SetCurrentLanguageAsync(lang);
}
}

6.运行程序

I18nText 服务会自动检测 Web 浏览器的语言设置,并读取最适合检测到的语言的本地化文本资源JSON. 也可以配置中间件以及语言回落顺序等等, 请参考原始项目地址或者评论区发言询问,我会把代码继续贴出来.

很帅,有没有? 共享,一个小小的国际化多语言Blazor建好了! Happy coding !

Blazor 国际化多语言界面 (I18nText )的更多相关文章

  1. WPF 实际国际化多语言界面

    前段时候写了一个WPF多语言界面处理,个人感觉还行,分享给大家.使用合并字典,静态绑定,动态绑定.样式等东西 效果图 定义一个实体类LanguageModel,实际INotifyPropertyCha ...

  2. 为程序设置多语言界面——C#

    考虑到程序的国际化需求,需要为程序设置多语言界面. 1,新建一个资源文件,名字可以是对应界面+语言代码(MainForm.zh-CN).这样资源文件就会自动添加到对应界面下面. 2,更改界面属性Loc ...

  3. iOS 国际化多语言设置 xcode7

    iOS 国际化多语言设置 方式一: 1. 在storyboard中创建好UI,然后在 project 里面  Localizables 栏目里面,添加你需要的语言:默认是Englist; 比如这里我添 ...

  4. 更好用的excel国际化多语言导出

    不知道大家在开发中有没有遇到过『excel导出』的需求,反正我最近写了不少这种功能,刚开始利用poi,一行行的手动塞数据,生成excel,而且还有国际化需求,比如:标题栏有一列,用户切换成" ...

  5. [Spring]Spring Mvc实现国际化/多语言

    1.添加多语言文件*.properties F64_en_EN.properties详情如下: F60_G00_M100=Please select data. F60_G00_M101=Are yo ...

  6. iOS 学习笔记六 【APP中的文字和APP名字的国际化多语言处理】

    今天为新手解决下APP中的文字和APP名字的国际化多语言处理, 不多说了,直接上步骤: 1.打开你的项目,单机project名字,选中project,直接看图吧: 2.创建Localizable.st ...

  7. php gettext方式实现UTF-8国际化多语言(i18n)

    php gettext方式实现UTF-8国际化多语言(i18n) 一.总结 一句话总结: 二.php gettext方式实现UTF-8国际化多语言(i18n) 近 来随着i18n(国际化)的逐渐标准化 ...

  8. yii2 api接口 实现国际化多语言设置

    1) 在 /config/main.php 下添加如下代码: 'components' => [ 'language' => 'zh-CN', 'i18n' => [ 'transl ...

  9. Pyqt 国际化多语言支持

    国际化是指在代码设计上加入能方便的移植到其他国家和地区的特性, 给Pyqt 添加国际化支持需要五步 一.编写GUI.py 在要被翻译的text上用tr方法括起来 # -*- coding: utf-8 ...

随机推荐

  1. 路由的query参数(传参)

    路由组件不会在组件里面放自己组件标签. 案例使用嵌套组件的,但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel ...

  2. vue js计算精度问题处理,兼容XP系统

    js计算精度问题(浮点数误差,大数计算出错) JavaScript 运算时经常遇到会 0.000000001 和 0.999999999 这样奇怪的结果. 网上教程一大篇,原理请百度,抄作业往下看!! ...

  3. 在kali中安装两个版本的python

    在kali中安装两个版本的python 在kali中已经预装了两个版本的python,但是没有装pip(>︿<). 这时使用python或者python3表示python3:使用pytho ...

  4. Linux移植总结--Linux中asm和arch的软链接

    @ 目录 问题 include <asm/aaa.h>实际用的是asm-arm/aaa.h include <asm/arch/memory.h>实际用的是include/as ...

  5. 7月3日 Django 头像预览、用户上传文件操作、logging、debug_tool_bar

    1. 注册功能 1. 头像预览 //头像预览 $('#id_avatar').change(function () { console.log(this.files[0]) //找到选中的头像文件 v ...

  6. AOP详解之三-创建AOP代理后记,创建AOP代理

    AOP详解之三-创建AOP代理后记,创建AOP代理. 上篇文章已经获取到了AOP的信息,接下来就是拿着这些AOP的信息去创建代理了. 首先我们看下创建AOP代理的入口处. //这个方法将返回代理类 p ...

  7. SpringMVC实现文件上传功能

    文件上传 文件上传要求form表单的请求方式必须为post,并且添加属性enctype="multipart/form-data" SpringMVC中将上传的文件封装到Multi ...

  8. 不会DRF?源码都分析透了确定不来看?

    目录 不会DRF?源码都分析透了确定不来看? 快速使用DRF写出接口 序列化和反序列化 drf快速使用 views.py serializer.py urls.py 在settings的app中注册 ...

  9. python django对数据表的增删改查操作

    新增操作:方式1:book = BookInfo(title='西游记',price=99)book.save() 方式2:BookInfo.objects.create(title='西游记',pr ...

  10. 服务端处理 Watcher 实现 ?

    1.服务端接收 Watcher 并存储 接收到客户端请求,处理请求判断是否需要注册 Watcher,需要的话将数据节点 的节点路径和 ServerCnxn(ServerCnxn 代表一个客户端和服务端 ...