ASP.NET Core Blazor глобализация и локализация

Для Blazor приложений локализация сообщений проверки для проверки форм с помощью заметок данных поддерживается, если DisplayAttribute.ResourceType и ValidationAttribute.ErrorMessageResourceType реализованы.

Для Blazor приложений локализованные сообщения проверки для проверки форм с помощью заметок данных поддерживаются двумя путями:

• Путь к статическим ресурсам, использующий DisplayAttribute.ResourceType для отображаемых имен и ValidationAttribute.ErrorMessageResourceType для локализованных сообщений об ошибках. Этот подход поддерживается в каждом выпуске.
• Пакет Microsoft.Extensions.Validation, который обрабатывает сообщения проверки и отображаемые имена через IStringLocalizer. Доступно для приложений Blazor, которые включают новый конвейер проверки с помощью AddValidation(). Дополнительные сведения см. в разделе Как сделать содержимое приложения ASP.NET Core локализуемым.

Blazor WebAssembly использует ограниченный API глобализации и встроенные международные компоненты для локалей языковых стандартов Юникода (ICU).

В приложениях WebAssembly (Wasm) при отключении инвариантного режима глобализации загружается файл данных ICU. Существует четыре основных типа этих файлов:

• icudt.dat: полные данные
• icudt_EFIGS.dat: данные для локалей: en-*, fr-FR, es-ES, it-IT и de-DE.
• icudt_CJK.dat: данные для языковых стандартов: en-*, ja, ko, и zh-*.
• icudt_no_CJK.dat: данные для всех локалей из icudt.dat, за исключением ja, ko, и zh-*.

Укажите один файл для загрузки с помощью свойства MSBuild <BlazorIcuDataFileName> в файле проекта приложения .csproj. Следующий пример загружает icudt_no_CJK.dat файл:

<PropertyGroup>
  <BlazorIcuDataFileName>icudt_no_CJK.dat</BlazorIcuDataFileName>
</PropertyGroup>

<BlazorIcuDataFileName> принимает только один файл. Файл может быть пользовательским файлом, созданным разработчиком. Сведения о создании пользовательского файла ICU см. в разделе Глобализация WASM: Пользовательский ICU.

Если файл не указан с помощью <BlazorIcuDataFileName>, проверяется культура приложения, и соответствующий файл ICU загружается для этой культуры. Например, настройка культуры en-US приводит к загрузке файла icudt_EFIGS.dat. Для zh-CNэтого icudt_CJK.dat используется файл.

Дополнительные сведения см. в статье .NET глобализация и ICU, ICU в WebAssembly.

Blazor WebAssembly использует ограниченный API глобализации и встроенные международные компоненты для локалей языковых стандартов Юникода (ICU). Дополнительные сведения см. в статье .NET глобализация и ICU, ICU в WebAssembly.

Загрузка настраиваемого подмножества языковых стандартов в приложении Blazor WebAssembly поддерживается в .NET 8 или более поздней версии. Дополнительные сведения см. в этом разделе для .NET 8 или более поздней версии этой статьи.

Сведения о часовом поясе

Этот раздел относится только к сценариям на стороне Blazor клиента.

Внедрение инвариантной глобализации приводит только к использованию не локализованных имен часовых поясов. Чтобы обрезать код часового пояса и данные, что сокращает размер загрузки приложения и приводит к более быстрому запуску приложения, примените <InvariantTimezone> свойство MSBuild со значением true в файле проекта приложения:

<PropertyGroup>
  <InvariantTimezone>true</InvariantTimezone>
</PropertyGroup>

Для обеспечения правильности сведений о часовом поясе включается файл данных. Если приложению не требуется эта функция, попробуйте отключить ее, установив <BlazorEnableTimeZoneSupport> для свойства MSBuild значение false в файле проекта приложения:

<PropertyGroup>
  <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
</PropertyGroup>

Предварительный рендеринг на стороне клиента в Blazor Web App сохраняет культуру сервера

