Blazor Localization in .NET 8 & Blazor Server

today I want to show you how to localize your Blazer applications in net 8 you can also use it for Net 7 bler server applications but first let's take a look at how the application works so first of all we have the current culture displayed on top of the screen second we have the hello world welcome to your new app text as well as the menu items on the left when I select another language such as German on the top right the page gets reloaded and we now see the new culture the E for Switzerland where I currently live as well as the hello world text and everything else is translated in my local language German now let's jump into Visual Studio to see how to implement localization for Blazer applications first of all let's create a new blazer web application I'm going to use the new blazer web app project template we got for net 8 let's select the template and click on next we use the name bler localization demo for this project we click next we select net 8 as the framework we don't need authentication we keep https and we choose bler server as the render mode for this application we could also choose none meaning we don't have interactivity but let's stick with bler server for this application we keep the interactivity location to Global includes sample pages and we will use top level statements now we click create to create a project now let's open the nouet package manager to install the dependency we need that will add localization opportunities for this. net application we open the package manager then we browse for the microsoft. extension. localization package and we install the latest this stable version next we open the program the Cs file now in the program. Cs file we register the services we need for localization we will also need to register a middleware to handle the incoming requests to the applications and make them aware of the localization we add the following code below the builder. build statement we also Define an array of supported cultures I have an English and a German culture here next I Define a localization options object where I set default culture supported cultures as well as the supported UI cultures I then use the use request localization method to register the middleware with the Blazer application next let's create a locales folder where we will add the resources file containing the translated text that will allow us to localize the application first we create a new folder name it locales and then we add a new file we select the resource file from the list of the available items and we will stick with the resource default name the editor opens and I will paste a few definitions that I made previously to save some time here we have the home text uh the home title and the three menu items that will be displayed on the left I save the file and then I will add a build configuration that will turn this definition into a compile C file we will use an external tool for this task I click on the resource file and I will change the build action the build action remains embeded res resource but I will add a custom tool the Custom Tool is called public resx file code generator this code generator will create a C class that we can then reference in our code to access the translated texts stored in the resources file if everything works as expected the code generator will run in the background and create the designer file we can see that in the solution Explorer if we can expand the item and see the resource. designer.cs file if this doesn't work and I'm pretty sure it doesn't work in some cases because I also experience it myself one of the options is to rightclick the project and unload and reload it or to Simply restart Visual Studio keep that in mind if you have any trouble seeing the generated file next I want to rename the file because this file contains the English translations therefore I will rename the file file to represent it using a DOT and the culture we can also see that the designer file changes its name as well now let's add the German translation to have both translations done again I create a new file following the same naming convention I add another file in the locals folder and choose the resources file template and add the short hand for my language I will also copy paste the values to save some time now we have both translations in the project we have a file containing the German translations and we have a file containing the English translations keep in mind that we won't get a designer file for every language here we will only have a single instance because all the translations will have the same Keys here now let's open the nav menu to add the translations into our component code we find the Naf menu component in the components folder and below in the layout sub folder at the top of the file we add a few lines of code first of all we will add a few using statements for the microsoft. extensions. localization name space as well as where we store the locals in our local project we also have the system globalization Nam space if you want you can also move those three using statements into the Imports component so that you don't have to repeat it everywhere you want to use localization however I will keep it simple and I leave it here for reference the next line is the important line here we inject a I String localizer interface with the generic type of resource this resource type is the class that is generated in the designer file behind our resource now that we have this localizer variable available in this component we can use it to access the keys defined in the resource definitions let's start with the menu items on the left which currently are home counter and weather now we also want to change the home component to also have localized strings on the homepage I locate the home component in the pages folder and I replace the content with a prepared snippet here again we have the same using statements as before and we also inject an I String localizer instance with the generic resource type and we Ed the localizer variable to print the home the home title and the home text variables onto the page next we want to create a culture selector component that we can add to the screen that will allow us to choose between the different languages in this case English and German let's create the component in the layout folder we add an eraser component and we call it culture selector I also have a snippet prepared that I will paste here let's quickly go through it we inject the navigation manager and add the using statement to the system globalization Nam space the template is fairly simple we have a diff element that contains a select element the select binds to the culture variable that I will explain shortly and we have the two options English and ch gerine with a value representing the culture in the code block we see the oninitialized life cycle method overwritten that will use the current culture from the culture info object and assign it to the culture variable the culture property has a simple getter returning the culture info. current culture object and the setter is a little more advanced here we check whether the value is the same as the current culture and if that's not the case we build an URI that we will use to navigate to using the navigation manager here we will Implement a controller shortly that will handle this call and we will provide the selected culture as the URL arguments last but not least we will also set Force loow to True which will force the browser to reload the page making sure that we will load the new localized strings for the s Ed language next we want to use the culture selector component in the main layout we open the main layout component and we add a instance of the culture selector right besides the about link now let's add a new controllers folder to the project here I will add the controller that will handle the request that we triggered in the code before I add a controller choose an empty MVC controller and name it culture controller I also have a code snippet prepared for the implementation let's quickly take a look at it we create a culture controller and we have a set set method the set method accepts a culture string as well as the redirect URI we created before if the culture isn't null we create a new request culture and we create a cook key name and the cook key value here we add the c key that we create a few lines above to the response cookies is one of the built-in supported options when you choose the Microsoft extensions. localization package there are many different approaches to this but I think this is one of the simplest approaches and I have had great success using it last but not least I used the local redirect method to redirect the user to the URI it was before so for example if we are deep in the application and we want to change the language we will be redirected back to the page where we were before otherwise we would just redirect to the homepage since we now want to use MVC controller implementations in this player project we also need to register the services in the program.cs file let's open the program.cs file and below the ad localization we also add the ad controller services and we also need to map the controllers on the application host now let's finally build and start the application to see if it works in the browser when the application is started we see the output of the current culture as well as the texts in English we also see the home counter and weather menu items on the left now when I go to the top right and select German the page gets reloaded we see the newly selected culture as well as all the translated texts including the menu items on the left I hope this simple demo showed you how to use localization with your blazer. net8 applications the same code should also work for net7 Blazer server applications however if you want to make it work using web assembly you need to make a few changes let me know down in the comments if you also want to see a video where I show you how to use it using web assembly there are countless other options how to localize your Blazer application and how to show translated texts to your users let me also know if you have a different approach I'm curious to learn about it and if you want to learn more about net development consider subscribing to the channel so you won't miss future videos and I will see you in the next video

Channel: Claudio Bernasconi

Views: 2,207

Keywords: Blazor Localization, Blazor, .NET Blazor, .NET 8, Localization in Blazor, Blazor Server Localization, Resource Files Blazor, Microsoft.Extensions.Localization, Translate Blazor Applications, How to use Localization in Blazor, Globalization and Localization, Create a culture selector, dotnet, .NET, dotnet 8, dotnet 7, .NET 7, Claudio Bernasconi, Blazor Localization resx

Id: PJ7GASSmtTM

Length: 13min 58sec (838 seconds)

Published: Thu Dec 07 2023