Syncfusion Blazor Common

Syncfusion Blazor Getting Started

Setup and configuration guide for Syncfusion Blazor components in Blazor Web Apps.

When to Use

Use this skill when you need to:

• Set up a new Blazor project with Syncfusion Blazor components
• Create a Blazor Web App with specific .NET version targeting (net8.0, net9.0, net10.0, etc.)
• Add Syncfusion components (Grid, Button, etc.) with features based on context
• Optimize script loading with static assets or CDN
• Set up bUnit testing for Syncfusion components

Quick Reference

• Getting Started: See getting-started.md for full project setup steps
• Scripts & CDN: See add-script-reference-and-cdn.md for script loading options
• bUnit Testing: See bunit-setup.md for unit testing setup
• Localization & Globalization: See localization-globalization.md for culture and localization setup

Prerequisites

• .NET 8+ SDK
• Blazor Web App project
• Syncfusion account (free trial)
• NuGet package access

1. Getting Started

Detailed guide: getting-started.md

Quick Setup

1. Create Blazor Web App with your chosen render mode and explicit .NET version (e.g., .NET 10) 2. Install Syncfusion.Blazor.Grid + Syncfusion.Blazor.Themes NuGet packages. All individual packages are listed here 3. Add @using Syncfusion.Blazor and relevant component namespaces to _Imports.razor 4. Register builder.Services.AddSyncfusionBlazor() in Program.cs 5. Add theme CSS and script references to App.razor 6. Use Syncfusion components in your pages

Key Rule: For Auto/WASM modes → register in both server and client projects Important: Always specify the target .NET framework version when creating projects to ensure compatibility

Quick Start Options

• Blazor Playground: Browser-based, no local install
• Template Studio: Pre-configured VS/VS Code project templates

2. Script References and CDN

Detailed guide: add-script-reference-and-cdn.md

Script Loading Options

3. bUnit Testing

Detailed guide: bunit-setup.md

Unit test Syncfusion Blazor components with bUnit.

Required Setup

Install bunit NuGet package, then register in each test:

using var ctx = new TestContext();
ctx.Services.AddSyncfusionBlazor()
   .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
ctx.Services.AddOptions();

Test Pattern

1. RenderComponent<TPage>() → render 2. FindComponent<SfButton>() → locate 3. .Click() → interact 4. MarkupMatches(...) → assert

Works with xUnit and NUnit (use Bunit.TestContext for NUnit to avoid naming conflicts)

4. Localization and Globalization

Detailed guide: localization-globalization.md

Configure multi-language support and culture-specific formatting for Syncfusion Blazor components.

Key Concepts

• Internationalization (i18n): Parsing and formatting dates, times, numbers, and currencies
• Localization (l10n): Adding culture-specific customizations and translating UI text
• Globalization: Combines both i18n and l10n

Quick Setup

1. Download and add culture-based .resx resource files from GitHub - ASK PERMISSION BEFORE DOWNLOAD THIS 2. Create a SyncfusionLocalizer class implementing ISyncfusionStringLocalizer 3. Register in Program.cs:

   builder.Services.AddSyncfusionBlazor();
   builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

4. Set culture statically or dynamically (server, WebAssembly, or MAUI apps) 5. Create a CultureSwitcher component for dynamic culture selection

Script References

Applies to: Syncfusion Blazor Components

Framework: .NET 8, .NET 9, .NET 10 with Blazor Web App

Reference: Official Syncfusion Documentation

---

Overview

This document covers two critical aspects of Syncfusion Blazor implementation:

• Adding Script References — How to reference Syncfusion Blazor scripts in applications

Adding Script References

Introduction

JavaScript interop files are required for features that cannot be implemented natively in Blazor. Syncfusion® Blazor scripts must be properly referenced based on your application type and render mode.

CDN Reference Method

Basic CDN Reference

• For .NET 8, .NET 9, and .NET 10 Blazor Web App (any render mode: Server, WebAssembly, or Auto), add scripts in ~/Components/App.razor
• For Blazor WebAssembly (standalone) App, add scripts in ~/wwwroot/index.html

Important: Ensure the version in the CDN URLs matches the NuGet package version used in the application.

Main Script Reference

<head>
    <script src="https://cdn.syncfusion.com/blazor/33.1.44/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

