question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blazor wasm Localization

See original GitHub issue

Describe the bug

Localization for Blazor wasm does not work correctly, if user uses Blazor + Asp.Net core host + IdentityServer. In documentation for Blazor I found an example for localization in wasm (LocSample). Is this project wasm hasn’t any extra hosts and everything work perfect. In my project I use 4 culture: en, de (or de-DE), fr, ru. Firefox and Edge shows the translation only for en (because it’s standard language from a *.resx file) and russian. Google Chrome shows translation correctly for all languages.

To Reproduce

  • VS -> create new project => blazor => wasm + asp.net core hosted + Identity
  • Add nuget package “Microsoft.Extensions.Localization - 3.1.3”
  • Add in Program.cs to set the culture:
builder.Services.AddLocalization();
var host = builder.Build();
var jsInterop = host.Services.GetRequiredService<IJSRuntime>();
var result = await jsInterop.InvokeAsync<string>("blazorCulture.get");
if (result != null)
{
var culture = new CultureInfo(result);
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;
}
  • Create some resources for a component: Counter.resx, Counter.de.resx, Counter.ru.resx
  • Add code to index.html to store user culture
<script>
   window.blazorCulture = {
     get: () => window.localStorage['BlazorCulture'],
     set: (value) => window.localStorage['BlazorCulture'] = value
   };
 </script>
  • Add code to Counter.razor, to select culture and show result
@using  System.Globalization
@inject IJSRuntime JSRuntime
@inject NavigationManager Nav
@inject Microsoft.Extensions.Localization.IStringLocalizer<Counter> Loc
<h1>@Loc["String1"]</h1>
<h1>@Loc["String1"]</h1>
<select @bind="Culture">
  @foreach (var culture in supportedCultures)
  {
    <option value="@culture">@culture.DisplayName</option>
  }
</select>

@code {
  CultureInfo[] supportedCultures = new[]
  {
        new CultureInfo("en"),
        new CultureInfo("de"),
        new CultureInfo("ru"),
    };

  CultureInfo Culture
  {
    get => CultureInfo.CurrentCulture;
    set
    {
      if (CultureInfo.CurrentCulture != value)
      {
        var js = (IJSInProcessRuntime)JSRuntime;
        js.InvokeVoid("blazorCulture.set", value.Name);

        Nav.NavigateTo(Nav.Uri, forceLoad: true);
      }
    }
  }
}

Only Chrome shows right translation.

Code: https://github.com/tj-jyk/BlazorApp4

Further technical details

  • Microsoft Windows [Version 10.0.18362.778] (Ru. Pro)
- dotnet --info 
Version:   3.1.201
 Commit:    b1768b4ae7

 OS Name:     Windows
 OS Version:  10.0.18362
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.1.201\

Host (useful for support):
  Version: 3.1.3
  Commit:  4a9f85e9f8

.NET Core SDKs installed:
  3.1.100 [C:\Program Files\dotnet\sdk]
  3.1.102 [C:\Program Files\dotnet\sdk]
  3.1.201 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

  • The IDE (Microsoft Visual Studio Community 2019 16.5.4)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

github_iconTop Results From Across the Web

ASP.NET Core Blazor globalization and localization
This article explains how to render globalized and localized content to users in different cultures and languages. For globalization, Blazor ...
Read more >
Localized Application in Blazor WebAssembly
Localization is the process of customizing applications to display and operate in a specific language UI. This can be implemented in Blazor ......
Read more >
Localization in Blazor WebAssembly Applications
Localization is the process of adapting our globalized application which is already prepared to support localizability. This means that we want ...
Read more >
Blazor WebAssembly I18n from Start to Finish
WebAssembly (abbreviated as Wasm) is a low-level assembly-like language that has a compact-binary format and can run on all modern web browsers.
Read more >
Localization (Multi-Language) in Blazor components
Localization is the process of translating the application resources into different languages for specific cultures. You can localize the Syncfusion Blazor ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found