По умолчанию предварительный рендеринг на стороне клиента на сервере (проект .Client в Blazor Web App) сохраняет серверные CurrentCulture и CurrentUICulture в состоянии компонента и применяет их на клиенте до загрузки вспомогательных сборок.

В приложениях, в которых клиент должен выбирать культуру независимо от сервера, можно отказаться от этого с помощью WebAssemblyComponentsOptions.UseCultureFromServer в файле Blazor Web App компонента Program:

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents(options =>
    {
        options.UseCultureFromServer = false;
    });

В клиентской разработке задайте BlazorWebAssemblyLoadAllGlobalizationData свойство true в файле проекта клиентского приложения (.csproj):

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

При разработке на стороне клиента динамическое задание культуры из заголовка Accept-Language не поддерживается.

В разработке на стороне сервера укажите поддерживаемые язык и региональные параметры приложения перед любым ПО промежуточного слоя, которое может проверить язык и региональные параметры запроса. Как правило, размещайте промежуточное ПО локализации непосредственно перед вызовом MapRazorComponents. В следующем примере настраиваются поддерживаемые языки и культуры для американского английского и коста-риканского испанского.

При разработке на стороне сервера укажите поддерживаемые культуры приложения сразу после добавления промежуточного ПО маршрутизации UseRouting в конвейер обработки. Следующий пример настраивает поддерживаемые языки и региональные параметры для английского Соединенных Штатов и испанского языка Коста-Рики с помощью следующего API:

• AddSupportedCultures добавляет набор поддерживаемых культур для глобализации (форматы даты, чисел и валют).
• AddSupportedUICultures добавляет набор поддерживаемых региональных параметров пользовательского интерфейса для локализации (переведенные строки пользовательского интерфейса для отображения содержимого).

Этот раздел относится к Blazor WebAssembly приложениям и Blazor Web App компонентам, которые применяют режим интерактивной отрисовки WebAssembly.

Этот раздел относится к приложениям Blazor WebAssembly.

Задайте для свойства BlazorWebAssemblyLoadAllGlobalizationData значение true в файле проекта приложения (.csproj):

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

Конфигурация компоновщика промежуточный язык (IL) для рендеринга на стороне клиента удаляет информацию по интернационализации, за исключением явно заданных языковых стандартов. Для получения более подробной информации см. раздел Настройка компоновщика для ASP.NET CoreBlazor.

Blazor Web App:

<script>
  Blazor.start({
    webAssembly: {
      applicationCulture: 'en-US'
    }
  });
</script>

Автономное Blazor WebAssembly:

<script>
  Blazor.start({
    applicationCulture: 'en-US'
  });
</script>

Этот раздел относится к компонентам Blazor Web App, использующим интерактивный режим отрисовки на сервере, а также к приложениям Blazor Server.

Этот раздел относится к приложениям Blazor Server.

Серверные приложения локализуются с помощью промежуточного ПО локализации. Добавьте службы локализации в приложение с помощью AddLocalization.

В файле Program:

builder.Services.AddLocalization();

Укажите статический язык и региональные параметры в Program файле перед любым ПО промежуточного слоя, которое может проверить язык и региональные параметры запроса. Как правило, размещайте промежуточное ПО локализации непосредственно перед MapRazorComponents. В следующем примере настраивается американский вариант английского языка.

Укажите статическую культуру в файле Program сразу после добавления ПО промежуточной обработки маршрутизации (UseRouting) в конвейер обработки запросов. В следующем примере настраивается американский вариант английского языка.

app.UseRequestLocalization("en-US");

Значение культуры для должно соответствовать языковому тегу в формате BCP-47 .

Сведения о порядке промежуточного ПО локализации в конвейере промежуточного ПО файла Program см. в разделе Промежуточное ПО ASP.NET Core.

Серверные приложения локализуются с помощью промежуточного ПО локализации. Добавьте службы локализации в приложение с помощью AddLocalization.

В Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

Укажите статическую культуру в Startup.Configure (Startup.cs) сразу после добавления middleware маршрутизации в конвейер обработки запросов. В следующем примере настраивается американский вариант английского языка.

app.UseRequestLocalization("en-US");