Static Web Assets Method

Enable Static Web Assets

Call UseStaticFiles() in the app's ~/Program.cs file:

• For Blazor Web App (interactive mode: Auto) and Blazor WebAssembly App, call UseStaticFiles() in the Server project.

Reference Scripts from Static Web Assets

Combined scripts are available in the Syncfusion.Blazor.Core package:

<head>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

Individual Component Script References

For minimal component usage, reference component-specific scripts directly instead of the full library.

Reference Approach

Component Script File Mapping

---

Summary of Methods

bUnit Setup for Syncfusion Blazor Components

Applies to: Syncfusion Blazor Components

Framework: .NET 8+ with Blazor

Testing Frameworks: xUnit & NUnit

Reference: Official Syncfusion Documentation

Overview

bUnit is a testing library for Blazor components. This guide covers configuring Syncfusion Blazor components for unit testing using bUnit with both xUnit and NUnit test frameworks.

Table of Contents

1. Configure bUnit with xUnit Test Project 2. Configure bUnit with NUnit Test Project 3. Passing Parameters to Blazor Components 4. Common Setup Patterns

---

Configure bUnit with xUnit Test Project

Create xUnit Test Project

1. Open Visual Studio 2022 and create a new xUnit Test Project 2. Specify the project name and click Next 3. Select the target framework and click Create 4. Right-click the project in Solution Explorer and select Manage NuGet Packages 5. Search for bunit and install both NuGet packages in the test project:

• bunit

Add Existing Blazor App and Configure it on xUnit Project

1. Right-click the solution and select Add → Existing Project 2. Browse and add your existing Blazor project 3. Right-click the xUnit project and select Add → Project Reference, then select the added project 4. Add a Syncfusion Button sample to your Blazor project (~/Pages/Home.razor or ~/Pages/Index.razor):

@using Syncfusion.Blazor.Buttons

<SfButton @onclick="OnButtonClick">My Button</SfButton>

<span class="alert alert-info">Count: @clickCount</span>

@code {
    private int clickCount = 0;

    [Parameter]
    public int Step { get; set; } = 1;

    private void OnButtonClick()
    {
        clickCount += Step;
    }
}

5. Add the following bUnit test cases in ~/UnitTest1.cs on the xUnit project:

Note: Replace {Your App namespace} with your actual project namespace (e.g., MyBlazorApp).

using Xunit;
using Bunit;
using {Your App namespace}.Pages;
using Syncfusion.Blazor;
using Syncfusion.Blazor.Buttons;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.DependencyInjection.Extensions;

namespace BlazorXUnitTesting
{
    public class UnitTest1
    {
        [Fact]
        public void TestIndex()
        {
            using var testContext = new TestContext();

            // Add Syncfusion Blazor service.
            testContext.Services.AddSyncfusionBlazor()
                .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
            testContext.Services.AddOptions();

            // Rendering application Home component (~/Pages/Home.razor).
            var indexComponent = testContext.RenderComponent<Home>();
            
            // Find Syncfusion Button component.
            var sfButton = indexComponent.FindComponent<SfButton>();
            
            // Find span element.
            var span = indexComponent.Find("span.alert.alert-info");

            // Assert
            // Testing span element markup.
            span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");

            // Click Syncfusion Button component.
            sfButton.Find(".e-btn").Click();

            // Testing span element markup again.
            span.MarkupMatches("<span class=\"alert alert-info\">Count: 1</span>");
        }
    }
}

6. Right-click the xUnit project and select Run Tests. The test cases run and report the results.

---

Configure bUnit with NUnit Test Project

Create NUnit Test Project

1. Open Visual Studio 2022 and create a new NUnit 3 Test Project 2. Specify the project name and click Next 3. Select the target framework and click Create 4. Right-click the project in Solution Explorer and select Manage NuGet Packages 5. Search for bunit and install both NuGet packages in the test project:

• bunit

Add Existing Blazor App and Configure it on NUnit Project

1. Right-click the solution and select Add → Existing Project 2. Browse and add your existing Blazor project 3. Right-click the NUnit project and select Add → Project Reference, then select the added project 4. Add a Syncfusion Button sample to your Blazor project (~/Pages/Home.razor or ~/Pages/Index.razor):

@using Syncfusion.Blazor.Buttons

