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

Go to Visual Studio 2019 and create a new Blazor Project (Server-Side or WebAssembly) 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



Create a new folder in the project and call it "Resources" which will include the resources files related to each language 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/



Fill the file with the keywords you want to use in your application in English, like the following:







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.



Add all languages files to your Resources folder in the project, then set the Build Action property as an Embedded Resource:







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; 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" ); builder.Services.AddLangaugeContainer(Assembly.GetExecutingAssembly()); 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.