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

Multilanguage ASP.NET Core Blazor ASP.NET Core Blazor Web App

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

  • Prashant Lakhlani
  • Thursday, January 18, 2024

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:


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.


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 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 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 Locales folder
BlazorAppPart3 - Add new folder in project

Next, right click on the Locales folder and select Add > New item.

BlazorAppPart3 - Add Resource file

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
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 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:

<CultureSelector @rendermode=RenderMode.InteractiveServer />

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
BlazorAppPart3 - Final Preview


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 and use the IStringLocalizer<T> to localize it.


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

Related Posts :

Signup for monthly updates and stay in touch!

Subscribe to Facile Technolab's monthly newsletter to receive updates on our latest news, offers, promotions, resources, source code, jobs and other exciting updates.