<SfButton @onclick="OnButtonClick">My Button</SfButton>

<span class="alert alert-info">Count: @clickCount</span>

@code {
    private int clickCount = 0;

    [Parameter]
    public int Step { get; set; } = 1;

    private void OnButtonClick()
    {
        clickCount += Step;
    }
}

5. Add the following bUnit test cases in ~/UnitTest1.cs on the NUnit project:

Note: Replace {Your App namespace} with your actual project namespace (e.g., MyBlazorApp).

using Bunit;
using NUnit.Framework;
using {Your App namespace}.Pages;
using Syncfusion.Blazor;
using Syncfusion.Blazor.Buttons;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.DependencyInjection.Extensions;

namespace BlazorNUnitTesting
{
    public class Tests
    {
        [Test]
        public void TestIndex()
        {
            // Arrange
            using var testContext = new Bunit.TestContext();

            // Add Syncfusion Blazor service.
            testContext.Services.AddSyncfusionBlazor()
                .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
            testContext.Services.AddOptions();

            // Rendering application Home component (~/Pages/Home.razor).
            var indexComponent = testContext.RenderComponent<Home>();
            
            // Find Syncfusion Button component.
            var sfButton = indexComponent.FindComponent<SfButton>();
            
            // Find span element.
            var span = indexComponent.Find("span.alert.alert-info");

            // Assert
            // Testing span element markup.
            span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");

            // Click Syncfusion Button component.
            sfButton.Find(".e-btn").Click();

            // Testing span element markup again.
            span.MarkupMatches("<span class=\"alert alert-info\">Count: 1</span>");
        }
    }
}

6. Right-click the NUnit project and select Run Tests. The test cases run and report the results.

---

Passing Parameters to Blazor Components

Set component parameters using the SetParametersAndRender method:

using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.DependencyInjection.Extensions;

[Fact]
public void TestParameter()
{
    using var testContext = new TestContext();

    // Add Syncfusion Blazor service.
    testContext.Services.AddSyncfusionBlazor()
        .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
    testContext.Services.AddOptions();

    // Rendering application Home component (~/Pages/Home.razor).
    var indexComponent = testContext.RenderComponent<Home>();
    
    // Set Home component parameter Step value.
    indexComponent.SetParametersAndRender(parameters => parameters.Add(p => p.Step, 5));

    // Find Syncfusion Button component.
    var sfButton = indexComponent.FindComponent<SfButton>();
    
    // Find span element.
    var span = indexComponent.Find("span.alert.alert-info");

    // Assert
    // Testing span element markup initial state.
    span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");

    // Click Syncfusion Button component.
    sfButton.Find(".e-btn").Click();

    // Testing span element markup again.
    span.MarkupMatches("<span class=\"alert alert-info\">Count: 5</span>");
}

Syncfusion Blazor Web App - Getting Started Reference

Applies to: Syncfusion Blazor Components

Framework: .NET 8, .NET 9, .NET 10 with Blazor Web App

Reference: Official Syncfusion Getting Started Documentation

Purpose: Quick reference guide for setting up and configuring Syncfusion Blazor components in a Blazor Web App project.

---

Prerequisites

• .NET 8 or later SDK installed
• Visual Studio, Visual Studio Code, or .NET CLI

---

Manual Project Setup Steps

Step 1: Create Blazor Web App with Explicit .NET Version

Using .NET CLI (Recommended):

dotnet new blazor --name BlazorGridApp --framework net10.0 --interactivity Server

CLI Parameters:

• --framework: Specify target .NET version (e.g., net8.0, net9.0, net10.0, net11.0) - REQUIRED to avoid using default SDK
• --interactivity: Choose render mode (Server, WebAssembly, or Auto)
• --all-interactive (optional): Enable global interactivity instead of per-page

Important Configuration:

• Always specify `--framework` to ensure correct .NET version targeting
• Select appropriate Interactive render mode (Auto, Server, or WebAssembly)
• Configure Interactivity location (Global, Per page/component)

Updating Existing Project to Different .NET Version: Edit the .csproj file's <TargetFramework> property:

<TargetFramework>net10.0</TargetFramework>

Step 2: Install NuGet Packages

NOTE

