How to Set Global Culture in Blazor – A Step-by-Step Guide

Blazor is a popular open-source web framework that allows developers to create single-page applications (SPAs) using C# and HTML/ Razor syntax. One of the essential aspects of creating an intuitive and cohesive user experience is the consistent display of labels, messages, and date formats. In this article, we’ll explore how to set the global culture in Blazor, step-by-step.

Understanding Globalization and Localization

Before we dive into setting the global culture in Blazor, let’s first understand the concepts of globalization and localization. Globalization refers to designing software that can adapt to different cultures and languages without requiring code changes. Localization refers to the process of adapting software to a particular culture and language. In simpler terms, globalization is about creating applications that work around the world, and localization is about translating the application to a specific locale.

Step 1: Set the Default Culture in Program.cs

The first step in setting the global culture in Blazor is to modify the Program.cs file. Here’s how you can set the default culture in Blazor:

using Microsoft.AspNetCore.Blazor.Hosting;
using System.Globalization;
using Microsoft.Extensions.DependencyInjection;

namespace BlazorApp
{
    public class Program
    {
        static void Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            // Enable localization
            builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");

            // Set the default culture
            var cultureInfo = new CultureInfo("en-US");
            CultureInfo.DefaultThreadCurrentCulture = cultureInfo;
            CultureInfo.DefaultThreadCurrentUICulture = cultureInfo;

            builder.RootComponents.Add<App>("#app");

            builder.Build().Run();
        }
    }
}

Step 2: Adding Supported Cultures

After setting the default culture, we need to add supported cultures. The cultures can be set by creating a resource file for all the supported cultures. In the below code sample, we’ve created two resource files: one for English (en-US) and one for Spanish (es-ES).

namespace BlazorApp
{
    public class SharedResources
    {
    }
}

//SharedResources.en-US.resx
<root>
  <data name="Hello">
    <value>Hello!</value>
  </data>
  <data name="Goodbye">
    <value>Goodbye!</value>
  </data>
</root>

//SharedResources.es-ES.resx
<root>
  <data name="Hello">
    <value>Hola!</value>
  </data>
  <data name="Goodbye">
    <value>Adiós!</value>
  </data>
</root>

Step 3: Setting Culture for Components

The next step is to set the culture for all the components, and this can be achieved by injecting the IStringLocalizer service. We’ve provided the code sample for the same below:

@inject IStringLocalizer<SharedResources> Localizer

<h1>@Localizer["Hello"]</h1>

<p>@Localizer["Goodbye"]</p>

Step 4: Testing the Localization

The final step is to test the localization. The localization can be tested by changing the system language. In the code below, we have included a piece of JavaScript code that will change the language to Spanish.

<button onclick="@ChangeLanguageToSpanish">Change to Spanish</button>

@code {
    private async Task ChangeLanguageToSpanish()
    {
        await jsRuntime.InvokeAsync<object>("localStorage.setItem", "language", "es-ES");
        NavManager.NavigateTo(NavManager.Uri, forceLoad: true);
    }
}

Conclusion

Setting the global culture in Blazor is an essential aspect of creating a cohesive application that adapts to different cultures and languages. This step-by-step guide explored how to set the default culture, add supported cultures, set culture for components, and test the localization. By following this guide, developers can create applications that cater to a wider audience, providing a richer user experience.