Значение культуры для должно соответствовать языковому тегу в формате BCP-47 .

Сведения о порядке промежуточного ПО локализации в конвейере промежуточного ПО Startup.Configure, см. Промежуточное ПО ASP.NET Core.

Этот раздел относится к Blazor WebAssembly приложениям и Blazor Web App компонентам, которые применяют режим интерактивной отрисовки WebAssembly.

Этот раздел относится к приложениям Blazor WebAssembly.

Задайте для свойства BlazorWebAssemblyLoadAllGlobalizationData значение true в файле проекта:

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

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select @bind="selectedCulture" @bind:after="ApplySelectedCultureAsync">
            @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("es-CR"),
    };

    private CultureInfo? selectedCulture;

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

    private async Task ApplySelectedCultureAsync()
    {
        if (selectedCulture is not null &&
            CultureInfo.CurrentCulture != selectedCulture)
        {
            await JS.InvokeVoidAsync("blazorCulture.set", selectedCulture.Name);

            Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
        }
    }
}

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select value="@selectedCulture" @onchange="HandleSelectedCultureChanged">
            @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("es-CR"),
    };

    private CultureInfo? selectedCulture;

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

    private async Task HandleSelectedCultureChanged(ChangeEventArgs args)
    {
        selectedCulture = CultureInfo.GetCultureInfo((string)args.Value!);

        if (selectedCulture is not null &&
            CultureInfo.CurrentCulture != selectedCulture)
        {
            await JS.InvokeVoidAsync("blazorCulture.set", selectedCulture.Name);

            Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
        }
    }
}

Этот раздел относится к Blazor Web Apps, использующим глобальный режим отрисовки Interactive Server, и приложениям Blazor Server. Рекомендации по Blazor Web App, использующему интерактивность отдельных страниц и компонентов, см. в разделе Динамическая настройка культуры в Blazor Web App в соответствии с предпочтениями пользователя.

Этот раздел относится к приложениям Blazor Server.

Перед вызовом MapRazorComponents в конвейере обработки запросов поместите следующий код:

После добавления промежуточного ПО маршрутизации (UseRouting) в конвейер обработки запросов разместите следующий код:

Требуются следующие пространства имен для компонента App:

• System.Globalization
• Microsoft.AspNetCore.Localization

Добавьте пространства имен System.Globalization и Microsoft.AspNetCore.Localization в верхнюю часть файла компонента App (Components/App.razor):

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

Добавьте следующий @code блок в нижней App части файла компонента:

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

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

Для внесения изменений в файл Pages/_Host.cshtml требуются следующие пространства имен:

• System.Globalization
• Microsoft.AspNetCore.Localization

Добавьте в файл следующую Razor разметку:

@using System.Globalization
@using Microsoft.AspNetCore.Localization
@{
    this.HttpContext.Response.Cookies.Append(
        CookieRequestCultureProvider.DefaultCookieName,
        CookieRequestCultureProvider.MakeCookieValue(
            new RequestCulture(
                CultureInfo.CurrentCulture,
                CultureInfo.CurrentUICulture)));
}

Чтобы предоставить пользовательский интерфейс, позволяющий пользователю выбрать культуру, используйте подход на основе перенаправления в рамках локализации cookie. Приложение сохраняет выбранную пользователем культуру через перенаправление на конечную точку Minimal API. Конечная точка устанавливает выбранную пользователем языковую и региональную настройку в файл cookie cookie и перенаправляет пользователя обратно к исходному URI. Процесс аналогичен тому, что происходит в веб-приложении, когда пользователь пытается получить доступ к защищенному ресурсу, где пользователь перенаправляется на страницу входа, а затем обратно к исходному ресурсу.

В начале файла Program добавьте следующую инструкцию using для необходимого пространства имен:

using Microsoft.AspNetCore.Localization;

В конвейере обработки запросов файла приложения Program после вызова UseRequestLocalization:

