Thank you for the detailed walkthrough! This was the most helpful video I found on RUclips for understanding localization in Blazor 8. Initially, I also struggled with the Resource.designer.cs file not being generated. The solution turned out to be quite straightforward. In Visual Studio 2022 (version 17.11.5), right-click on the Resource.resx file, select "Open with...", and choose "Managed Resources Editor (Legacy)". The Resource Editor has an "Access Modifier" dropdown at the top. By default, it is set to "No code generated". Change this to "Public" to resolve the issue. Do this before you rename the file to Resource.en-US.resx.
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.
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!
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 ?
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.
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. 🤔
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!
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.
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 ?
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.
@@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:
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?
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.
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?
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.
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.
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
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.
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?
@@BikramjitBiswas-t1s there is a video on my channel about the new Blazor Web App project template. It's the implementation of what was previously called Blazor United.
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 ruclips.net/video/kYQxB7YTPLE/видео.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
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.
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.
The custom tool ResXFileCodeGenerator is installed as part of Visual Studio. I couldn't figure out what workload is required, though.
Thank you for your video, i am getting my resources with keys, but in net 8 blazor server, their values have null
Thank you for the detailed walkthrough! This was the most helpful video I found on RUclips for understanding localization in Blazor 8.
Initially, I also struggled with the Resource.designer.cs file not being generated. The solution turned out to be quite straightforward. In Visual Studio 2022 (version 17.11.5), right-click on the Resource.resx file, select "Open with...", and choose "Managed Resources Editor (Legacy)". The Resource Editor has an "Access Modifier" dropdown at the top. By default, it is set to "No code generated". Change this to "Public" to resolve the issue.
Do this before you rename the file to Resource.en-US.resx.
@@avinashtauro thanks. Very kind of you to let me know. 🙏👍
Great Tutorial thanks!
A tip: make the webcam smaller, sometimes it doesn't show the code.
Thanks, I will make sure you can see all the important bits. 🙂
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.
Thanks a lot! It helped.
Glad to hear that!
Why do you reload the page for a simple language change ?
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.
Thanks for the video! I have successfully implemented in .NET 8 Blazor server using Database as the source of translations. Cheers!
@@anrizakurniaaziiz1737 that's amazing! Well done and thanks for commenting. 😉
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!
Thanks for your great and detailed feedback, Matt! 🙏
Nonostante ho messo ResXFileCodeGenerator, non mi crea la classe .cs inerente al file resx
Thank you so much @ClaudioBernasconi for your nice, easy and helpful video
Thanks for your kind comment. 😉
Thank you for this great tutorial
Thanks for your feedback. 😉
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 ?
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.
I will work on it. Stay tuned. 😎
we are waiting @@ClaudioBernasconi
@@ClaudioBernasconi Do you run in some specific problem?
@@allannielsen4752 Hi, did you find a video or solution for the auto mode?
Thanks for your time!
How to support rtl
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. 🤔
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!
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.
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 ?
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.
@@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:
@@GuillermoMarcel Tried this rendor mode method and its still not working for me. CultureSelector is just not called. Not sure what else to do
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?
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.
@@ClaudioBernasconi I got it figured. There was an issue in the controller and the http requests :) Thank you for responding!
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?
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.
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"
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.
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
Any tips how to do the same without the controller?
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.
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?
It should be installed with Visual Studio. I don't know which workload. I will edit the comment when I find out.
Thank you so much
Im from egypt speak arabic and i want to change direction of website right to left
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.
Thanks
Thanks for watching. 😉
Please make a video on Blazor United
@@BikramjitBiswas-t1s there is a video on my channel about the new Blazor Web App project template. It's the implementation of what was previously called Blazor United.
@@ClaudioBernasconi Thanks for your reply. Actually I was trying to say that I want a Blazor Localization video in Blazor United and .NET 8.
There must be a better way than reloading the whole Blazor site just to change the language!
Not with Blazor Server, it seems :(
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 ruclips.net/video/kYQxB7YTPLE/видео.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
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.
Please make video for Arabic
Thanks for your interest in my videos. I know a few languages, but Arabic isn't one of them, I'm sorry.
How to deal with multiple resource files for localization?
ResourceFileA1.resx
ResourceFileA2.resx
ResourceFileA1.de-DE.resx
ResourceFileA2.de-DE.resx
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.
thank you
Thanks
Thanks