Localization

You can easily localize your Blazor application - add different cultures and change the UI messages by visually editing resource files (.resx).

How-to video

Cultures

The first step to localizing a Blazor applications is to add cultures.

1. Click . This opens the Localize wizard.
2. Add a few cultures via . Also pick a default culture. This is the culture your application will use by default.
3. Click Finish.

Radzen Blazor Studio will:

1. Register the specified cultures in the application startup (in Program.cs).
2. Add a CulturePicker component to MainLayout.razor which allows the user to chose the current culture.

Let’s test that by showing a value that has culture-specific display. For example DateTime.Now.ToLongDateString().

1. Drag and drop an Expression component from the toolbox.
2. Set its Code property to @DateTime.Now.ToLongDateString().
3. Change the desing-time culture via the dropdown in the toolbar. See how the value of the expression changes depending on the culture.

Now run the application and try changing the culture from the dropdown. You should see the date changing.

Localize page content

The next step is to localize the messages that your page displays based on the current culture. In .NET this is done via resource files. Here is how to easily do that with Radzen Blazor Studio.

1. Select a component. We will use a RadzenText.
2. Choose a property that you want to localize. We will use the Text property of RadzenText. Click to open the Bind to data editor.
3. Click . Radzen Blazor Studio will generate a unique key name and allow you to specify a property value for the current culture. It will also create a resx files for that page and culture and write the new key and value to it.
4. Select a different culture from the dropdown and add a new key and value. You can also use the button to copy the keys from the default localization. There is also the ability to edit keys and values and or delete them.
5. Click Ok to accept the new value.
6. Change the culture dropdown to previw the localized properties in design time.

Localize messages in code

Radzen Blazor Studio injects a property L of type IStringLocalizer in localized pages. You can use it to localize messages in C# code:

var message = L["Text1"]; // A key "Text1" should exist in the resx file.

To localize C# code which is not page related follow the Microsoft instructions:

1. Let’s localize say AccountController.cs. Create a new resx file named AccountController.en.resx next to AccountController.cs. The name is important - it should be the same as the file and have .<culture>.resx as extension. Add some keys and values to the resx file.

   <root>
      <!-- XSD stuff -->
     <data name="InvalidUser" xml:space="preserve">
         <value>Invalid user name or password</value>
     </data>
   </root>
   

2. Import the required namespace in AccountController.cs.

   using Microsoft.Extensions.Localization;
   

3. Create a property for the localizer.

   private IStringLocalizer<AccountController> L { get; set };
   

4. Inject a localizer via the constructor and set the property.

   public AccountController(/* other parameters */, IStringLocalizer<AccountController> localizer)
   {
      /* other initialization */
      L = localizer;
   }
   

5. Use the localizer.

   return RedirectWithError(L["InvalidUser"], redirectUrl);