app.MapGet("/Culture/Set", (string? culture, string redirectUri = "/",
    HttpContext context) =>
{
    if (!string.IsNullOrWhiteSpace(culture))
    {
        context.Response.Cookies.Append(
            CookieRequestCultureProvider.DefaultCookieName,
            CookieRequestCultureProvider.MakeCookieValue(
                new RequestCulture(culture, culture)));
    }

    return Results.LocalRedirect(redirectUri);
});

Если приложение не настроено для обработки действий контроллера:

• Добавьте службы MVC, вызвав метод AddControllers в коллекции служб в файле Program.

  builder.Services.AddControllers();
  

• Добавьте маршрутизацию конечных точек контроллера в Program файл, вызвав MapControllers на IEndpointRouteBuilder (app):

  app.MapControllers();
  

Чтобы предоставить пользовательский интерфейс, позволяющий пользователю выбрать культуру, используйте подход на основе перенаправления в рамках локализации cookie. Приложение сохраняет выбранную пользователем культуру посредством перенаправления к контроллеру. Контроллер устанавливает выбранный пользователем язык и региональные параметры в cookie, а затем перенаправляет пользователя обратно на исходный URI. Процесс аналогичен тому, что происходит в веб-приложении, когда пользователь пытается получить доступ к защищенному ресурсу, где пользователь перенаправляется на страницу входа, а затем обратно к исходному ресурсу.

Controllers/CultureController.cs:

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

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

        return LocalRedirect(redirectUri);
    }
}

В следующем компоненте CultureSelector показано, как вызвать конечную точку Set с новой культурой. Компонент помещается в папку Components для использования во всем приложении.

Components/CultureSelector.razor:

Следующий компонент CultureSelector показывает, как вызвать конечную точку Set с новыми языковыми и региональными параметрами. Компонент помещается в папку Shared для использования во всем приложении.

