Globalization in Blazor Application

29 Nov 20241 minute to read

Globalization is the combination of adapting the control to various languages by parsing and formatting the dates, times, numbers or currencies (Internationalization (L18N)) and adding cultural-specific customizations and translating the text (Localization (L10N)).

The Syncfusion® Blazor UI components are specific to the American English (en-US) culture by default. It utilizes the Blazor Internationalization package to parse and format the number and date objects based on the chosen culture.

Blazor uses the built-in .NET types from the System.Globalization namespace, such as the CultureInfo class and its CurrentCulture property.

  • Culture (CultureInfo.CurrentCulture): Determines the formatting of numbers, dates, and times. It’s mainly concerned with how data is presented and interpreted.
  • UI Culture (CultureInfo.CurrentUICulture): Determines the language of the user interface, including which resource files (like .resx files) are used for localizing the app’s UI.

When dealing with form fields in Blazor, it’s important to note that certain input types automatically respect the user’s culture settings using CultureInfo.InvariantCulture.

For example, the following input types are culture-sensitive:

  • date
  • number

Blazor relies on the browser’s handling of these input types, which ensures that the user input is parsed and rendered according to their specific culture settings.

However, some form field types are not yet fully supported across all browsers, making them less reliable in Blazor applications. These include:

  • datetime-local
  • month
  • week

The following code snippet serves as an example to demonstrate how globalization can be implemented in a Blazor application. It illustrates the process of localizing content, formatting dates and numbers.

@page "/"
@using System.Globalization

<ul>
    <li><b>CurrentCulture</b>: @CultureInfo.CurrentCulture</li>
    <li><b>CurrentUICulture</b>: @CultureInfo.CurrentUICulture</li>
</ul>

<h2>Rendered values</h2>

<ul>
    <li><b>Date</b>: @dt.ToLongDateString()</li>
    <li><b>Number</b>: @number.ToString("N2")</li>
</ul>

@code {
    private DateTime dt = DateTime.Now;
    private double number = 1999.69;
}
  • Suppose, if you want to change any specific culture, then add the corresponding culture resource (.resx) file by using the below reference.

Changing culture and Adding Resx file in the application

See also