Blazor Web Assembly Localization – Language Switcher

In diesem Tutorial zeige ich wie man für Blazor Web Assembly eine Language Switcher Komponente baut. Dabei handelt es sich um die Fortsetzung meines Tutorials zur Lokalisation für Web Assembly Applikationen.

Blazor Web Assembly Localization – Language Switcher

Im letzten Teil habe ich gezeigt, wie man einer Blazor Web Assembly Applikation Übersetzungen hinzufügt. In dieser Fortsetzung zeige ich, wie man das Projekt noch um einen Language Switcher erweitert. Damit wird nicht nur die Default Sprache des Browsers verwendet, der Benutzer kann selber aus den verfügbaren Sprachen auswählen. Ich gehe davon aus, die Localization wurde wie im zuvor verlinkten Artikel der App hinzugefügt.

Konfiguration

Ich habe die Konfiguration in der Program.cs Datei erweitert. Damit wird, sofern vorhanden, die Sprache beim Start der Applikation aus dem Local Storage des Browsers gesetzt. Beim erstmaligen Start ist dieser natürlich leer.

Damit man die Sprache zum Start der Applikation setzen kann musste ich in meiner .NET 6 Applikation noch

<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>

in der *.csproj in der PropertyGroup hinzufügen. Der Language Switcher verwendet JSInteropt um mit JavaScript auf den Local Storage zuzugreifen. Damit das funktioniert muss der get und set Zugriff auf den Wert im Storage noch verfügbar gemacht werden. Deshalb habe ich in der wwwroot/index.html Datei folgenden Code im head Tag hinzugefügt:

@using System.Globalization
@inject IJSRuntime _jsRuntime;
@inject NavigationManager _navigation;

<div class="form-group">
    <select class="form-control" @bind="selectedLang">
    @foreach (var langCode in langCodes)
    {
        <option value="@langCode.Code">@langCode.DisplayName</option>
    }
    </select>
    <img src="@selectedLangImage" />
</div>

<button class="btn btn-primary" @onclick="ChangeLanguage">Change Language</button>

@code{
    private List<LanguageCodes> langCodes = new List<LanguageCodes>()
    {
        new LanguageCodes
        {
            Code = "en",
            DisplayName = "English",
            LanguageFlag = "/img/flags/english.gif"
        },
        new LanguageCodes
        {
            Code = "de",
            DisplayName = "German",
            LanguageFlag = "/img/flags/german.gif"
        }
    };

    private string selectedLang = string.Empty;
    private string selectedLangImage = string.Empty;

    protected override void OnInitialized()
    {
        selectedLang = CultureInfo.CurrentCulture.Name;
        foreach(var langCode in langCodes)
        {
            if(selectedLang == langCode.Code)
            {
                selectedLangImage = langCode.LanguageFlag;
                break;
            }
        }
    }

    private async Task ChangeLanguage()
    {
        await _jsRuntime.InvokeAsync<string>("appCulture.set", selectedLang);
        _navigation.NavigateTo(_navigation.Uri, forceLoad:true);
    }
}

Der Switcher legt selbst alle verfügbare Sprachen hard-coded fest  (das könnte man eventuell noch in eine Konfigurationsdatei auslagern). Im HTML Code wird nur ein select mit  den Informationen aus der Liste and LanguageCodes dargestellt, darunter ein Image. Als Inhalte dienen die im Language Code definierten Werte. Die definierten Methoden zeigen wie man den Switcher beim Initialisieren auf die aktuell in der App eingestellte Sprache setzt und wie man bei einer Änderung der Einstellung die Sprache setzt.

Ohne CSS Magic sieht das bei mir so aus:

Fazit

Ich habe gezeigt wie man in wenigen Schritten einen Language Switcher einer Blazor Web Assembly App hinzufügt. Damit kann der Benutzer nun selber seine bevorzugte Sprache einstellen und muss nicht die verwenden, die der Browser in seinen Einstellungen vorgibt.