Shared/CultureSelector.razor:

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select @bind="selectedCulture" @bind:after="ApplySelectedCultureAsync">
            @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("es-CR"),
    };

    private CultureInfo? selectedCulture;

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

    private async Task ApplySelectedCultureAsync()
    {
        if (selectedCulture is not null &&
            CultureInfo.CurrentCulture != selectedCulture)
        {
            var uri = new Uri(Navigation.Uri)
                .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var cultureEscaped = Uri.EscapeDataString(selectedCulture.Name);
            var uriEscaped = Uri.EscapeDataString(uri);

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

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

<p>
    <label>
        Select your locale:
        <select value="@selectedCulture" @onchange="HandleSelectedCultureChanged">
            @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("es-CR"),
    };

    private CultureInfo? selectedCulture;

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

    private async Task HandleSelectedCultureChanged(ChangeEventArgs args)
    {
        selectedCulture = CultureInfo.GetCultureInfo((string)args.Value!);

        if (selectedCulture is not null &&
            CultureInfo.CurrentCulture != selectedCulture)
        {
            var uri = new Uri(Navigation.Uri)
                .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var cultureEscaped = Uri.EscapeDataString(selectedCulture.Name);
            var uriEscaped = Uri.EscapeDataString(uri);

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

В разметке заголовка Components/Layout/MainLayout.razor:

В разметке заголовка Shared/MainLayout.razor:

В предыдущем примере предполагается, что приложение принимает глобальную интерактивность, указывая режим рендеринга Interactive Server для компонента Routes в компоненте App (Components/App.razor).

<Routes @rendermode="InteractiveServer" />

Если приложение использует интерактивность на уровне страницы/компонента и только серверные компоненты предоставляют пользовательский интерфейс выбора языка и региональных параметров, внесите следующие изменения:

• Добавьте режим рендеринга интерактивного сервера CultureExample1 в начало файла компонента (Components/Pages/CultureExample1.razor).

  @rendermode InteractiveServer
  

• В основном макете приложения (Components/Layout/MainLayout.razor) примените режим отрисовки интерактивного сервера к компоненту CultureSelector :

  <CultureSelector @rendermode="InteractiveServer" />
  

Динамически задать культурные настройки в Blazor Web App в соответствии с предпочтениями пользователя.

Этот раздел относится к Blazor Web App, использующим интерактивность на уровне отдельных страниц и компонентов.

Примеры расположений, в которых приложение может хранить предпочтения пользователя, включают локальное хранилище браузера (обычно для клиентских сценариев), локализацию cookie или базу данных (обычно для сценариев на стороне сервера), оба локальное хранилище и локализацию cookie (Blazor Web Appс компонентами сервера и WebAssembly), или во внешней службе, подключенной к внешней базе данных и доступной через веб-API. В следующем примере показано, как использовать локальное хранилище браузера для отрисованных на клиентской стороне компонентов (CSR) и локализацию cookie для отрисованных на стороне сервера компонентов (SSR). Инструкции в этом разделе также применимы к компонентам в приложениях, использующих рендеринг на уровне страницы или компонента и указывающих режим рендеринга Interactive Auto (@rendermode InteractiveAuto).

.Client Обновления проекта

Добавьте пакет Microsoft.Extensions.Localization в проект .Client.

Установите свойство BlazorWebAssemblyLoadAllGlobalizationData на true в .Client файле проекта.

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

Добавьте пространства имен System.Globalization и Microsoft.JSInterop в начало файла проекта .ClientProgram.

using System.Globalization;
using Microsoft.JSInterop;

Удалите следующую строку:

- await builder.Build().RunAsync();

Замените указанную выше строку следующим кодом. Код добавляет службу локализации Blazor в коллекцию служб приложения с помощью AddLocalization и использует взаимодействие с JS для вызова JS и получения выбора культурных настроек пользователя из локального хранилища. Если локальное хранилище не содержит язык и региональные параметры для пользователя, код задает значение по умолчанию США английский (en-US).

builder.Services.AddLocalization();

var host = builder.Build();

const string defaultCulture = "en-US";

var js = host.Services.GetRequiredService<IJSRuntime>();
var result = await js.InvokeAsync<string>("blazorCulture.get");
var culture = CultureInfo.GetCultureInfo(result ?? defaultCulture);

if (result == null)
{
    await js.InvokeVoidAsync("blazorCulture.set", defaultCulture);
}

CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

await host.RunAsync();

Добавьте следующий компонент CultureSelector в проект .Client в папке Shared. Shared Если папка не существует в .Client проекте, создайте ее для хранения общих компонентов.

Когда пользователь изменяет культуру, JS межоперационное взаимодействие сохраняет культуру в локальном хранилище браузера, а конечная точка Minimal API обновляет локализацию cookie с учетом культуры. Минимальная конечная точка API добавляется в приложение позже в разделе обновлений проекта сервера .

Shared/CultureSelector.razor:

@using System.Globalization
@inject IJSRuntime JS
@inject NavigationManager Navigation

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

@code
{
    private CultureInfo[] supportedCultures = 
        [ 
            new CultureInfo("en-US"), 
            new CultureInfo("es-CR"),
        ];

    private CultureInfo? selectedCulture;

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

    private async Task ApplySelectedCultureAsync()
    {
        if (selectedCulture is not null &&
            CultureInfo.CurrentCulture != selectedCulture)
        {
            await JS.InvokeVoidAsync("blazorCulture.set", selectedCulture.Name);

            var uri = new Uri(Navigation.Uri)
                .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var cultureEscaped = Uri.EscapeDataString(selectedCulture.Name);
            var uriEscaped = Uri.EscapeDataString(uri);

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

В файле импорта серверного проекта (_Imports.razor) добавьте пространство имен для папки Shared проекта .Client (обновите пространство имен в соответствии с вашим приложением):

@using BlazorSample.Client.Shared

Поместите следующую разметку в содержимое заголовка файла Components/Layout/MainLayout.razor:

<CultureSelector @rendermode="InteractiveAuto" />

.Client В проекте поместите следующий CultureClient компонент для изучения того, как глобализация работает для компонентов CSR.

Pages/CultureClient.razor:

@page "/culture-client"
@rendermode InteractiveWebAssembly
@using System.Globalization

<PageTitle>Culture Client</PageTitle>

<h1>Culture Client</h1>

<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</li>
    <li><b>Number</b>: @number.ToString("N2")</li>
</ul>

<h2><code>&lt;input&gt;</code> elements that don't set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.CurrentCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input @bind="number" /></label></li>
</ul>

<h2><code>&lt;input&gt;</code> elements that set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.InvariantCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input type="date" @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input type="number" @bind="number" /></label></li>
</ul>

@code {
    private DateTime dt = DateTime.Now;
    private double number = 1999.69;
}

В проекте .Client поместите следующий компонент CultureServer для изучения того, как глобализация работает для компонентов SSR.

Pages/CultureServer.razor:

@page "/culture-server"
@rendermode InteractiveServer
@using System.Globalization

<PageTitle>Culture Server</PageTitle>

<h1>Culture Server</h1>

<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</li>
    <li><b>Number</b>: @number.ToString("N2")</li>
</ul>

<h2><code>&lt;input&gt;</code> elements that don't set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.CurrentCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input @bind="number" /></label></li>
</ul>

<h2><code>&lt;input&gt;</code> elements that set a <code>type</code></h2>

<p>
    The following <code>&lt;input&gt;</code> elements use
    <code>CultureInfo.InvariantCulture</code>.
</p>

<ul>
    <li><label><b>Date:</b> <input type="date" @bind="dt" /></label></li>
    <li><label><b>Number:</b> <input type="number" @bind="number" /></label></li>
</ul>

@code {
    private DateTime dt = DateTime.Now;
    private double number = 1999.69;
}

Используйте компонент , показанный в разделе демонстрационного компонента , чтобы изучить, как глобализация работает для компонента, наследующего глобальный режим автоматической отрисовки. Добавьте компонент CultureExample1 в папку .Client проекта Pages. В верхней части компонента укажите режим интерактивной автоматической отрисовки:

@rendermode InteractiveAuto

Добавьте компоненты CultureClient, CultureServer и CultureExample1 в навигацию боковой панели в Components/Layout/NavMenu.razor серверного проекта:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="culture-server">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Server)
    </NavLink>
</div>
<div class="nav-item px-3">
    <NavLink class="nav-link" href="culture-client">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Client)
    </NavLink>
</div>
<div class="nav-item px-3">
    <NavLink class="nav-link" href="culture-example-1">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Auto)
    </NavLink>
</div>

Обновления проекта сервера

Добавьте пакет Microsoft.Extensions.Localization в серверный проект.

Серверные приложения локализуются с помощью промежуточного ПО локализации. Добавьте службы локализации в приложение с помощью AddLocalization.

В файле проекта Program сервера, где зарегистрированы службы:

builder.Services.AddLocalization();

Задайте для приложения стандартные и поддерживаемые языки и региональные параметры с помощью RequestLocalizationOptions.

Перед вызовом MapRazorComponents в конвейере обработки запросов поместите следующий код:

var supportedCultures = new[] { "en-US", "es-CR" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

app.UseRequestLocalization(localizationOptions);

В следующем примере показано, как установить текущую культуру в cookie, которую может прочитать ПО промежуточной обработки локализации.

Добавьте пространства имён System.Globalization и Microsoft.AspNetCore.Localization в верхнюю часть компонента App (Components/App.razor):

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

Культура приложения для отрисовки на стороне клиента задается с помощью API Blazor фреймворка. Выбор культуры пользователя можно сохранить в локальном хранилище браузера для компонентов CSR.

После тега Blazor<script> добавьте функции JS для получения и установки выбранных пользователем языка и региональных параметров с использованием локального хранилища браузера:

<script>
  window.blazorCulture = {
    get: () => window.localStorage['BlazorCulture'],
    set: (value) => window.localStorage['BlazorCulture'] = value
  };
</script>

Добавьте следующий @code блок в нижней App части файла компонента:

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

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

Чтобы предоставить пользовательский интерфейс, позволяющий пользователю выбрать культуру, используйте подход на основе перенаправления в рамках локализации cookie. Приложение сохраняет выбранную пользователем культуру через перенаправление на конечную точку Minimal API. Конечная точка сохраняет выбранную пользователем культуру в cookie и перенаправляет пользователя обратно на исходный URI. Процесс аналогичен тому, что происходит в веб-приложении, когда пользователь пытается получить доступ к защищенному ресурсу, где пользователь перенаправляется на страницу входа, а затем обратно к исходному ресурсу.

В верхней части файла Program добавьте следующую инструкцию using для необходимого пространства имен:

using Microsoft.AspNetCore.Localization;

В конвейере обработки запросов файла приложения Program после вызова UseRequestLocalization:

app.MapGet("/Culture/Set", (string? culture, string redirectUri = "/",
    HttpContext context) =>
{
    if (!string.IsNullOrWhiteSpace(culture))
    {
        context.Response.Cookies.Append(
            CookieRequestCultureProvider.DefaultCookieName,
            CookieRequestCultureProvider.MakeCookieValue(
                new RequestCulture(culture, culture)));
    }

    return Results.LocalRedirect(redirectUri);
});

Задайте для свойства BlazorWebAssemblyLoadAllGlobalizationData значение true в файле проекта приложения (.csproj):

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

• Добавьте службы локализации в приложение с помощью AddLocalization.
• Укажите культуры по умолчанию и поддерживаемые культуры приложения в Program файле. Следующий пример настраивает поддерживаемые культуры для американского английского и коста-риканского варианта испанского языка.

builder.Services.AddLocalization();

Разместите компонент промежуточного ПО для локализации перед любым компонентом промежуточного ПО, который может проверять культуру запроса. Как правило, разместите посредующее ПО непосредственно перед вызовом MapRazorComponents:

Сразу после добавления промежуточного ПО маршрутизации (UseRouting) в конвейер обработки:

var supportedCultures = new[] { "en-US", "es-CR" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

app.UseRequestLocalization(localizationOptions);

Сведения о заказе ПО промежуточного слоя локализации в конвейере ПО промежуточного слоя см. в ASP.NET Core ПО промежуточного слоя.

• Добавьте службы локализации в приложение с помощью AddLocalization.
• Укажите культуры по умолчанию и поддерживаемые культуры приложения в Startup.Configure (Startup.cs). Следующий пример настраивает поддерживаемые культуры для американского английского и коста-риканского варианта испанского языка.

В Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

В Startup.Configure сразу после добавления промежуточного ПО маршрутизации (UseRouting) в конвейер обработки:

var supportedCultures = new[] { "en-US", "es-CR" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

app.UseRequestLocalization(localizationOptions);

Сведения о порядке промежуточного ПО локализации в конвейере промежуточного ПО Startup.Configure, см. Промежуточное ПО ASP.NET Core.

Источник документации поставщика региональных настроек WebAssembly

Чтобы больше узнать о том, как инфраструктура Blazor обрабатывает локализацию, см. класс WebAssemblyCultureProvider в источнике ссылок ASP.NET Core.

• ASP.NET Core Blazor базовый путь приложения
• Глобализация и локализация в ASP.NET Core
• Локализация DataAnnotations в минимальных API и Blazor
• Минимальные API: локализация сообщений проверки
• Глобализация и локализация приложений .NET
• Ресурсы в RESX-файлах
• Локализация и Дженерики
• Вызов InvokeAsync(StateHasChanged) приводит к возврату страницы к культуре по умолчанию (dotnet/aspnetcore #28521)
• Blazor Локализация не работает с InteractiveServer (dotnet/aspnetcore #53707) (переопределение расположения с помощью области "Датчики")

• ASP.NET Core Blazor базовый путь приложения
• Глобализация и локализация в ASP.NET Core
• Глобализация и локализация приложений .NET
• Ресурсы в RESX-файлах
• Локализация и Дженерики
• Вызов InvokeAsync(StateHasChanged) приводит к возврату страницы к культуре по умолчанию (dotnet/aspnetcore #28521)
• Blazor Локализация не работает с InteractiveServer (dotnet/aspnetcore #53707) (переопределение расположения с помощью области "Датчики")