• Install packages from nuget.org and pick latest version.
• DON'T USE Internal/local environment Nuget.config files
• DON'T USE Overall Syncfusion.Blazor.nupkg package and its assets.
• Use individual Nuget packages and refer assets from that package.

Install the following NuGet packages into your project:

Syncfusion.Blazor.Grid
Syncfusion.Blazor.Themes

Or via .NET CLI:

dotnet add package Syncfusion.Blazor.Grid
dotnet add package Syncfusion.Blazor.Themes

Important Notes:

• For WebAssembly or Auto render modes: Install packages in the client project
• For Server render mode: Install in the main project
• All Syncfusion Blazor packages available at: NuGet.org - Syncfusion.Blazor
• See NuGet packages documentation for complete list

Step 3: Add Import Namespaces

Edit ~/_Imports.razor file in the client project:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids

Step 4: Register Syncfusion® Blazor Service

Edit Program.cs file in your project:

using Syncfusion.Blazor;

// ... other configuration

builder.Services.AddSyncfusionBlazor();

// ... rest of configuration

Important:

• For WebAssembly or Auto render modes: Register service in Program.cs of both server AND client projects
• For Server render mode: Register only in the main project

Step 5: Add Stylesheet and Script Resources

Edit App.razor file and include theme and script resources:

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
<!-- Other content -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

For .NET 10 or above

<link rel="stylesheet" href="@Assets["_content/Syncfusion.Blazor.Themes/fluent2.css"]" />
<!-- Other content -->
<script src="@Assets["_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"]"></script>

Alternative Theme Resource Methods: 1. Static Web Assets (shown above) - Recommended 2. CDN - For cloud-hosted scenarios

Step 6: Add Syncfusion® Blazor DataGrid Component

