Need help with Toolbelt.Blazor.I18nText?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jsakamoto
131 Stars 16 Forks Mozilla Public License 2.0 147 Commits 13 Opened issues

Description

The class library that provides the ability to localize texts on your Blazor app!

Services available

!
?

Need anything else?

Contributors list

# 131,171
C#
Visual ...
Shell
razor
135 commits
# 233,757
c-sharp
reactiv...
Xamarin
F#
2 commits
# 304,418
Shell
xamarin...
prism
WPF
1 commit

Blazor Internationalization(I18n) Text NuGet Package

Summary

This package is an another way to localize text in your Blazor Web App!

movie.1

Features

  • It works on both Blazor Server and Blazor WebAssembly.
  • In Blazor WebAssembly, it works without the Server-Side process (requires only static contents HTTP server).
  • You can develop with an only plain text editor - No require .resx
  • Static Typing - IntelliSense, Code Hint...
  • It also works well on Blazor components libraries. You can package the library that's localized with "Blazor I18nText" as a NuGet package.

Notice

Now, Blazor WebAssembly has been started the localization support officially since v.3.2 preview 4. It is based on .NET Standard

IStringLocalizer
and satellite assemblies with
.resx
.

However, I will continue to develop and maintain this package, because this package still has some advantages against .NET standard way.

pros/cons

Supported versions

"Blazor I18n Text" ver.9.x supports following Blazor versions:

  • Blazor Server App v.3.0.0 ~ .NET 5
  • Blazor WebAssembly App v.3.2.0 ~ .NET 5

Quick Start

Step.1 - Add Package

Add

Toolbelt.Blazor.I18nText
NuGet package to your Blazor app project, like this.
$ dotnet add package Toolbelt.Blazor.I18nText

Step.2 - Create localized text source files as JSON or CSV

Add localized text source files for each language in an

i18ntext
folder under the project folder.

The localized text source files must be simple key-value only JSON file like a bellow example,

{
  "Key1": "Localized text 1",
  "Key2": "Localized text 2",
  ...
}

or, 2 columns only CSV file without header row like a bellow example.

Key1,Localized text 1
Key2,Localized text 2

NOTICE - The encoding of the CSV and JSON file must be UTF-8.

And, the naming rule of localized text source files must be bellow.

..{json|csv}

fig.1

Step.3 - Build the project whenever localized text source files are created or updated.

After creating or updating those localized text source files, you have to build your Blazor app project.

After building the project, "Typed Text Table class" C# files will be generated in the

i18ntext/@types
folder, by the building process.

And also, "Localized Text Resource JSON" files will be generated in the output folder, too.

fig.2

NOTE - If you want to do this automatically whenever those localized text source files (.json or .csv) are changed, you can use

dotnet watch
command with the following arguments.
$ dotnet watch msbuild -t:CompileI18nText

After entry this dotnet CLI command, the command stay in execution and watch the changing of localized text source files. If it detects the changing of localized text source files, then the dotnet CLI re-compile localized text source files into "Typed Text Table class" and "Localized Text Resource JSON" files.

fig.2-2

Step.4 - Configure your app to use I18nText service

Edit the "Startup" class to register "I18nText" service, like this.

// in your Startup.cs
using Toolbelt.Blazor.Extensions.DependencyInjection; // 

Your project is Blazor WebAssembly v.3.2+, you should edit "Program" class to do this.

// in your Program.cs
using Toolbelt.Blazor.Extensions.DependencyInjection; // 

Step.5 - Get the "Text Table" object in your Blazor component

Open your Blazor component file (.razor) in your editor, and do this:

  1. Inject
    Toolbelt.Blazor.I18nText.I18nText
    service into the component.
@inject Toolbelt.Blazor.I18nText.I18nText I18nText
  1. Add a filed of the Text Table class generated from localized text source files, and assign the default instance.
@code {
  I18nText.MyText MyText = new I18nText.MyText();

NOTE - The namespace of the Text Table class is

 + 
"I18nText"
.
  1. Override
    OnInitiallizedAsync()
    method of the Blazor component, and assign a Text Table object that's a return value of
    GetTextTableAsync()
    method of
    I18nText
    service instance to the Text Table field.
protected override async Task OnInitializedAsync()
{
  MyText = await I18nText.GetTextTableAsync(this);

fig.4

Step.6 - Use the Text Table

After doing these steps, you can reference a field of the Text Table object to get localized text.

If you are using Visual Studio in Windows OS and Blazor extensions is installed in that Visual Studio, you can get "IntelliSense" and "Document comment" support.

movie.2

Note: Text Table object allows you to get localized text by key string dynamically, with indexer syntax, like this.

@MyText["HelloWorld"]

If you make some mistakes that typo of key string, it will just return the key string as is without any runtime exceptions.

Step.7 - Run it!

Build and run your Blazor app.

The I18nText service detects the language settings of the Web browser, and reads the localized text resource JSON which is most suitable for the language detected.

fig.5

More information for in case of Blazor server app

I recommend enabling "Request Localization" middleware on the Blazor server app, by like the following code.

// in the Startup class
...
public void ConfigureServices(IServiceCollection services)
{
  services.Configure(options => {
    var supportedCultures = new[] { "en", "ja" };
    options.DefaultRequestCulture = new RequestCulture("en");
    options.AddSupportedCultures(supportedCultures);
    options.AddSupportedUICultures(supportedCultures);
  });
  ...

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseRequestLocalization(); ...

This code makes the result of server-side pre-rendering to be suitable for "Accept-Language" header value in a request from clients.

Limitations

The following features are not supported in this version of

I18Text
library.

  • Integration with ASP.NET Core localization (
    IStringLocalizer
    support)
  • Localize validation message
  • Plural form support
  • Text formatting by place holder.
  • Integration with
    System.Globalization.Culture.CurrentUICulture
    .

The following features will not be supported forever, because these features are not the scope of this library, I think.

  • Formatting of date, time, currency. (These features will be provided by
    System.Globalization.Culture
    .)

Configuration

API Reference

Please see also "API Reference" on GitHub.

Release Notes

Release notes is here.

License

Mozilla Public License Version 2.0

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.