Persilsoft.Localizer.Blazor 1.0.10

Persilsoft.Localizer.Blazor

A simple localization tool for Blazor apps

You can configure the culture in your Blazor application as follows, without needing to use this package.

var host = builder.Build();
culture = CultureInfo.CreateSpecificCulture("es-PE");
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

await host.RunAsync();

However, the package offers you certain additional tools and configurations.
For example, it provides a language selector that you could place in the MainLayout component.

@inherits LayoutComponentBase
@using Persilsoft.Localizer.Blazor.Components

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <CultureSelector SupportedCultures="supportedCultures" />
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">@Messages.About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    private string[] supportedCultures;

    protected override async Task OnInitializedAsync()
    {
        supportedCultures = new string[] { "es-PE", "en-US" };

        await Task.CompletedTask;
    }
}

Each time the user makes a change in the selector, the selected culture will be stored in the localStorage with the key culture.

Http Handler

If your Blazor application consumes a WebApi that applies localization settings based on the 'Accept-Language' header of HTTP requests, then you could use an HTTP client configurator provided by this package to intercept requests and add this header, taking the culture from the culture key in localStorage. With this, you'll ensure that your Blazor application integrates language configuration in both the Backend and the Frontend.

Let's assume we have the following Gateway to communicate with the WebApi:

public class ApiGateway(HttpClient client)
{
    public async Task<string> GetWelcomeMessage() =>
        await client.GetStringAsync("/localizer/message");
}

We can create an extension method to register our Gateway and configure the Http client to use the request handler.

using Persilsoft.Localizer.Blazor.HttpHandler;
using ServiceCollectionExtensions;

public static class DependencyContainer
{
    public static IServiceCollection AddGateway(this IServiceCollection services,
        Action<HttpClient> httpClientConfigurator)
    {
        Builder.AddLocalizationDelegatingHandler();
        services.AddHttpClient<ApiGateway>(httpClientConfigurator)
            .AddHttpMessageHandler<LocalizationDelegatingHandler>();

        return services;
    }
}

Now, we simply register it in the dependency container.

Action<HttpClient> httpClientConfigurator = client =>
{
    client.BaseAddress = new Uri("https://localhost:7025");
};
builder.Services.AddGateway(httpClientConfigurator);

Gateway demo

Here is an example using the Gateway:

@page "/"

<PageTitle>Localization in Blazor</PageTitle>

<h1>Blazor Demo</h1>

<button class="btn btn-primary" @onclick=Welcome_Click>Welcome</button>
<hr />
@Welcome

@code {
    private string Welcome;

    [Inject]
    private ApiGateway Gateway { get; set; }

    private async Task Welcome_Click()
    {
        Welcome = await Gateway.GetWelcomeMessage();
    }
}

Keep in mind that you can also localize the text of your Blazor pages and components using the Persilsoft.Localizer package.