aspnetcore: Blazor Server Side Localization not working

Trying to stand up a super simple example of Blazor Server Side with Localization/Translation support.

I posted the spike here: https://github.com/aherrick/BlazorServerSideLocalization

It appears in my Index.razor view @inject IViewLocalizer L is always null. I have a Resources folder with a Pages.Index.en.resx

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 20 (3 by maintainers)

Most upvoted comments

@aherrick not really. I’ll leave this as a question for community members to help you out with.

Localization is critical for us. I really hope MS comes up with official guidance on this soon. I also hope that the mechanism will be server/client side agnostic as well as not impact unit testing.

I’d like to expand on @SeppPenner post, as I found the following to work based on the browser’s preferred language.

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
   services.AddRazorPages();
   services.AddServerSideBlazor();

   // localization
   services.AddLocalization(options => options.ResourcesPath = "Resources");
   var supportedCultures = new List<CultureInfo>{
   	new CultureInfo("en-US"),
   	new CultureInfo("fr")
   };
   services.Configure<RequestLocalizationOptions>(options =>
   {
   	options.DefaultRequestCulture = new Microsoft.AspNetCore.Localization.RequestCulture("en");
   	options.SupportedUICultures = supportedCultures;
   	options.SupportedUICultures = supportedCultures;
   });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   if (env.IsDevelopment())
   {
   	app.UseDeveloperExceptionPage();
   }
   else
   {
   	app.UseExceptionHandler("/Error");
   	// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
   	app.UseHsts();
   }

   // use the browser's preferred language for localization
   app.UseRequestLocalization();
   app.UseHttpsRedirection();
   app.UseStaticFiles();

   app.UseRouting();

   app.UseEndpoints(endpoints =>
   {
   	endpoints.MapBlazorHub();
   	endpoints.MapFallbackToPage("/_Host");
   });
}

Pages/Index.razor

@page "/"
@inject IStringLocalizer<Index> L

<h1>@L["App Home"]</h1>

Resource files

/Resources …/Pages …Index.fr.resx …Index.resx

OK - it would be nice if there was some documentation or examples on how to do Localization with Blazor.

What about IStringLocalizer<>? I already asked a similar question here: https://github.com/aspnet/AspNetCore/issues/12277.

@page "/"
@using  Microsoft.Extensions.Localization;
@inject IStringLocalizer<Index> L

<h1>Hello, world!</h1>

Welcome to your new app.

<h1>@L["Hello"]</h1>

@code {
}

Don’t forget to add

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

to your ConfigureServices method in the Startup file.

Translations here is a folder in your project on root level containing all the *.resx files used for your view localization.

@aherrick

I whipped together something very crude last week as I ran into the same problem and I needed a quick fix for it. I ended up with something along the lines of the following. Maybe it can send you on the right track for your needs.

See this gist: https://gist.github.com/christiansparre/5576907ad391b972581714f7564674b7

  • There is a TextService class pulling strings from resource files
  • There is a LocalizedText blazor component displaying the text in the currently selected culture
  • There is a CultureChanger class that can be used to change the “current” culture, that also has an event the LocalizedText component listens for