Blazor Localization - how do I set the locale for a session/circuit?

David Thielen 2,796

Hi all;

I want to save off the locale the user selects as part of the user object. This way, as they continue using the website, including returning to the site, it is set to the locale they set.

I've got localization working as illustrated in this post (works perfectly). But it is built around the user selecting the locale each time. How can I set it for the session/circuit?

In other words, I load the user object and User.Locale has the value "en-US". How do I now have the localization give me the en strings?

And related question, how do I use that locale so that DateTimes and numbers are formatted according to the selected region?

thanks - dave

george727 0 Reputation points

2023-10-10T17:13:08.45+00:00

To set the user's preferred locale for the session or circuit and use it for localization as well as formatting DateTimes and numbers accordingly, you can follow these steps:

Store Locale in User Object: As you mentioned, you can save the user's selected locale in their user object. This way, you can retrieve it when needed.

Initialize Session/Circuit Locale: In your web application framework (such as Flask, Django, or a front-end framework like React or Vue.js), you should set the locale for the session or circuit based on the user's preference. This typically involves configuring the locale for the current session or request context.

In Flask, you can use Flask's session to store the user's locale selection. When a user logs in or selects a locale, store it in session['locale']. Then, when rendering templates or localizing text, retrieve session['locale'] and set it accordingly.

In a front-end framework like React or Vue.js, you can use a state management library (like Redux or Vuex) to store and manage the user's selected locale. Whenever the user selects a locale, update the state with the chosen locale and use it for rendering.

Localization: To use the selected locale for localization, you should have a mechanism to load translation strings or resources based on the user's locale preference. This might involve using a localization library or framework like i18next in JavaScript or Flask-Babel in Flask.

Formatting DateTimes and Numbers: To format DateTimes and numbers according to the selected region (locale), you can use the built-in localization features of your programming language or framework.

In Python, you can use the locale module to set the locale for formatting DateTimes and numbers. For example, you can use locale.setlocale(locale.LC_TIME, 'en_US.UTF-8') to set the locale for date and time formatting to US English.

In JavaScript, you can use the Intl object for formatting. For example, Intl.DateTimeFormat and Intl.NumberFormat can be configured with the selected locale.

Remember that setting the locale is not just about translation but also affects how dates, times, numbers, and currency are displayed. Make sure to apply the selected locale consistently throughout your application for a seamless user experience.

Regards : <a href="https://fontbots.com/ " >fontbots</a>
David Thielen 2,796 Reputation points

2023-10-10T17:50:00.53+00:00

Hi;

Can you answer the above question for Blazor server please?

thanks - dave

1 answer

Ruikai Feng - MSFT 2,556 Reputation points Microsoft Vendor

2023-10-10T08:05:33.6366667+00:00
Hi,@David Thielen,You could add a custom culture provider follow this document

var localizationOptions = new RequestLocalizationOptions() .SetDefaultCulture(supportedCultures[0]) .AddSupportedCultures(supportedCultures) .AddSupportedUICultures(supportedCultures) .AddInitialRequestCultureProvider((new CustomRequestCultureProvider(async context => { var cultureclaim = context.User.Claims.Where(x => x.Type == "Culture").FirstOrDefault(); var result = new ProviderCultureResult(cultureclaim?.Value??"en-US"); return await Task.FromResult(result); }))); app.UseRequestLocalization(localizationOptions);

I scaffold Identity in the example, removed the selector,registed a user with Culture claim has value: es-CL

Now the result:
Please sign in to rate this answer.
David Thielen 2,796 Reputation points

2023-10-10T16:49:33.63+00:00

Doesn't that set the culture for all users? Maybe I'm not understanding something but I don't see how the culture gets set per user. Which I think means per session/circuit.

And how is the culture initially set for a session/circuit?

thanks - dave

Ruikai Feng - MSFT 2,556 Reputation points Microsoft Vendor

2023-10-11T09:37:35.67+00:00

Hi,@David Thielen,

Doesn't that set the culture for all users?

---That would only set culture for current user.It's didderent instance of localizer for different users,the lifetime isn't Singleton.You could open two browers and have a try

And how is the culture initially set for a session/circuit?

---all components are rendered on _Host.cshtml,you would always send Http request in initial,and the middleware app.UseRequestLocalization() would set the value for the AcceptLanguage Header provider when it handles request
Sign in to comment

Share via

Blazor Localization - how do I set the locale for a session/circuit?

1 answer