Creating a multilingual ASP.NET Core app with Razor

In a previous article, we’ve learned how to create a multilingual app with UWP and Mindgaze.Languages library. The purpose now is to show how we can use this library for a web application in ASP.NET Core with Razor syntax. 

Prerequisites

1. Create an ASP.NET Core MVC app
2. Install both the Mindgaze.Languages and its complement Mindgaze.Languages.AspNetCore library

Configuration

The configuration for ASP.NET is very easy. In order to use the library, all we have to do is to declare it in the ConfigureServices method:

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
      ...
      services.AddMultiLanguage(); 
}

We also have to declare the multilanguage as a middleware:

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
       ...
       app.UseStaticFiles();
       app.UseCookiePolicy();
       // Our middleware
       app.UseRequestMultiLanguageLocalization();

       app.UseMvc();
}

Next we have to register the assembly in _ViewImports.cshtml in order to activate the tag helpers:

@addTagHelper *, Mindgaze.Languages.AspNetCore

The mighty tag helper

It’s time we use the <lang> tag helper in our Razor views. Let’s say we want to translate the headers for Home, About and Contact pages. We can put the tag helper around them like this:

<lang>Home</lang>
<lang>About</lang>
<lang>Contact</lang>

In our sample, I’ve added the corresponding keys to the JSON language files and defined two languages: English and Romanian. Now the app name and main menu look like this:

Now if we want to change the display language, we can do this very easily: just append in the query string the culture=ro-RO option. We can see the language has been changed:

Sources of culture

As we can see, above we managed to change the culture with the help of the query string. But we have two other options: cookie and header. These 3 options are getting applied in the following order:

1. The culture query string option
2. The cookie whose name defaults to “.AspNetCore.Culture”
3. The “Accept-Language” header

Mind the fact that these are applied in first-found first-served order, meaning that if the query string option is found it’ll be applied regardless of the configuration of the other two. Similarly, the cookie overrides the header.

Important: the cookie needs to respect this format:

c=%LANGCODE%|uic=%LANGCODE%

Where c is the Culture and uic is the UICulture.

Wrapping up

I’ve demonstrated in this article the powerful capabilities of the Mindgaze.Languages library for use in ASP.NET Core. The tag helper comes very handy when creating multilingual pages. I also believe that storing the translations in JSON files is much cleaner than classical approach.

You can find the sample on Github alongside with the UWP sample.

Thanks for reading, I hope you found this article useful and interesting. If you have any suggestions don’t hesitate to contact me. If you found my content useful please consider a small donation. Any support is greatly appreciated! Cheers  😉