Switch from Microsoft Localization to Blazorise Localization

[NeoCoderMatrix86]

Hello,

I'm trying to switch from Microsoft localization to Blazorise localization, since there should be no need to reload the whole application.

I have a simple example:

@inject IJSRuntime JSRuntime
@inject NavigationManager NavManager
@inject ITextLocalizerService LocalizationService
@inject ITextLocalizer localizer
@inject OptionsController optionsController

@localizer["CultureSetting"]

<Select TValue="String" SelectedValueChanged="OnCultureSelectionChanged" SelectedValue="@optionsController.Options.CultureName" Style="width: 150px; display: inherit;">
    @foreach (var culture in LocalizationService.AvailableCultures)
    {
        <SelectItem Value="@culture">@culture.DisplayName</SelectItem>
    }
</Select>

@code{

    private async Task OnCultureSelectionChanged(String value)
    {
        optionsController.Options.CultureName = value;
        await optionsController.SaveOptions();
    }
}

Programm.cs:

builder.Services.AddBlazorise(options =>
            {
                options.ChangeTextOnKeyPress = true;
                options.DelayTextOnKeyPress = true;
                options.DelayTextOnKeyPressInterval = 300;
            })
            .AddBootstrapProviders();

But on load, I get the exception:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot provide a value for property 'localizer' on type 'AudioCuesheetEditor.Shared.MainLayout'. There is no registered service of type 'Blazorise.Localization.ITextLocalizer'.
System.InvalidOperationException: Cannot provide a value for property 'localizer' on type 'AudioCuesheetEditor.Shared.MainLayout'. There is no registered service of type 'Blazorise.Localization.ITextLocalizer'.
at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass6_0.g__Initialize|2(IServiceProvider serviceProvider, IComponent component)
at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateComponent(Type componentType)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

What am I doing wrong?

[stsrki]

You cannot inject the default ITextLocalizer localizer. It must have a type definition.

Example 1

[Inject] protected ITextLocalizer<Carousel> Localizer { get; set; }

Notice <Carousel>. That is the name of the component or class that is localized. And to localize it, it needs to have json files as embedded resources under the Resources/Localization/Carousel.

Example 2

Example 3

and JSON content

{
  "culture": "en",
  "translations": {
    "Next": "Next",
    "Previous": "Previous"
  }
}

Obviously, if you want your custom page or component then you need to have the same structure in your project, eg Resources/Localization/YourComponent.

[NeoCoderMatrix86]

Ok, thanks for the good documentation, now it is clear to me, how it works. Just 2 more questions:

1. I have only german and english translation in my project, but the code gives me all cultures as selection:
   

<Select TValue="String" SelectedValueChanged="OnCultureSelectionChanged" SelectedValue="@optionsController.Options.CultureName" Style="width: 150px; display: inherit;">
    @foreach (var culture in LocalizationService.AvailableCultures)
    {
        <SelectItem Value="@culture">@culture.DisplayName</SelectItem>
    }
</Select>

How can I make shure, that only the 2 languages are selectable?

2. Is there any specific detail in concept, why I can use only ITextLocalizer for each component seperatly? In my opinion it is a bit overcomplicated in exchange for the default localizer of Microsoft (only one Resourcefile is needed and thats it).

[stsrki]

It's because it is picking on all currently implemented cultures from any Blazorise component and then joining them. If you don't need them all your only option is to build a menu manually. Since you only have two items it shouldn't be a problem.

[Jinjinov]

If I understand correctly, for a custom page / component, we need a ITextLocalizer<> for each one? and a separate JSON file for each one? so, for 10 pages we need 10 English JSON files and 10 German JSON files? could we have only 1 English and 1 German JSON file for the entire app?

[stsrki]

Yes, you can have it. You can place all your localization JSON files under the MyMainAppComponent subfolder. Then, create the razor component with the same name, MyMainAppComponent.razor.

The last step is to inject ITextLocalizer<MyMainAppComponent> where you want to use it.