Part 3: How to Implement Multilanguage UI in ASP.NET Core Blazor Web App in .NET 8

You are reading an article that is part of the article series. This is part 3 and in this article I am going to walk you through How to Implement Multilanguage UI in ASP.NET Core Blazor Web App in .NET 8

Articles in this series:
Part 1: Getting started with Blazor Server Web App Development using .NET 8
Part 2: How to implement Microsoft Entra ID Authentication in Blazor Server Web App in .NET 8
Part 3: How to implement Multi Language UI in Blazor Server Web App in .NET 8
Part 4: How to use Entity framework Core with MongoDb in .NET 8
Part 5: How to show Dashboard with Radzen Bar and Pie Chart controls in in Blazor Server Web App
Part 6: How to support Authorization in blazor server web app when using Microsoft Entra ID authentication
Part 7: How to implement Radzen Grid Control with dynamic paging, filtering, shorting in in Blazor Server Web App
Part 8: How to implement Data Entry form in blazor server web app
Part 9: How to use SignalR to show real time updates in Blazor server web app

Introduction
Implementing Multilanguage UX/UI will extend your reach to 25% of the global audience that do not speak english as their first language. It will also boost engagement and conversion as 72% of the users more likely buy from a website in their native language. 90% of users stay longer on website in their native language. ASP.NET has built-in support for building web apps with Multilanguage UI/UX from it's initial release. That's true for ASP.NET Core Blazor Server Web Apps as well.

So, let's go ahead and start building a web application in Balzor Server that uses English and Spanish language UI.

Prerequisites
Before you start to follow steps given in this article, you will need an Azure Account, and Visual Studio 2012 with .NET 8.0 development environment set up and working.

Create ASP.NET Core Blazor Server Web Application

• Start visual studio and select create new project.

• In the Create a new project window, type Blazor on the search box and hit Enter.
• Select the Blazor Web App template and select Next.

• In the Configure your new project window, enter BlazorAppPart3 as the project name and select Next.
• In the Additional information window, select .NET 8.0 (Long Term Support) in the Framework drop-down if not already selected and click the Create button.
• Build and run the application once so that you have your application url that you can copy from the browser and save it for later.

Install Nuget Packages
Once your application BlazorAppPart3 is up and running, we are going to add a nuget package reference. In order to do so, go to Tools > Nuget Package Manager > Package Manager Console and wait for the package management console window to load. Once it's loaded write below command to it:

install-package microsoft.extensions.localization

Configure Localization support

Program.cs changes

In order to configure your web application to support multi-language, you need to add some code to Program.cs file of your application. In Program.cs, you need to register the localization middleware and add supported languages. Here is the full Program.cs file

Please note on line 5, we are adding AddLocalization() middleware so that our asp.net core application understands we want to use localization feature. on line 6 we added AddControllers() method because we want to implement a CultureController that will handle the culture change event.

On line 14 to 20, we are setting up English and Spanish language as two supported languages and set English as default language. Also, on line 35, we are adding MapControllers() method so that controllers are supported in this asp.net application.

Add resource files
Right click on the project name and click on Add > Folder and add a new folder in the application called Locales.

BlazorAppPart3 - Add new folder in project
Next, right click on the Locales folder and select Add > New item.

Name your resource file as AppResource.resx.

Once your resource file is opened, add Home, Counter and Weather with same value in Name and value columns of the resource file.

BlazorAppPart3 Access Modifier

Next, we want to auto generate the code file for this resource file. In order to do so, click on the dropdown on the top that says Access Modifier having a value No code generation and make it public. Save your changes. After saving this change, you will see AppResource.designer.cs is generated in visual studio. Right click on the AppResource.resx and go to properties. In the Custom Tool Namespace property, set BlazorAppPart3.Locales,

Repeat the process to add Spanish resource file in the Locales folder. Name the Spanish resource file as AppResource.es-ES.resx. Add Home, Counter and Weather as the Name and Hogar, Encimera, and Clima as the values respectively.

Language Switcher Blazor Component

Expand Components > Layouts folder, right click on the Layouts folder > Add > Razor Component and name it CultureSelector.razor. Add below code to it:

Open MainLayout.razor and add below line before the About anchor tag link:

Localize NavMenu.razor

Open Components > Layout > NavMenu.razor and modify it so that it looks like below:

Please note the first three lines where we are adding required using statements and injecting IStringLocalizer so that we can use the localized resources declared in the resource file. Also notice on line 18, 24 and 30, we are using localizer that we injected on line 3 to access the resource inside the resource file with it's name. Since name value in the resource file is same for the Home, Counter and Weather, it will show the respective value based on current language.

Add Culture Controller

Right click on the project file and Add > Folder and name it 'Controllers'. Right click on the Controllers folder and Add > Controller. Name the Controller file as CultureController.cs and add below code to it:

Notice the Set action method in the above code on line 9 is accepting the parameters which are passed from the CultureController.razor component line 32. Do not forget the route attribute on line 6 to avoid 404 on language change.

Now, our application is ready to compile and run. Here is how it will look:

BlazorAppPart3 - Final Preview

Conclusion
We have just gone through a quick and easy example of how we can use English and Spanish language using ASP.NET Core localization feature in .NET 8.0

More thoughts on localization

• This article demonstrates a very basic use case by implementing CookieRequestCultureProvider to localize the Navigation component.
• You can also use the localization features to format the numbers and dates as per the current locale.
• In bigger applications, you can actually create resource files inside the components folder itself with ComponentName.resx and ComponentName.es-ES.resx and use the IStringLocalizer to localize it.

References

• Dynamically set the server-side culture by user preference
• Blazor Localization in .NET 8 & Blazor Server

Credits: Youtube video of Claudio Bernasconi (link above) and the source code he provided was very helpful to complete the full example of this article. Modifications are made to make it work in .NET 8.0 Blazor Server

This article is cross-posted from Facile Technolab Blog, Read the orginal article here