Localization in Blazor Server - How To Change Languages and Cultures
HTML-код
- Опубликовано: 27 июл 2024
- Blazor Server is an excellent choice for a web application. But unless your audience only speaks one language, you probably need to consider localization. Localization is the ability to present an application in the culture of the user. This is more than just about translating text. Different cultures have different currencies, different ways of representing numbers, different date formats, and more. In this video, we are going to apply localization to a Blazor Server app in a way that will present the user with the site in their culture, but also give them the option of changing the culture of the site.
Source Code: leadmagnets.app/?Resource=Bla...
Mailing List: signup.iamtimcorey.com
Purchase Courses: iamtimcorey.com
0:00 - Intro
1:36 - Creating Blazor Server App
3:05 - Localization in Blazor explained
9:28 - NuGet reference
10:00 - Project configuration: startup and appsettings
28:24 - Adding MVC controller: Cookies and LocaRedirect
35:10 - Adding Razor Component: code behind culture change
46:06 - Adding Razor Component: building dropdown menu
55:07 - Cookie information
58:04 - Resource files: App.resx
1:15:22 - Summary and concluding remarks
Chapter breakdown was user contributed!
![Localization and Multi Languages UI in Blazor WebAssembly [Blazor Topics] | AK Academy](/img/1.gif)
I literally wasted an hour searching for two minor mistakes with my localization yesterday, and then you uploaded this video. Thank you!
Glad I could help! Timing is everything! LOL
Great tutorial, implemented it while watching almost without stopping! Excellent explained... Keep going!
Great stuff! We're branching out into two additional languages. Really useful. 👏👏
Glad it was helpful!
I was talking about my friend about something like this a few days ago I am glad you made a video about it. hope you cover about identity soon or authentication and authorization in general :)
That is high on my priority list.
@@IAmTimCorey I'm very much interested in a tutorial where Identity Server is used as an API and not directly included in the blazor ui as you see in most examples or tutorials.
In my setup my UI talks to my API to load data. So only my API talks to the dbcontext (seperate project). But to include Identity Server in my UI I had to add a reference to the dbcontext directly and i don't like it that way. It should also pass via the API.
Thanks Tim, you are always here when I need help :D
You are welcome.
Wonderfull video. Solved my problem at work. You are great Tim. Keep it up.
Glad to help.
Thank you for the video and detailed explanation! Your video helped me to finally figure out localization in blazor
Glad it helped!
I am so glad I saw this. I really like the supped up layout of blazer pages.
I'm so glad!
I have no idea why I just spent the last hour and twenty minutes watching a video on something I already know how to do. But I don't regret it.
I'm glad it was enjoyable.
Super tutorial. Made me be able to change the language on my Blazor site!
Glad it helped!
Thank you very much for your work, I will say that you are a great teacher and your actions inspire good work.
You are welcome.
Hey, just stopped by to give you a thumbs up for all your contributions to the .net world.
Thanks
This is super awesome video.
Thank you Tim for the precious information sharing.
.Net is the best of the best ever.
Glad you enjoyed it!
Really helpful, works like a dream thank you sir.
Great to hear!
Great video! Thank you very much.
You are welcome.
Hi Tim, Great video thank you
You are welcome.
Thanks for this great one Tim, fan from India
Glad you enjoyed it!
Great work as always @IAmTimCorey *ThumbUp
Thanks again!
Great video as usual Tim. I understood what you were teaching. My question is more fundamental. Why does the click event for the setting need to be handled with a controller. Why can it not be handled by the click event of the drop down list directly. I use controllers for build REST services, but for this example, I do not understand why it is required. Thx.
Thank you so much for such a wonderful video. Kudous to your efforts
You are welcome.
Great Video, thanks for covering this topic, for some reason this didn't work the same on firefox, but chrome sure works.
Good to hear and thanks for sharing the info.
I can confirm this, try to find the problems for hours, without any success :( Chrome MS Edge works fine.)
Also, there is no cookies in Firefox for this project (others, like login, etc. works perfect on firefox and can create cookies).
Were you able to find the answer to this problem?
how can we add support for RTL languages (Arabic, Hebrew) ? in this case we also have to flip the screen from right to left
Congratulations, this is the best video on this subject on the entire internet.
Thank you!
Hi Tim, at first i appreciate your videos very much. You have a great understanding for what people want to know in certain topics. I'm always wondering how you come up with videos for things i was struggeling with a few days before. Keep on with IT!
Now to my question: If i just want to change the Application internal Culture for example Date Formats how would i do it ? Without creating those dictionaries for the UI Texts.
If you just change the culture and not the cultureUI, you will change the data formats, money, etc. without needing the resource files.
you introduced well .
thanks alot from iran ❤
You are welcome.
Hi TIM great video just what I needed.
I have only one problem is it concerns the localization of component libraries (razor and not). what is the procedure in these cases?
Great video! Have you heard of the Visual Studio extension ResX Manager? That makes handling the translations in the resx files much easier.
I haven't. I'll check it out. Thanks!
much needed, thanks
You are welcome!
Thanks for the tutorial. Helpful.
A question: how can i pickup and apply a CultureCode from some storage in Blazor Server Side when starting the application?
E.g.: localstorage and OnAfterRender.
I tried to do this, but it is continuously rerendering my index page (even when putting the logic within the "firstrender" check).
Thanks So much TimCory
My pleasure!
You do the job that Microsoft should do. Thank you very much.
You should put your video on Udemy ! Very very good.
Thanks! Tried the Udemy route. Udemy demands the majority of the price the viewer pays. For example, viewers often pay $10 for a course on sale, and the creator may only get less then a buck of it. Tim simply cannot affort to use Udemy.
Thank You. This video shows how to translate the UI, right? Imagine I have an APP like Tim Corey Retail Manager and I wan't to translate the contents of the data base, like a product name. Wich is the best practice? Should I save all the translations in the database, in culture table? This means that for each table, I need a Culture table (Products and Products culture, etc.)?
I have to use a lot of labels in my project, are there anyway to use multiple resources files like one for Errors, one for index page, one for ...? Just a hint for the right direction where to look
Thanks, Tim! Localization in Blazor is straightforward and easier than WPF. I had to use a workaround in WPF to make it work.
What if we replace the controller with a service class and inject it into a component? I guess that would work.
Thank you for all the effort you put in!
Thanks for watching and sharing your thoughts!
Localization in WPF is straightforward since they added x:Static. If you have code generation on for the main resx file and the xml namespace setup you can access localized texts like so: Text="{x:Static text:App.HelloWorld}"
Thank you dear teacher
You are very welcome
Hi Tim, as always: love your videos. Interesting to see that you can use MVC in Blazor. But why not the cookies logic in the RequestCultureChange? do you have a reason for that?
I wanted to show off mixing the two (plus, the foundation of it came from an example in the Microsoft docs).
This ONLY works if the "Assembly Name" is the same as the "Root Namespace". I struggled for HOURS to figure this out.
I NEED them to be different (One has "-"s, the other has "_"s).
How do I get it to work with these different? I can't figure it out and I've spent numerous hours on this. It's a .NET 5 Blazor project.
tank you very much for your explanation but I have question what we should name resx file or where should we store it if we want to access with that file to class models or pages in another project???
HELP!!!! i have a question: Can i do a Localization to a C# class that is used as a Model and has Data Annotations?? cause i need to translate those data Annotations but not sure how to do it. P.S. GREATE VIDEO.. LOVED IT
Where is the Time zone for the client/server set? Or maybe dates set on the client are always in UTC?
Appreciate the Localization clip. This is imho the least made course type for C# :)
Also. What is the difference with Client Blazor then?
@@marcusmaunula5018 The main difference is the Startup, in WASM there isnt any by default so you wire it up in the Program.cs. I also use localStorage throu IJSRuntime.
The way I did it, is using the IJSRuntime to set an localStorage value with a razor component: CultureSelector.razor (same way as in video, from the appsettings.json), and in Program.cs set the CultureInfo.DefaultThreadCurrentCulture and CultureInfo.DefaultThreadCurrentUICulture using IJSRuntime to get the culture from localStorage.
Thats it. Now you can use the resource files just like in the video. As for the resource keys I recommend using nested static classes with const string properties avoiding magic string.
I can create an github project to showcase it if you like?
This GitHub project will show you how to do localization in Blazor WebAssembly (it is the one I used as a sample in my Exploring Blazor WebAssembly course, where we learned how to do localization from it): github.com/SteveSandersonMS/CarChecker
@@Baby4Ghost Thanx, sorry for the the late reply but appreciated nonetheless :).
@@IAmTimCorey Thank you.
51:45 Perhaps you don't remember anymore after almost a year, but why was it not ideal to switch the language with the onchanged event? Was there any bug or uncontrolled behaviour because of that?
Is it possible to use IStringLocalizer in a WPF application ?
thank you very much , Great video, but how we can use localization in Razor class Library!???
Awesome video Tim! I'm currently trying to get localization to work on a razor class library and can't get it to work. Do you or anyone else in the comments can give me some hint on how to achieve a localization in a razor class library used by a Blazor server project?
great video indeed!
Thank you!
His Tim I'm trying to hide message attempting to reconnect to server in blazon server app. I have found few solutions in Internet but it doesn't work. Could you please mention in one of you video how to do it, or what is the best solution for it. Thank you. As always big thank you for great tutorial.
Thanks, timely information. If creating a site to be sold to multiple different customers that will want to personalize or update text, would it make more sense to create an admin screen that updates the resource files or to skip the resource files and pull text from a db?
I would pull the text from a database for most things.
So how to change language in all of the components that use localization with single button?
Mr. Corey, First of all, I'm a huge fan of your videos. I would really appreciate it if you could shed some light on how to manage the (global) state of a Blazor app, kind of like how React does via Redux or Context API.
Noted! Added to the list.
Blazor has a built in tool for sharing state across any hierarchy in the components. You will see that the authentication state in the individual accounts template uses it to share auth state to the entire sample app. Alternatively for a more redux-like experience, there's fluxor.
@@IAmTimCorey yes please!
I have a WebAssembly Blazor project and I would like to have subfolders under my Resources folder and then put resource files under each of the sub folders but I cannot figure out how to access the resource files using IStringLocalizer
Ideas?
Is there a pure Blazor method to set the language? It's inefficient to call an MVC controller and reload the entire app just to switch the language. It also makes it difficult to detect and SET the language when they first come to the site, so what are we expected to do, load the app twice??
How to change DateTimes in interface, depending on user culture? Very straightforward with WinForms as it's tied to the culture. Every method appears to require JS.
This code works for chrome/edge but not for firefox/safari. Any idea why?
thank you man
You are welcome.
Great video! For some reason, the navigaton tp the cpntroller doesnt work in firefox. It works fine in Chrome and edge. Anyone got similiar issues?
I have this issue as well....
How should localization be handled for large/ blocks of texts?. For that should we go with string contants for each language?. In that case how to identify the current culture?
For a large block of text, you would create a text identifier that is shorter and then make sure you have your default value loaded in the main file (app.resx).
I have a question about another topic. When you are using sqlconnections with aspnet core, its better to use the using keyword for each query or its better to use the same connection along the request? I mean, for example if you have to authenticate the user with a token and then you need to do some query, its better to use the same connection or use a new one?
Use the same connection. No need for a new connection, always try to use the connection you already have because more connections means more resources used.
An new connection is viable when you use an different connectionstring (maybe admin account), but as long as the connection doesnt need change, reuse the existing connection as much as possible.
Unless the calls are sequential, I highly recommend creating a new connection each time. The computer has connection pooling which will help you out automatically. Creating one connection and leaving it open is a BAD idea. In doing so, you hold up resources on your SQL Server instead of releasing them for other applications to use. You also risk keeping them open indefinitely if your application crashes. That can bog a server down and eventually crash it.
Tim, thx for the amazing explanation of this topic!
i think i do something wrong.....
everything works only if the resource file is one single and inject like
@inject IStringLocalizer Localizer
if you make separate resource files for each component
and import them into the component, let's say like this
@inject IStringLocalizer Localizer
@inject IStringLocalizer Localizer
..
it doesn't work
people in comments say "the files must be a public"
my files are public, but locatization still not work
Does anyone know how to do it?
How would i localize the messages outputed by ?
Those messages come from the model, so you would need to do the localization in the model.
0:00 - Intro
1:36 - Creating Blazor Server App
3:05 - Localization in Blazor explained
9:28 - NuGet reference
10:00 - Project configuration: startup and appsettings
28:24 - Adding MVC controller: Cookies and LocaRedirect
35:10 - Adding Razor Component: code behind culture change
46:06 - Adding Razor Component: building dropdown menu
55:07 - Cookie information
58:04 - Resource files: App.resx
1:15:22 - Summary and concluding remarks
Sveiki Pasaule
Thanks! Are you saying 'Sveiki Pasaule' contributed this?
@@IAmTimCorey I'm saying "Hello World" :)
@@IAmTimCorey Sorry for confusion
When I add the @bind to the select tag, it shows an error which I cannot figure out what exactly it is :/ I`m binding exactly like you in [47:48].
The error is the following:
Cannot resolve method Create(ChooseLanguage, string) candidates are:
Microsoft.AspNet.Core.Components.EventCallback Create(Object, EventCallback)
Any ideas why is this been thrown? :)
Did you name your method "Create"? It sounds like there are two "Create" methods now and C# doesn't know which one to pick. If you did, rename your method to be "CreateItem" or something similar in order to remove the conflict.
Talking about TimeDate formats in the US, the DOD uses a different schema as well. They use YYYYMMDD.
So if you wanted to show the Country Flag also put that in the ForEach as well?
That date format isn't a culture-specific change but a preference. You would need to account for that in code manually. Not sure what you mean by the ForEach for the country flag.
On some websites they include a country flag on the menu bar instead of selecting the country. I guess instead of having the text in the appsettings file you would want to point to a country gif instead
Yep, after 9 years in the Military I have to think to translate civilian dates :)
So my question is, If you are translating say, a paragraph, 100+ words, Surely its not a good idea to store that as the key? would you then at that point start using references instead of the full text, which then also means you would have to make sure it can never default to the text in the localization brackets?
Use an short descriptive key: product_description_specs | home_intro_text
Furthermore, I use a static class with constant string properties to match the keys and use the static class in my code.
resource file: Resources/Pages/Index.en.resx
key: product_description_specs
nested static class, const string: ResourceNames.Pages.Index.PRODUCT_DESCRIPTION_SPECS = "product_description_specs"
usage:
@inject IStringLocalizer LocalLoc
@LocalLoc[ResourceNames.Pages.Index.PRODUCT_DESCRIPTION_SPECS]
If you have a paragraph then yes, it would be the exception. You would just need to be sure that the fallback text was in the main file.
Hi Tim...please show us how to do this with Blazor SPA...since SPA will have single Http response, how can we update the cookie? . Please inform
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Hi Tim, trying to using this in a razor componment @inject IStringLocalizer Localizer, but I go this this error => Found a malformed 'App' tag helper. Tag helpers must have a start and end tag or be self closing.
The syntax is "@inject IStringLocalizer Localizer"
@@IAmTimCorey [Inject]
public IStringLocalizer Localizer { get; set; } , I tried to inject it in a componentbase class file, but I got an error of "The type or namespace name 'App' could not be found" Thank you!
Hello I am working on the project that I need to use multiple language and then I want to set default culture. Everything is working fine and I can change the language, it works but I couldn't set default culture. Project is starting with default English language, even though I changed it to Russian language. Thank you.
var supportedCultures = new[] { "en-US", "uz-UZ", "uz-Cyrl", "ru-RU" };
var localizationOptions = new RequestLocalizationOptions()
.SetDefaultCulture(supportedCultures[3])
.AddSupportedCultures(supportedCultures)
.AddSupportedUICultures(supportedCultures);
If we have a blazor server, and a webassembly under the same solution, on which project should we add the localization?
Both.
@@IAmTimCorey Since you mentioned "Both", I`m assuming that the razor component you create here on the server, needs to be done in WebAssembly and the other code which includes StartUp & appsettings needs to be on the server side? Also, are you referencing WebAssembly to server so that you can use the IConfig?
There is a bit of a sloppy "mistake" in here. If you open the dropdown and instead choosing a language you click on select... and then click change the application crashes. Would have been nice to prevent this.
You can just assign the option value to an empty value.
Here is the example :
It will never get changes.
I keep getting values from the default resource file. The notFound variable is false so he is not falling through but just not looking for any other file when the culture has been set differently. I have already checked the cookie and everything on that side seems to work. Any tips?
Make sure you have enabled the proper cultures, make sure the file is named correctly, and make sure you are using the right namespace (I used App so my files are all named App).
I did find the solution. My default resource file was set to embedded but the others were not. Thanks for your response!
so great...
Thanks!
Thanks for this video. It gave a good understanding on localization in blazor server app. Could you also please do one video on logging infrastructure available in asp.net core blazor server app. And how to fake or mock it during unit testing.?
Noted and added to the list. Thanks!
@@IAmTimCorey thank you
Hi, thx for this great tutorial, do you have made more tutorials about Blazor?
Yes I have. Go to my RUclips channel page and use the search option under the subscribe/unsubscribe button - ruclips.net/channel/UC-ptWR16ITQyYOglXyQmpzw It will only show you videos from my channel
@@IAmTimCorey thx for the fast response
Hi Tim,
found an error.
This approach only works, cause there is a well-known component called "App.razor" that luckily fits exactly the name of your chosen name "Resources/App.resx".
If you try to add another resource-file (e.g. Langbasics.resx), inject it (@inject IStringLocalizer LangBasics) and use it (@LangBasics["Test"]), this approach doesn't work, cause there is no class "Langbasics" in the solution.
If you add a dummy class Langbasics.cs in "/Resources", it will find the class, no more build errors, but the key/value-pair of "Test" isn't shown.
Any idea?
That wasn't luck, that was by design. By default, our application is called App. If you look at _Host.cshtml, you will see "
@@IAmTimCorey Hi Tim,
of cause it wasn't luck, that was ironic!
The idea was to split things up in several smaller resource-files, not one huge app.resx
So I tried to add another one, e.g. LangBasic.resx in addition to your app.resx in the same folder.
No chance to get your code working with that.
Cheers from Graz/Austria
Volker
For some reason I'm not getting the cookie generated in Firefox, but it works under Opera and Edge (which are Chromium-based). What could be the reason for this and how to even debug this kind of issue?
I'm looking into this. You aren't the only one to report it. Not sure what is going on yet.
@@IAmTimCorey I'm using Firefox and I get the same problem. Where you able to resolve this issue?
can you make a video about cookies and session? how do they work? when to use them or not? is both the same as PHP?
Thanks, added to the suggestions list.
@@IAmTimCorey yes please, I need it. I am confused when people mention state in Blazor and talk about using things like Redux.
it's just a temporary storage..what to not understand?? cookie is cookie no matter what programming language you use..it's just a data in HTTP header.
Because you talked about browser cookie I got cookie ads below this video lol
Mmmm, cookies.
Any plans of doing a tutorial on Razor Class Library? Would be a nice addition ;)
It is on the suggestion list.
1) I cannot use controllers in blazor SSERVER version. 2) When I write same cookie saving code for culture it does not change the culture...
1) yes you can. 2) probably you missed something small.
@@IAmTimCorey I used middleware in startup an set Thread.CurrentCulture. Otherwise setting culture only once doesnt help...
@@IAmTimCorey Finally I used middleware and each time I set Thread.CurrentCultureUI
Hi Tim,
a great video, thanks so far. i couldn't make it run in .net 6.0 unlikely.
It should work just the same in .NET 6.
@@IAmTimCorey That is what i think. but in .net 6 you dont have the startup.cs anymore. So i need to find another approach to implement it.
Hello, great job !
For information and maybe help others, i had an issue out of the box with NavigationManager.NavigateTo() which didn't change the page. To fix it, i replace "form" by "span" in " in ChooseLanguage.razor. It works well now. I use a VS 2019 16.8.2 on a VM Windows 10 version 2004.
Thanks for sharing
How can I put my projects in a separate project library? And use it?
Sorry, I am not sure what you are asking. If you want to put code in a separate project library, you use a class library project. Is that what you are asking? If you are asking about the localization files, they are UI-specific so I would recommend against trying to put them somewhere else. That does not give you any benefits but it does cause problems.
@@IAmTimCorey Yes, that is what I was asking. I figured it out. I needed just to make my resource's 'Access modifier' to 'Public' and then use it. Also, the path to be empty in DI.
Changing the country is more efficient without buttons.
--> It would be even nicer with the flags near by
Thanks for sharing
It is also possible to use a variable get; set;
....
private string _selectedCulture = System.Threading.Thread.CurrentThread.CurrentCulture.Name;
private string SelectedCulture
{
get => _selectedCulture;
set
{
_selectedCulture = value;
RequestCultureChange();
}
}
Not sure what I did wrong, I can get the culture to work, but not the actual translation of the elements.
Maybe download and compare my source code to yours. That should show you the difference.
@@IAmTimCorey Will do, thank you!
@@IAmTimCorey Something unrelated/related to this, since you've mentioned that we can implement MVC from the older ASP.NET Framework, that means we can use it to create registration/login/logout pages without the built-in Identity framework.
So I can do the same thing (login/register controller) here in the Blazor Server app? Would love to have some additional pointers! Thank you.
Know everybody. :) How to do it without Controller?
i have given my mail id but i didnt recieve the source code
It should have recently arrived.
Hi Tim, another great video i have try with .net core 5 but dont create the cookie maybe i do something wrong. I would try to find the problem. Edit: Find the problem miss a "@" :)
I'm glad you figured it out.
we need translation using Json files
Unfortunately, I don't see that on the roadmap.
Sad you did not include SUPER IMPORTANT steps... How to put variable in translation? How to use counts?? in many languages, almost all, numbers have different endings in words..not to mention that words have sex.
It depends on what you mean by putting a variable in a translation. You can't put a variable in and have it translated in some way. Translation files are static. So if you have a variable, that's the value it will be. You can put that variable into the translation using the curly braces but that is going to put the same value in that spot regardless of which language is being displayed. As for words having sex, again, the system isn't doing any translating. You are. So you can put the right sex in the translation for a given language.
. Net is the best of the best
I am glad you enjoy it.
Thanks for covering this topic. However, I find it weird that you explain every little detail. I'd rather say that this video is for those, who have at least 3 months of experience or something like that instead of explaining what a dictionary is in a video for developing C# webapps.
I try to reduce assumptions. You may know about Dictionaries but someone else might not. They might know about the _imports file and you might not. If I assume too much, I make it difficult for people to learn.
How can I get a job in Europe or USA as .NET developer? Share with links if you have any
It all depends on what you mean. If you need to learn C#, I have videos to help you out (check out my learning path video). If you are looking to know how to get a job once you are ready to apply, check out my Dev Questions playlist. I cover quite a few questions you probably have. If you are looking for specific jobs to apply to, this isn’t the place to find them.
2024 ? Dont waste your time watching this or programming it. No longer how things are done
That's a loooooot of talking in the first 9 minutes, completely unnecessary
👍
Faaaaaaaaaaaaaaaaaaaaaaaaar tooo slooooow .. com'on guy we try to understand how work localization! not how work a dictionnary!
In other words, it wasn't for you. That's fine. I can't create content for everyone. Sorry you didn't find what you were looking for.
1 hour 20 minutes to add localization!!!! Not even watching and can tell this is the bad way to do it. If i cant do it 10 minutes-it's wrong. Not by Tim but wrong and shitty implementation by Microsoft.
Hi Tim,
My local culture is English (India). I get that using CultureInfo.CurrentCulture. However when the app is published to Azure, the Current Culture returned is English (United States). I suppose the CurrentCulture returns the azure server culture instead of the client. I just tried what you have have in the code. (System.Threading.Thread.CurrentThread.CurrentUICulture), this one returns English (United States) in both my dev and on published site. Can you suggest how to get current culture of the client after the app is published. Thanks.