Localize Your Blazor Applications and Build UIs to Support Multiple Langauges Without JS

Introduction

 

Building applications that support multiple languages gives you the ability to reach more and more users, in addition to providing a satisfying user experience.

 

Localization is a little hard part to implement while you need to make all the UI words non-static and programmatically set from a specific resources files as well as writing your content for every language.

 

While Blazor is still new and a hot topic in the software development world, I will share with you in this article how you can take advantage of the power of Microsoft Azure and Microsoft Translator in addition to the YAML serialization files to develop Blazor applications that supports a huge range of languages.

 

Plugin GitHub repository and Blazor Example (AKSoftware.Localization.MutliLanguages):

 

https://github.com/aksoftware98/multilanguages

 

Official Website:

 

 https://akmultilanguages.azurewebsites.net/

 

 

 

Get Started

1. Go to Visual Studio 2019 and create a new Blazor Project (Server-Side or WebAssembly) 
2. From Nuget Packages Manager install the library "AKSoftware.Localization.MultiLanguages" or from Nuget Package Manager Console run the following command,
   
   Install-Package AKSoftware.Localization.MultiLanguages 
   
   
3. Create a new folder in the project and call it "Resources" which will include the resources files related to each language
4. In Resources Folder insert a new file called  en-US.yml file like the following picture,
   
   
   
   YAML files are serialization files similar to JSON and XML but much lighter and smaller, which is perfect to be embedded inside the dll of the project. It doesn't take too much space and is also very fast for serialization and deserialization.
   
   If you are not familiar with YAML, check out the following link:
   
   https://blog.stackpath.com/yaml/
   
   
5. Fill the file with the keywords you want to use in your application in English, like the following:
   
   
   
   
6. Now you are ready to translate the file into any language you want.
   
   Go to the online translation portal in the following link https://akmultilanguages.azurewebsites.net/translateapplication
   
   Upload your en-US.yml file and click submit, you will see the content of your file in addition to buttons for all the available languages as shown in the following:
   
   
   
   Click on the language you want to add to your project and the translation service will instantly translate the content of your file using Microsoft Translator Service.
   
   
7. Add all languages files to your Resources folder in the project, then set the Build Action property as an Embedded Resource:
   
   
   
   
8. Now you can move to the code part. In this demo, I'm doing it for Blazor WebAssembly, but you can also do it for Blazor Server-App exactly the same way.

In the program.cs file, register the LanguageContainer in the services like this: 

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Blazor.Hosting;
using Microsoft.Extensions.DependencyInjection;
// Add these libraries
using AKSoftware.Localization.MultiLanguages;
using System.Reflection;
using System.Globalization;

namespace BlazorWasmMultiLanguages
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            // Register the Languages Container that the Resoruces files existing in the current assembly
            // You can specify another assembly if the resource folder existing in another assembly
            builder.Services.AddLangaugeContainer(Assembly.GetExecutingAssembly());

            // Launch the app with a default culture
            //builder.Services.AddLangaugeContainer(Assembly.GetExecutingAssembly(), CultureInfo.GetCultureInfo("fr-Fr"));

            await builder.Build().RunAsync();
        }
    }
}

After registering the service now you can move to your components, open any component inside your application and inject the ILanguageContainerService in your component and access your keywords values like this

@page "/"
@inject ILanguageContainerService languageContainer
// Access the HelloWorld value
<h1>@languageContainer.Keys["HelloWorld"]</h1>

Change the language at RunTime

 

You can change your language at runtime easily by calling the function within the instance of ILanguageContainerService called SetLanguage(); and provide the culture you want.

@page "/"
@inject ILanguageContainerService languageContainer

<h1>@languageContainer.Keys["HelloWorld"]</h1>
<button @onclick="ChangeToFrench">Set French</button>

@code
{

    void ChangeToFrench()
    {
        languageContainer.SetLanguage(System.Globalization.CultureInfo.GetCultureInfo("fr-FR"));
    }
}

Conclusion

 

I hope you found this article helpful, and that after reading you are able to develop easy multi-national apps with Blazor :-)