Blazor Localization in .NET 8 & Blazor Server

Рет қаралды 5,955

Күн бұрын

We will learn how to localize a Blazor application in .NET 8. The same code is also applicable to .NET 7 Blazor Server. We use regular .NET NuGet packages and create regular resource files.
For Blazor WebAssembly, you need to tweak the code, it won't work as shown in this video.
00:00 What We Build in This Video
00:45 Creating the Blazor Web App in Visual Studio
01:39 Install & Setup the Required Localization Nuget Package
02:54 Create the Translation Files
06:03 Apply Translated Texts in Blazor Components
08:07 The CultureSelector Component
10:15 Add a Controller to Handle Culture Changes
12:32 Testing the Application
13:06 Conclusion
📌 Source Code
github.com/claudiobernasconi/...
🔥 C#/.NET Bootcamp: The Fundamentals & more (Code FRIENDS10 for 10% OFF)*
claudiobernasconi.ch/dotnet-c...
📌 .NET Developer Roadmap
claudiobernasconi.ch/learn-do...
📌 KZfaq Playlists:
The FREE Blazor Crash Course: • The FREE Blazor Crash ...
Blazor: • Blazor
✅ SUBSCRIBE FOR MORE VIDEOS
Subscribe: 🔔 claudiobernasconi.ch/Subscribe
🚀 CONNECT & SUPPORT
Twitter: / chbernasconic
Blog: claudiobernasconi.ch
Newsletter: claudiobernasconi.ch/newsletter
* Affiliate Link: I earn a small commission at no additional cost

Пікірлер: 56

@ClaudioBernasconi 6 ай бұрын

The custom tool ResXFileCodeGenerator is installed as part of Visual Studio. I couldn't figure out what workload is required, though.

@user-od5lm1ne4y 6 ай бұрын

Thank you for your video, i am getting my resources with keys, but in net 8 blazor server, their values have null

@10Totti 6 ай бұрын

Great Tutorial thanks! A tip: make the webcam smaller, sometimes it doesn't show the code.

@ClaudioBernasconi 6 ай бұрын

Thanks, I will make sure you can see all the important bits. 🙂

@md.shakirhossain Ай бұрын

Thank you so much @ClaudioBernasconi for your nice, easy and helpful video

@ClaudioBernasconi Ай бұрын

Thanks for your kind comment. 😉

@mattpavey Ай бұрын

Great video. The thing I kept having trouble with was the Resouce.resx file was not generating the designer file, even when it was an embedded resource and even if I tried to use the ResXFileCodeGenerator approach; however, turns out for me it was a matter of opening the Resource.resx file (in editor mode) and then changing the "Access Modifier" from "No code generation" to "Public" (or Internal depending on your needs). Once I did that the rest all worked as expected. Lastly, for what it's worth, I thought the idea to redirect and force a page reload was a good one for my use-case. I suppose others may find that to be unnecessary, but it worked well for me. Thanks for the video!

@ClaudioBernasconi Ай бұрын

Thanks for your great and detailed feedback, Matt! 🙏

@MrXHDTV 6 ай бұрын

I also forgot to mention about _Layout.cshtml, the html document has a default lang property that is set to en. You forgot to change that.

@amrswalha 21 күн бұрын

Thank you for this great tutorial

@ClaudioBernasconi 21 күн бұрын

Thanks for your feedback. 😉

@mohammadmuwafi3623 4 ай бұрын

Thank you so much

@joehernandez3231 6 ай бұрын

Helpful video, thanks for making it. Is the PublicResxFileCodeGenerator a Nuget package we need to add, or some external tool we need to install locally?

@ClaudioBernasconi 6 ай бұрын

It should be installed with Visual Studio. I don't know which workload. I will edit the comment when I find out.

@stevendfowler 3 ай бұрын

Great video, thank you. Any chance of an InteractiveWebAssembly version? I figured out that I need to add "builder.Service.AddLocalization" to both program.cs files, with it only in the main project it reverted to showing just the keys after about a second. I have a similar problem still though, if I use the selector it will change the language but again after a second it then reverts back to the initial language. The cultureselector, resources and page are in the client project, the controller is in the main project. Any suggestions? I guess I have some items in the wrong project?

@ClaudioBernasconi 3 ай бұрын

Unfortunately, I haven't had the chance to implement a WebAssembly solution yet. I will keep it on my list and hope to release a video in the future. Right now, I cannot give you any pointers to a WebAssembly solution other than the "Localized Application in Blazor WebAssembly" article on DotNetCurry.

@cissemy 6 ай бұрын

Thanks

@ifullerlove 5 ай бұрын

Hi Claudio, many thanks for this - a really clearly explained methodology, really excellent. One question which you may be able to help me with: I am using your approach on a multi-lingingual ecommerce site, and I want to change the language automatically to the language of the location of the user, before the page is first rendered - this is really important as I need the SEs to index the page in the new language. I can detect the user location ok, but at the moment I can only do the change of language after the first render. Do you have any tips about how I could do this? Many thanks!

@ClaudioBernasconi 5 ай бұрын

Thanks for your great question. It's hard to reply without having your code. You might want to create an example repo and post it on StackOverflow for more detailed help. What I can say is that when you detect the language in the middleware, you should (in my opinion) be able to render the page with the correct language on the first render. The reason is that each HTTP request goes through the whole middleware pipeline. I hope this helps somewhat.

@PaulVanBladel 6 ай бұрын