Add component to your razor page in ~/Components/Pages/*.razor:

Basic Grid (Minimal):

@* If using Per page/component interactivity, add render mode here *@
@rendermode InteractiveServer

<SfGrid DataSource="@Orders" />

@code {
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 10).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string? CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

Render Mode Notes:

• Only add @rendermode if using Per page/component interactivity
• If using Global interactivity with Auto/WebAssembly, render mode already configured in App.razor
• Supported modes: InteractiveAuto, InteractiveServer, InteractiveWebAssembly

Step 7: Run the Application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in your default browser.

---

Render Mode Reference

Interactive Render Modes Available:

• InteractiveAuto - Client-side with fallback to server-side
• InteractiveServer - Server-side rendering only
• InteractiveWebAssembly - Client-side WebAssembly execution

Interactivity Locations:

• Global - All components use specified render mode (configured in App.razor)
• Per page/component - Specify render mode per component individually

---

Common Configuration Scenarios

Server-Side Rendering (Server)

Render mode: InteractiveServer
Interactivity: Global
Package location: Main project
Service registration: Program.cs (main project only)

Client-Side WebAssembly

Render mode: InteractiveWebAssembly
Interactivity: Global
Package location: Client project
Service registration: Program.cs (both server and client)

Hybrid (Auto)

Render mode: InteractiveAuto
Interactivity: Global or Per page/component
Package location: Client project
Service registration: Program.cs (both server and client)

---

Available Themes

Reference the desired CSS file in App.razor:

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />

Blazor Localization and Globalization Guide

Overview

Globalization combines internationalization (i18n) and localization (l10n):

• Internationalization: Parsing and formatting dates, times, numbers, and currencies
• Localization: Adding culture-specific customizations and translating UI text

The Syncfusion® Blazor UI components use American English (en-US) by default. Blazor relies on .NET globalization to parse and format numbers and dates based on the active culture.

---

Localization of Syncfusion® Blazor Components

Step 1: Adding Culture-Based .resx Files

Syncfusion® components can be localized using Resource .resx files.

To add resource files:

1. Download default and culture-based resource files from the GitHub repository 2. Copy the default .resx file (SfResources.resx) and culture-specific .resx files to the Resources folder

• For .NET MAUI Blazor apps, create a LocalizationResources folder instead

3. Open the default resource file (SfResources.resx) in the Resource Editor 4. Set Access Modifier to Public

Note: Update the localization files whenever upgrading Syncfusion® NuGet packages to prevent mismatches in localization strings.

Step 2: Create and Register Localization Service

The ISyncfusionStringLocalizer interface acts as middleware between Syncfusion® Blazor UI components and resource files. It uses ResourceManager to provide culture-specific resources at runtime.

Create a SyncfusionLocalizer class:

using Syncfusion.Blazor;

public class SyncfusionLocalizer : ISyncfusionStringLocalizer
{
    public string GetText(string key)
    {
        return this.ResourceManager.GetString(key);
    }

    public System.Resources.ResourceManager ResourceManager
    {
        get
        {
            // Replace the ApplicationNamespace with your application name.
            return ApplicationNamespace.Resources.SfResources.ResourceManager;

            // For .Net Maui Blazor App
            // return ApplicationNamespace.LocalizationResources.SfResources.ResourceManager;
        }
    }
}

Register in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();
// Register the locale service to localize the SyncfusionBlazor components.
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

Important: For Blazor Web App using Interactive render mode (WebAssembly or Auto), register SyncfusionLocalizer and the Syncfusion® Blazor services in both Server and Client Program.cs files. For .NET MAUI Blazor apps, register in MauiProgram.cs.

---

Setting Culture

Statically Set the Culture

Blazor Web App and Blazor WASM App

Using Blazor's Start Options:

1. Add autostart="false" to the Blazor <script> tag in ~/Components/App.razor (for Blazor Web Apps) or wwwroot/index.html (for WASM Standalone apps)

<body>
    ...
    <script src="_framework/blazor.web.js" autostart="false"></script>
    ...
</body>

2. Add the script block below the Blazor <script> tag to start Blazor with a specific culture:

<body>
    ...
    <script src="_framework/blazor.web.js" autostart="false"></script>
    <script>
        Blazor.start({
            webAssembly: {
                applicationCulture: 'de'
            }
        });
    </script>
    ...
</body>

Using C# Code:

using System.Globalization;

CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("de-DE");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("de-DE");

MAUI Blazor App

Set culture in MauiProgram.cs:

using System.Globalization;

CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("de-DE");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("de-DE");

---

Dynamically Set the Culture

Blazor Web App and Blazor Standalone WASM App

1. Configure in .csproj:

<PropertyGroup>
    <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>

2. Add JavaScript for culture persistence:

<script src="_framework/blazor.web.js"></script>
<script>
    window.cultureInfo = {
        get: () => window.localStorage['BlazorCulture'],
        set: (value) => window.localStorage['BlazorCulture'] = value
    };
</script>

3. Configure in Program.cs:

using Microsoft.JSInterop;
using System.Globalization;

builder.Services.AddSyncfusionBlazor();
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

var host = builder.Build();

// Setting culture of the application
var jsInterop = host.Services.GetRequiredService<IJSRuntime>();
var result = await jsInterop.InvokeAsync<string>("cultureInfo.get");
CultureInfo culture;
if (result != null)
{
    culture = new CultureInfo(result);
}
else
{
    culture = new CultureInfo("en-US");
    await jsInterop.InvokeVoidAsync("cultureInfo.set", "en-US");
}
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

await builder.Build().RunAsync();

4. Create a CultureSwitcher component:

@using System.Globalization
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

<select @bind="Culture">
    @foreach (var culture in supportedCultures)
    {
        <option value="@culture">@culture.DisplayName</option>
    }
</select>

@code {
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("de-DE"),
        new CultureInfo("fr-FR"),
        new CultureInfo("ar-AE"),
        new CultureInfo("zh-HK")
    };

    private CultureInfo Culture
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                var js = (IJSInProcessRuntime)JSRuntime;
                js.InvokeVoid("cultureInfo.set", value.Name);
                NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
            }
        }
    }
}

5. Add CultureSwitcher to MainLayout.razor:

<div class="page">
    ....
    <main>
        <div class="top-row px-4">
            <CultureSwitcher @rendermode="@InteractiveAuto" />
            ....
        </div>
    </main>
</div>

Blazor Server App and Blazor Web App (Interactive Server)

1. Configure in Program.cs:

builder.Services.AddControllers();
builder.Services.AddSyncfusionBlazor();
builder.Services.AddLocalization();

var supportedCultures = new[] { "en-US", "de-DE", "fr-FR", "ar-AE", "zh-HK" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

var app = builder.Build();
app.UseRequestLocalization(localizationOptions);

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapControllers();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

2. Set culture in App.razor:

@using System.Globalization
@using Microsoft.AspNetCore.Localization

@code {
    [CascadingParameter]
    public HttpContext? HttpContext { get; set; }

    protected override void OnInitialized()
    {
        HttpContext?.Response.Cookies.Append(
            CookieRequestCultureProvider.DefaultCookieName,
            CookieRequestCultureProvider.MakeCookieValue(
                new RequestCulture(
                    CultureInfo.CurrentCulture,
                    CultureInfo.CurrentUICulture)));
    }
}

3. Create a CultureController:

using Microsoft.AspNetCore.Localization;
using Microsoft.AspNetCore.Mvc;

[Route("[controller]/[action]")]
public class CultureController : Controller
{
    public IActionResult SetCulture(string culture, string redirectUri)
    {
        if (culture != null)
        {
            HttpContext.Response.Cookies.Append(
                CookieRequestCultureProvider.DefaultCookieName,
                CookieRequestCultureProvider.MakeCookieValue(
                    new RequestCulture(culture)));
        }
        return LocalRedirect(redirectUri);
    }
}

4. Create a CultureSwitcher component:

@using System.Globalization
@inject NavigationManager NavigationManager
@inject HttpClient Http

<p>
    <label>
        Select your locale:
        <select @bind="Culture">
            @foreach (var culture in supportedCultures)
            {
                <option value="@culture">@culture.DisplayName</option>
            }
        </select>
    </label>
</p>

@code {
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("de-DE"),
        new CultureInfo("fr-FR"),
        new CultureInfo("ar-AE"),
        new CultureInfo("zh-HK")
    };

    protected override void OnInitialized()
    {
        Culture = CultureInfo.CurrentCulture;
    }

    private CultureInfo Culture
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                var uri = new Uri(NavigationManager.Uri)
                    .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
                var cultureEscaped = Uri.EscapeDataString(value.Name);
                var uriEscaped = Uri.EscapeDataString(uri);

                NavigationManager.NavigateTo(
                    $"Culture/SetCulture?culture={cultureEscaped}&redirectUri={uriEscaped}",
                    forceLoad: true);
            }
        }
    }
}

5. Add CultureSwitcher to MainLayout.razor:

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <CultureSwitcher></CultureSwitcher>
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

MAUI Blazor App

1. Configure culture in App.xaml.cs:

using System.Globalization;

namespace LocalizationMauiBlazor
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            var language = Preferences.Get("language", "en-US");
            var culture = new CultureInfo(language);
            CultureInfo.DefaultThreadCurrentCulture = culture;
            CultureInfo.DefaultThreadCurrentUICulture = culture;
            MainPage = new MainPage();
        }
    }
}

2. Create a CultureSwitcher component:

@using System.Globalization
@inject NavigationManager NavigationManager

<select @bind="Culture">
    @foreach (var culture in supportedCultures)
    {
        <option value="@culture">@culture.DisplayName</option>
    }
</select>

@code {
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("de-DE"),
        new CultureInfo("fr-FR"),
        new CultureInfo("ar-AE"),
        new CultureInfo("zh-HK")
    };

    private CultureInfo Culture
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                CultureInfo.DefaultThreadCurrentCulture = value;
                CultureInfo.DefaultThreadCurrentUICulture = value;
                Preferences.Set("language", value.Name);
                NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
            }
        }
    }
}

3. Add CultureSwitcher to MainLayout.razor:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <CultureSwitcher />
            @Body
        </article>
    </main>
</div>

---

Globalization in Blazor

Culture and UI Culture

The Blazor framework uses built-in .NET types from the System.Globalization namespace:

• Culture (CultureInfo.CurrentCulture): Determines the formatting of numbers, dates, and times
• UI Culture (CultureInfo.CurrentUICulture): Determines the language of the user interface and which .resx resources are used

HTML Input Types and Culture

When working with HTML form fields, browser-native input types affect culture behavior:

Consistent Across Browsers:

• date
• number

Inconsistently Supported (Less Reliable):

• datetime-local
• month
• week

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

Globalization Example

The following example shows how globalization affects rendered values by formatting dates and numbers according to the current culture:

@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;
}

---

Alternative: Localization Using Database

Instead of using .resx resource files, you can perform localization using a database. For details, refer to the support article on database localization.

---