DEV Community

Mohsin Afzal
Mohsin Afzal

Posted on • Originally published at bonzer-web.hashnode.dev

Blazor Localization in .NET 8: English–Arabic Multilingual Setup (Practical Guide)

#webdev #dotnet #localization #blazor

Why Localization in Blazor Matters

If you’re building real-world Blazor applications, hardcoding UI text is not an option. The moment you support multiple regions or languages, localization becomes unavoidable.

In this guide, I’ll show a clean and practical way to implement localization in a Blazor Web App using .NET 8, with support for English (en-US) and Arabic (ar-SA).

This setup is production-friendly and easy to extend.

What This Example Covers

  • Resource-based localization using .resx
  • Culture switching at runtime
  • Persisting selected culture using cookies
  • Arabic (RTL) and calendar handling
  • Shared resources across components

Step 1: Create Shared Resource Files
Create a Resources folder and add:

  • SharedResource.cs
  • SharedResource.en-US.resx
  • SharedResource.ar-SA.resx The SharedResource class is only a marker for localization.

Step 2: Configure Localization in Program.cs
Register localization services:

builder.Services.AddLocalization();
Enter fullscreen mode Exit fullscreen mode

Configure supported cultures:

var enCulture = new CultureInfo("en-US")
{
    DateTimeFormat = { Calendar = new GregorianCalendar() }
};

var arCulture = new CultureInfo("ar-SA")
{
    DateTimeFormat = { Calendar = new UmAlQuraCalendar() }
};

var supportedCultures = new[] { enCulture, arCulture };

app.UseRequestLocalization(options =>
{
    options.DefaultRequestCulture =
        new RequestCulture(enCulture);

    options.SupportedCultures = supportedCultures;
    options.SupportedUICultures = supportedCultures;
});
Enter fullscreen mode Exit fullscreen mode

Step 3: Persist Culture Using Cookies
Blazor does not persist culture automatically. We handle this using JavaScript.

localization.js:

function setCultureCookie(culture) {
    document.cookie =
        `.AspNetCore.Culture=c=${culture}|uic=${culture};path=/;max-age=2592000`;
    location.reload();
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Inject Localizer Globally
In _Imports.razor:

@inject IStringLocalizer<SharedResource> Localizer
Enter fullscreen mode Exit fullscreen mode

Step 5: Toggle Language from UI
In MainLayout.razor:

@inject IJSRuntime JSRuntime

<button @onclick="ToggleCulture">
    @Localizer["ToggleLanguage"]
</button>

@code {
    private async Task ToggleCulture()
    {
        var current =
            CultureInfo.CurrentCulture.Name;

        var next =
            current == "en-US" ? "ar-SA" : "en-US";

        await JSRuntime.InvokeVoidAsync(
            "setCultureCookie", next);
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Use Localization in Components
Example (Home.razor):

<h1>@Localizer["Welcome"]</h1>
<p>@Localizer["ExampleText"]</p>
Enter fullscreen mode Exit fullscreen mode

Source Code
The complete working example is available on GitHub:
👉 https://github.com/mafzal88/BlazorLocalization

Final Notes
This approach keeps localization:

  • Centralized
  • Scalable
  • Easy to extend for more languages If you’re building multilingual Blazor apps, this setup will save you time and future refactoring.

Top comments (0)