nice. Very well explained. How would it work for blazor webassembly, so preferably without the controller? Would it be possible for you to extend the github repo with a pure webassembly sample ?

@allannielsen4752 6 ай бұрын

Thanks for this video, i agree, very informative. I would also like to see WASM, or even better, one that explains how to do it using the Auto mode where both Server and WASM are used.

@ClaudioBernasconi 6 ай бұрын

I will work on it. Stay tuned. 😎

@altareb10 6 ай бұрын

we are waiting @@ClaudioBernasconi

@PaulVanBladel 6 ай бұрын

@@ClaudioBernasconi Do you run in some specific problem?

@GuillermoMarcel 5 ай бұрын

Hi! Hello! thanks for this video, It's awesome. I'm having a big issue. When I change the selected language from the dropdown of the CultureSelector component, the Culture setter is never called, It's only called when the site is being first loaded, but never when I manually change from the drop down. Do you know what may be happening here ?

@ClaudioBernasconi 5 ай бұрын

The code in your CultureSelector component should call your controller method (Web API) whenever you change the value of the dropdown. It seems like that is not correctly implemented in your case. You can debug both ends and see where the issue is. The link to my source code is in the video description as a reference.

@GuillermoMarcel 5 ай бұрын

@@ClaudioBernasconi Yes, but it looks there an option that if missing wont call the setter when interact with the site. In the App.razor file I had: and And what fix everything was adding the Interactive Server option like this:

@KamaruAshamae 18 күн бұрын

@@GuillermoMarcel Tried this rendor mode method and its still not working for me. CultureSelector is just not called. Not sure what else to do

@KamaruAshamae 18 күн бұрын

I'm having quite a bit of trouble with the CultureSelector. When I use the dropdown to change the language, it can't find it. I tried the interactive server render mode method and it still errors out. Any ideas?

@ClaudioBernasconi 18 күн бұрын

I am sorry it doesn't work for you. It's really difficult to spot an error from your description without having access to your code. Maybe you can post your code on GitHub and somehow provide access? Feel free to put it online and tag me on Twitter, or ask on StackOverflow.

@KamaruAshamae 18 күн бұрын

@@ClaudioBernasconi I got it figured. There was an issue in the controller and the http requests :) Thank you for responding!

@TheQvisionsa 6 ай бұрын

Nice example! Did you tried to not have "en-US" as first language in .SetDefaultCulture(supportedCultures[0]) ? I tried it but it returns "en-US"

@ClaudioBernasconi 6 ай бұрын

As far as I understand we need to configure the default culture using this method. If we do not set it, it will take the system default which is a problem when you run it locally and have a different culture setting on your server/cloud.

@TheQvisionsa 6 ай бұрын

Yes! we configure the default culture using .SetDefaultCulture(supportedCultures[0]). If I set it to "el-GR" for Greek, it's not working. It will return "en-US"@@ClaudioBernasconi

@MrXHDTV 6 ай бұрын

Why do you reload the page for a simple language change ?

@ClaudioBernasconi 6 ай бұрын

Great question. There are other solutions but this one works, is a simple implementation, and user's usually don't change the language often so a reload is acceptable in most of the cases. If you have other requirements, feel free to choose a different implementation that suits your needs.

6 ай бұрын

Thanks for your time! How to support rtl

@ClaudioBernasconi 6 ай бұрын

Thanks for your comment! I'm sorry, I'm not an expert in that area. I saw there are CSS scripts that transform a whole website but I'm not sure if that is what you need. 🤔

@AllKnowing114 5 ай бұрын

Any tips how to do the same without the controller?

@ClaudioBernasconi 5 ай бұрын

Well, with Blazor Server you have ASP.NET Core on the backend anyways, so why don't you want to utilize it? There might be client-only solutions but this approach is simple and you'll have the localization client and server-side. I'm curious to learn about your use case.

@TravelingGonad 2 ай бұрын

There must be a better way than reloading the whole Blazor site just to change the language!

@shabanelmogy7912 6 ай бұрын

Im from egypt speak arabic and i want to change direction of website right to left

@ClaudioBernasconi 6 ай бұрын

I understand your use case but I don't know how to do that. I'm not familiar with the topic in general, I'm sorry.

@margosdesarian 5 ай бұрын

My VS 2022 (17.8.0) does not create the cs files no matter what i do - any suggestions? I changed the way i create the Resource files as per this video kzfaq.info/get/bejne/ob-Bq6Vovrq0fHk.html and got them to work using the IStringLocalizer. But changing the select option in the CultureSelector does nothing. I changed the logic to get it working. Thanks for the video

@ClaudioBernasconi 5 ай бұрын

I understand your issue. I don't know if that is a known issue. I tried reopening the solution, restarting the PC, and creating a new project and trying again and again in such cases. I don't know how to fix it if it doesn't work with all those tries, I'm sorry.

@pradm777 6 ай бұрын

Please make video for Arabic

@ClaudioBernasconi 6 ай бұрын

Thanks for your interest in my videos. I know a few languages, but Arabic isn't one of them, I'm sorry.

@tofansahra-kb7rv 4 ай бұрын

How to deal with multiple resource files for localization? ResourceFileA1.resx ResourceFileA2.resx ResourceFileA1.de-DE.resx ResourceFileA2.de-DE.resx

@ClaudioBernasconi 4 ай бұрын

When you use the IStringLocalizer type, you can set the type parameter to the specific resource file. In your case, IStringLocalizer and IStringLocalizer should work.

@tofansahra-kb7rv 4 ай бұрын

thank you