To localize the text in a Blazor WebAssembly (client-side) app, follow these steps:
1. Create a Blazor WebAssembly project and add the Microsoft.Extensions.Localization NuGet package using NuGet Package Manager.
2. Add the culture resource files in the Shared/ResourceFiles folder and add a drop-down menu to switch between localized text.
[CultureDropDown.razor]
@using System.Globalization
@inject IJSRuntime JSRuntime
@inject NavigationManager UrlHelpers
<strong>Culture:</strong>
<select class="form.control" @bind="Culture" style="width: 140px; margin-left: 10px;">
@foreach (var culture in supportedCultures)
{
<option value="@culture">@culture.DisplayName</option>
}
</select>
@code
{
CultureInfo[] supportedCultures = new[]
{
new CultureInfo("en-US"),
new CultureInfo("es-ES"),
new CultureInfo("de")
};
CultureInfo Culture
{
get => CultureInfo.CurrentCulture;
set
{
if (CultureInfo.CurrentCulture != value)
{
var jsInvoke = (IJSInProcessRuntime)JSRuntime;
jsInvoke.InvokeVoid("blazorCulture.set", value.Name);
UrlHelpers.NavigateTo(UrlHelpers.Uri, true);
}
}
}
}[MainLayout.razor]
<div class="top-row px-4">
<CultureDropDown />
. . .
</div>3. Now add the localization configuration and get the current locale’s culture using JSInterop, which is stored in browser window’s local storage.
[Program.cs]
…
using Microsoft.JSInterop;
using System.Threading.Tasks;
namespace BlazorLocaleWASM
{
public class Program
{
public static async Task Main(string[] args)
{
…
…
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;
}
await host.RunAsync();
}
}
}[index.html]
<html>
<head>
. . .
. . .
</head>
<body>
...
. . .
<script>
window.blazorCulture = {
get: () => window.localStorage['BlazorCulture'],
set: (value) => window.localStorage['BlazorCulture'] = value
};
</script>
</body>
</html>4. Add the text/content for localization in the Index.razor file.
[Index.Razor]
@page "/"
@using BlazorLocaleWASM.Shared.ResourceFiles
@inject Microsoft.Extensions.Localization.IStringLocalizer<Resource> Locale
<h1>@Locale["Hello world"]</h1>
@Locale["Welcome to your new app"]
<SurveyPrompt Title="How is Blazor working for you?" />5. By default, Blazor WebAssembly carries minimal globalization resources required to display values, such as dates and currency, in the user’s culture. Applications that must support dynamically changing the culture should configure BlazorWebAssemblyLoadAllGlobalizationData in the project file.
[Project file]
<PropertyGroup> <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>6. Run the application.
You can download the reference sample here.
Please refer to this link for more information.
Share with