Localization and Globalization in ASP.NET Core MVC (.NET 5)

hi my name is brugain and welcome to dotnet mastery the ultimate learning resource for dotnet developers in this video we will take a look at how to implement localization and globalization in asp.net core in this video we'll take a look at how to implement globalization and localization in asp.net core globalization often referred to as internationalization is the process of making a product or content multilingual a globalized product or website should support multiple languages localization on the other hand is the process of translating content to fit the demands of one locale which means based on the locale your website should adapt to its language in other words localization is the process of setting up the content for local geography which is a continuation process of globalization asp.net core provides mechanism for adding local culture info into the middleware let's first take a look at what we will be building we will be building a small application in which we are displaying hello world and hello world again with a c from the controller now if someone wants to change the culture for this they can write it in the parameter like fr for french and that will display the content in french also we have a drop down here so we will see other route without the parameters here they can directly change the drop down we have english spanish and french so if you click on french it modifies the text and it also modifies the drop down to display the languages in french if you go with spanish it will display the text in spanish and also the drop down so this is the application that we will be building in this course that being said let's get started with building our application from the next video what we'll do is we'll create a asp.net code web application i'm going to change the project name to localization globalization and we'll hit the create button we will select more options that we want like we are using the.net core which is the dotnet core 5. we'll go with the mvc and we will enable razer runtime compilation with this will be able to make changes in the ui and refresh the page without restarting the application i am on the preview version but if you use the released version of dot net 5 this should also work so with that we'll create our project now we did not select any authentication because of which there won't be any database in the project in order to understand localization we can do that without the database so great our project has been created here when we are working with localization we need to configure few things in startup.cs first thing is we need to configure the services right here what we have to do is we'll say services dot add localization and we already have that extension method here we need to configure few options so we can say opt goes to and then within the bracket here we want to configure the opt dot we have the resource path when you work with localization you will have to add resource file in your project what is resource file is basically if you are saying hello in english what is the equivalent of hello in french or spanish so all that we will be logging inside the resource file so we need to tell the application where that resource file will be located so we'll say equal to here and we'll name the folder as resources once we add that we need to create this folder so let me copy this name so we did not make any spelling mistake right after the resources you will have to add a semicolon great once you do that we'll right click on the project add a new folder i will paste the name resources and this looks good once we add the localization to our services next we need to add the mvc we have that dependency right now that we need to add the mvc on that we can add add view localization this might change in future but right now this is the way in here we have to add some configuration one of them is language view location expander format on this we will call the dot suffix after this what we have is we again have to configure the options then if you want right here also you can provide the options that you did before so we can say opt here and we can provide the same options like this rather than providing that inside the add localization you can do the same inside add view localization and it works i have already added that in the add localization so i will remove it from here so this looks good for the add view localization then let me minimize this and we can do dot add we have the add data annotation localization when you are working with entity framework core with asp.net core then you have data annotations for validation if you want those validations to automatically change based on the locale then you can add the add data annotation localization so with that we have registered localization in our services container but we still need to configure our pipeline let's take a look at that in the next video now that we have added localization in our container we can configure that in our pipeline which is inside the configure method so in here what we can do we first need all of the supported cultures so i can just add a variable here for supported cultures and we'll give this an array we want to give all the values for the cultures that we want we will use english comma fr for french and let's use es for spanish next we'll have the options so we'll have the localization options and in here we'll have the new object this will be of type request localization options on this we can set the default culture we have three cultures that we want but what should be the default culture in your application so we can just say that will be support cultures of zero which is english then we have more options that we can configure like which are the other cultures that should be supported so we have to add supported culture we can pass our array here which is the supported cultures and we have the ad supported ui cultures that will also be the same so we'll add the supported cultures so basically what we are doing on line 54 when we say set default culture is we are telling the application that if you request a culture that is not supported we will be serving the english resources then on line 55 we tell them how we want to format the numbers and currencies and on the line 56 we are telling them that what should be used when we retrieve the resources right now we have all of this in our variable so we need to configure our pipeline which is app and on that we have used request localization in here we will pass all the options that we have which is inside localization options so with this we have configured our pipeline to use localization this looks good for our configuration in startup.ces but our main question now is how do we add cultures so as you recall before we added the resources folder we have to add our resources so that we can use that in our application let me start with that in the next video before we proceed further let's run our application in here we see the text welcome i want to change this welcome to hello world so we'll stop the application and we'll go to what views inside home we have the index view here i want to change this to hello world without any space now based on the culture we are on i want to modify this content how will we do that for that we need to add the resources file for every culture now when you have to add the resources file inside the folder here you cannot directly go right click add an item it has to be in a certain format what format that is the files must follow the same hierarchy that you have inside views if you want to change it inside the views if you want to change anything inside the home controller you need the same hierarchy inside the resources folder first let's try to implement that using our index view so index view is inside the views folder we have home and then index.cshtml so inside the resources we will right click add a new folder with the same name as views then inside views will add another folder with the name home and in here we can finally add the resource file so we will select new item here and we'll search for resource we have the resources file the extension of these files is dot res x so what name do we want to give here it has to be the exact name as the view which is index we can say dot e n for english culture and then the extension dot res x we will add this the resources file is not a code based file it actually contains key value pair with name value and comment so name will basically be the text that you want to give to convert so let me call this name as hello world and the value that i want to display here let me make it hello space world with an exclamation mark we'll save this resource file once you save this let me close it here and then we want to use our culture here in order to use localization in your views at top you will have to inject some dependencies which is microsoft.asp.netcode.mvc.localization dot i view localizer i call this locally as localizer so in here we can use the localizer variable so we'll say at localizer and within the brackets here you have to pass the name so if we go to our resource file whoops that did not get saved let me save that again it was hello world the value will be hello space world we will press enter here so now you see in the second line that is string one after this if you save then it will be saved we'll double check yep this is working now the name that we have is hello world so in here in the localizer i will paste hello world here and with that in place let's run our application this time you see the text got updated to hello space world with an exclamation mark so we can see our culture is working now another reason our culture is working because this is for english culture and if we go to startup we have set the default culture to supported cultures of zero which is english if you see in the array here so that is the reason you can see our culture is working inside our index view that being said how can we implement that for french and spanish let's take a look at that in the next video as i said before when you are working with localizer the hierarchy should be the same as the view name if you are dealing with localization and controller that rule still applies so if you are working with home controller inside the resources folder first we will have to add a folder we'll call this as controllers the controller's name here must match with the controller name at the root directory then within this controllers folder we have to add the localization for home controller so we can copy the index that we have resource files we'll copy them and paste them inside the controllers folder if you use index name this will not work you will have to change the name from index to home controller the name must match exactly with the controller name so we'll change that in all the three places once you change all of these three if you take a look at the text inside it's the same text for hello world what i will do is after the exclamation mark let me add c for controllers we'll press enter and save this that way we'll know that this value is from controller so we'll press enter save it and i'll do the same right here as well if you do not press enter and save data will not be updated in the resource file now we have the resources for controller how do we manipulate that inside the home controller now when we are working with the controller within the class of home controller we will create a private read only field which will be of type i html localizer this will be on home controller and we can call this underscore localizer we need to assign this using dependency injection so right here we will have the i home localizer for the home controller we'll call this localizer and underscore localizer is equal to localizer how do we use this in our index action method when we return back to the view we can get the localized text and then for temporary purposes we can assign that in a few data i usually do not like temp data but since this course is not focused on dotnet core its main focus is on localization so we'll use view data to save time so here we can say variable test is equal to underscore localizer and then you need to pass the name if you see the name that we have in index was hello world so we can just copy that name hello world and we'll paste it right here that will retrieve the localized data for hello world based on the current locale that has been set if no locale has been set it will retrieve that for english once we have that let me set that in a view data i'll just call the view data name the same which is hello world and i'll set this to a variable test you can name this whatever you want the last step that we have to do is we need to retrieve this view data inside the index view so i'll just copy this h1 i'll paste it one more time and rather than localizer this time it will be view data of hello world let's save this and let's run our application great now we see hello world which has been localized in english from our views and hello world c has been localized using our controller if you remember we appended c to be sure that it was getting values from the controller let's see what spanish culture looks like and that looks good let's also verify the french culture great so with this you have a basic understanding of how localization will work but in a real world application most of the times you do not want to add your culture in query string what would you do in that case let's take a look at that in the next video now we have seen the english culture is working how about french and spanish so for that we already have a resource file we'll copy and paste it two more times i will change the names here to change them from english to french which will be fr and then spanish we will call this as es we have to change the text in there so if we go to es i will paste the value for hello world in spanish make sure after you change it you press enter so that you see string 1 in the next line and save this we will do the same for french here we'll paste that press enter and then save all so we save that and now let's run our application one more time if we switch back to our application we have the supported cultures which i have added as both french english and spanish so how do we see that in here that is simple right here in the url if we say culture is equal to fr for french you see the text got updated in french if you say es for spanish everything is working as expected so with this you can see how we can manipulate or localize the data inside our view using the eye view localizer but sometimes what you want to do is you want to pass data from your controller which has already been localized let me show you that in the next video now what we want to work on is if we do not want to do localization based on query string we need to implement that using cookies so how will we do that we'll stop our application and we'll go to startup.cs we will have to make some fundamental changes to our pipeline and middleware let's scroll up right here we have the services we need to add more configuration to our localization for that so let me minimize this and in here we will say services.configure what we want to configure on here is the request localization option so we have those options and we'll configure that so opt goes to we will add the support for cultures right here so now let me show you another way of adding the supported cultures so our call variable supported cultures is equal to new we will create a list of culture info in there we will be adding all the culture infos that we want in our application so we want to add english so we'll do en let me copy and paste this two more times next we want spanish so es and french will be fr we are adding those three in the list there and then we added the default requested culture and after that we had defined few options in our pipeline so we'll say opt dot default requested culture this we can directly set to new request culture and we'll pass e n here next option that we set was opt dot supported cultures and supported culture ui this will just set to the variable since it has all of the cultures so we have supported ui cultures and great now we have added that configuration within our middleware services so if we scroll down to our pipeline so in here we can comment both of these lines out i'll also comment out the use request localization if we go up we have added all of this in the request localization option so right here rather than doing all of that again we can directly use that and we will register so we'll say use a request localization inside here we can say services on there we have a method which is get required service here we can use the options so i'll say i options and i want to get the options of request localization options in there we have everything set so we'll call the dot value that will retrieve all of the cultures and it will add it to our pipeline so this configuration looks good for our startup.cs let's continue in the next video now that we have added the configuration in startup.cs what we want to do is if we go to our home controller let me add a new action method so right here it will be an http post action method because we will be posting when we change the culture in a drop down then in order to create an action method it will be public by action result let me call this culture management here we will receive one thing in parameter which will be the name of the culture based on that name we have to set the cookies so we can set response dot cookies and what we want for the name here we have that in cookie request culture provider dot default cookie name what we want for the value here is cookie request culture provider dot we have the make cookie value here we want to create a new culture so we can say new request culture with the name that we receive in the parameter so with that we'll assign that to our cookie and after that we can set the lifetime so that can be set using cookie options so cookie options if you do control space here you have quite a few options i'll just set the expires to take time offset and i will offset that by 30 days and rather than response.cookies it will be response.cookies.append so with this we are setting our cookie what to do after we set that we can just return and redirect back to index action so right here we can say name off and redirect back to the index action so in this post action method we are just setting our cookies and redirecting back to the home page now we need to add this view rather than adding a view i will add a partial view so partial views we add that inside the shared folder we have underscored layout we will right click add a view here we'll make sure to go with the razer view and we'll call this with underscore to determine that this is a partial view we'll create it as a partial view and i'll name this underscore culture in there we will have to inject our localizer and we will also need the request localization options that we set in startup.cs so if we go to our index we can copy the localizer injection and then i'll paste it one more time this time i want to inject the options which is inside microsoft.extensions.options in there we have the i options and the type will be request localization option we'll call this as lock options once we have both of these using dependency injection we can create a div and a select tag in here we'll add a div and we'll add a form tag what we want to display in this form is a drop down with all the cultures how do we do that let me just add a form tag right now and we will add a select statement name we'll call this as culture and the reason we are doing this is in home controller we expect a string with culture so we'll give this a same name so whatever we are selecting in drop down for culture we will display them or rather pass that to the home controller so name will have it as culture then we'll use the tag helper asp4 here we want to have a variable where we will have the culture name and then we need list for drop down so that will be inside the asp items tag we need to get those using the razor syntax in here so let me first get a variable for culture and we can use the context object here in there we have features dot get and what we want to get is i request culture feature this exists inside the localization and that will give us the exact culture so we can use this culture variable inside the asp4 next what we need is a drop down with all of the cultures we have added that drop down if we go to startup.cs we have added that inside the request localization options we have the supported culture so we can get that from supported culture or supported ui culture so variable culture list is equal to we'll use lock options which is on request localization options on there we will say dot value dot we have the supported ui culture there and then we want to use projection because we want a drop down so we can say x goes to new select list item and we need the name and value so the value here will be x dot name comma we have the text that we want to display so text right now we'll just say x dot name as well we'll change this in future but right now we'll convert this to a list so we have the drop down list in the culture list will add that in the asp items asp4 is giving an error with the culture because within culture we further have to navigate to get the name so in here we have the request culture in there we have the ui culture dot name so that way we'll store the culture in asp4 tag we have done quite a few things here before we proceed with all of this let's actually see what this is doing how do we see that one way of looking at it is if we go to our home index right here we can add the partial view so we can say partial and will give name is equal to underscore culture let's run our application and see how the drop down looks great you can see right here we have all the three locale we have english spanish and french but right now if you change nothing happens let's work on that in the next video now that we have the drop down here let's see what should happen when we post any data how do we take care of that if we go back to our partial view if we go back to our partial view we have the form here and we can add more tag helpers here the first tag helper i want to add is asp action what i want to do is when the form is posted i want to call the culture management action method in the home controller so we have the action i'll say the controller will be the home controller and i'll also say the method is post action method next what we want is how this form will be posted so whenever we change anything in the drop down let's say we want to push the form so here we can call the onchange event and we can say this dot form dot submit so that will submit the form as soon as you change anything in the drop down let's run our application and see what happens so we have spanish by default let's click on english and great you can see it is working if we change it to french you can see the localization is working without anything in the url and all of that is because we are taking cookies to store the localization culture let's move this localization to our navigation bar so we'll scroll down let me stop the application we have that in index let me cut this and we'll open up the underscore layout inside here we have the li let me create a new li and paste it and i'll give it a class of nav link let's run our application to see how things look and this looks much better now the logic that we have is even if we are on privacy if we change culture it takes us back to the home page the reason is we have hard-coded that inside the home controller to redirect to action rather than that right here we can expect a return url and based on that return url we can redirect back so rather than redirect to action we will just say local redirect and we will pass the return url now how do you pass the written url to the post action method that will do inside the partial view within our razer code we can get variable return url is equal to we can check string dot is null or white space and we'll say context dot request dot path if that is empty or null we'll just return the local base path else what we want to return is right here we will say context dot request dot path dot value and then we also want to append the query string so context dot request dot query string if there is anything append that as well so we have the return url here we need to pass that when we change anything so inside our phone here we can pass the route attributes so asp route and we'll have to call it the same name which is the return url write this and we'll pass return url let's run our application and try this one more time this time if we go on privacy and we change culture we stay on the same page even though on this page we are not using localization but it is changing that in our cookies if we go to home you can see it's working so with that we have optimized a little bit our culture partial view but this is just the beginning sky is the limit when you have to optimize or change anything and customizations are different for different website one last change that i want to show you is right now in the drop down we are just looking at the culture names like this but if someone selects french i want to display all of the other languages as well as french in their own language let's take a look at that in the next video now what i want to do is i want to add cultures for the three of the items that we have in drop down where will we add the cultures for that that view exists inside the underscore culture in the shared folder so for that if we take a look at the hierarchy inside views we have a shared folder and we have underscore culture so inside our views folder we will have to add a new folder which will be the shared folder in there we will have to add the localization for three languages i will copy the home that we have and paste it inside shared i will change the name for all three of them from index to underscore culture then we'll first work with english here what will be the name the three names that we have is e n e s and f r what should we display in english let's display english spanish and french let's save this and let me close the english culture we'll do the same for spanish and french we'll save the spanish one and let's modify the french one and great this looks good let's press enter and save everything now we need to use that localization so rather than displaying the name so rather than displaying the name right here in the drop down we want to display the localized name so that's pretty simple now all we have to do is we have the localizer in here and we need to pass the name so localizer dot we have the catch string method and we'll just pass x dot name with that let me run our application one more time and great you can see french is selected by default so the drop down is in french language let's select english here and you can see the drop down displays the text in english now if we select spanish it works as per our selection so with this you can see localization in effect and everything with our dropdown has been configured with displaying the data from view as well as from the controller this is just the beginning of localization but i hope you have enjoyed this video and make sure to like and subscribe to the channel so you can be notified of new videos when they get uploaded

Channel: Bhrugen Patel

Views: 16,126

Keywords:

Id: Hy9G30nncMM

Length: 38min 19sec (2299 seconds)

Published: Thu Jul 23 2020