Changing locale not being applied in Blazor server-side app

Question

I have implemented localization of a Blazor Server-side app (NET6) as described here . I created 3 resx files:

Resources.en-US.resx
Resources.de-DE.resx
Resources.sv-SE.resx

I added the following in Startup.cs just below services.AddMvc in the ConfigureServices method:

services.AddLocalization(options => options.ResourcesPath = "Resources");

And the following in the Configure method below app.UseRouting();

var supportedCultures = new[] { "en-US", "de-DE", "sv-SE" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

app.UseRequestLocalization(localizationOptions);

I then created an empty razor component, added the the culture controller as described in the article and modified my razor components to have the following:

@inject IStringLocalizer<Empty> localizer

@(localizer["LanguageSelectLocale"])

The controller action to change the locale is being called, but the locale is not being changed. Also, with the above setup, I'm setting my keys in the pages and not the localized strings.

I would like to use one resource file per locale.

Am I missing something?

Answer 1

According to the Resource file naming, you could find

The Resources are named for the full type name of their class minus the assembly name. For example, a French resource in a project whose main assembly is LocalizationWebsite.Web.dll for the class LocalizationWebsite.Web.Startup would be named Startup.fr.resx. A resource for the class LocalizationWebsite.Web.Controllers.HomeController would be named Controllers.HomeController.fr.resx. If your targeted class's namespace isn't the same as the assembly name you will need the full type name. For example, in the sample project a resource for the type ExtraNamespace.Tools would be named ExtraNamespace.Tools.fr.resx.

In the sample project, the ConfigureServices method sets the ResourcesPath to "Resources", so the project relative path for the home controller's French resource file is Resources/Controllers.HomeController.fr.resx. Alternatively, you can use folders to organize resource files. For the home controller, the path would be Resources/Controllers/HomeController.fr.resx. If you don't use the ResourcesPath option, the.resx file would go in the project base directory. The resource file for HomeController would be named Controllers.HomeController.fr.resx. The choice of using the dot or path naming convention depends on how you want to organize your resource files.

The reason why your application is not working well, is you use the wrong name for the resource file.

For example, if you want to set Localization for CultureExample2.razor, the resource name should be Pages.CultureExample2.en-US.resx , Pages.CultureExample2.es-CL.resx inside the resource file and then it will work well.

Component:

@page "/culture-example-2"
@using System.Globalization
@inject IStringLocalizer<CultureExample2> Loc

<h1>Culture Example 2</h1>

<p>
    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
</p>

<h2>Greeting</h2>

<p>
    @Loc["Greeting"]
</p>

<p>
    @greeting
</p>

@code {
    private string? greeting;

    protected override void OnInitialized()
    {
        greeting = Loc["Greeting"];
    }
}

Like below:

---

Update create two new resource:

Create a new class:

public class SharedResource
{
}

Usage:

@page "/culture-example-2"
@using System.Globalization
@inject IStringLocalizer<SharedResource> Loc

<h1>Culture Example 2</h1>

<p>
    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
</p>

<h2>Greeting</h2>

<p>
    @Loc["Greeting"]
</p>

<p>
    @greeting
</p>

@code {
    private string? greeting;

    protected override void OnInitialized()
    {
        greeting = Loc["Greeting"];
    }
}