Blazor Web Assembly Localization

In diesem Tutorial zeige ich wie man für Blazor Web Assembly Localization hinzufügt. Eine Applikation auf Englisch kann man mit einigen wenigen zusätzlichen Codezeilen in jede beliebige Sprache übersetzen. Dank Razor Komponenten funktioniert das auch für einzelne Komponenten individuell.

Blazor Web Assembly Localization

In einem meiner letzten Artikel habe ich gezeigt wie man Übersetzung in einer Blazor Server App hinzufügt. Wie das im Detail für eine Web Assembly Applikation funktioniert zeigen die folgenden Absätze. Für die Lokalisierung benötigt man das NuGet Paket

Microsoft.Extensions.Localization

Dieses fügt man dem Projekt in gewohnter Weise (über die Console mit Install-Package oder dem NuGet Manager in Visual Studio) hinzu.

Konfigurieren

Eingefügt und konfiguriert wird das Service in der Program.cs Datei:

Über die options setze ich den Pfad in dem die Übersetzungsresourcen zu finden sind. In meinem *.csproj liegen diese im Resources Ordner. Weiters setze ich bei Programmstart die default culture auf deutsch. Das benötige ich nur in der Entwicklungsphase. Später soll die Sprache aus den Einstellungen des Browsers kommen und über einen Language Switcher umstellbar sein. Fürs erste ist die Applikation in Englisch und über die Übersetzungsdateien auf Deutsch (*.de.resx) werden einzelne Texte übersetzt. Die Struktur im Projekt sieht wie folgt aus:

Übersetzen

Wie übersetzt man nun Razor Komponenten? Anhand meiner Login.razor möchte ich das direkt an einem Beispiel erläutern. Damit man die Übersetzungsfunktionen nutzen kann muss man das NuGet Paket über eine Using Direktive einbinden. Das kann man in jeder Datei machen, da wir aber ohnehin die komplette Applikation übersetzen wollen eignet sich dazu die _Imports.razor Datei:

@using Microsoft.Extensions.Localization

In den einzelnen Komonenten holen wir uns den Localizer über die Dependency Injection. Das geht für die Login Seite wie folgt:

@inject IStringLocalizer<Login> translate

über diese Instanz lassen sich nun in der *.razor Datei alle Strings übersetzen. Eine solche Übersetzung erreicht man mit:

@translate["Login"]

beispielsweise für den Text „Login“. Damit diese Übersetzung auch klappt muss in der entsprechenden Resource Datei der String samt Übersetzung vorhanden sein. Gibt eine keine Entsprechung, dann wird der Text „Login“ ausgegeben. Das ist auch der Grund, warum ich für den englischen Text keine separate *.resx Datei benötige.

Fazit

Ich habe gezeigt wie einfach man für Blazor Web Assembly Localization hinzufügt. Die paar Zeilen Code erweitern die Reichweite und die Akzeptanz der App für die User. Übersetzung ist erst der erste Schritt. Dank einfach zu verwendender Pakete lässt sich eine komplette Globalisierung der App ähnlich einfach bewerkstelligen.