ASP.NET Core Blazor globalizáció és honosítás

Jegyzet

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információ: .NET és .NET Core támogatási szabályzat. Az aktuális kiadást a jelen cikk .NET 9-es verziójában.

Ez a cikk bemutatja, hogyan jeleníthet meg globalizált és honosított tartalmakat a különböző kultúrákban és nyelveken élő felhasználók számára.

Globalizáció és honosítás

A globalizációsesetében a Blazor szám- és dátumformázást biztosít. honosításiesetén Blazor a tartalmat a .NET-erőforrások rendszerévelrendereli.

Az ASP.NET Core honosítási funkcióinak korlátozott készlete támogatott:

✔️ támogatott:IStringLocalizer és IStringLocalizer<T>Blazor alkalmazások támogatják.

Nem támogatott:IHtmlLocalizer és IViewLocalizer ASP.NET Core MVC-funkciók, és nem támogatottakBlazor alkalmazásokban.

A Blazor alkalmazások esetén az űrlapok adatjegyzetekkel történő érvényesítéséhez lokalizált érvényesítési üzenetek támogatása elérhető, ha a DisplayAttribute.ResourceType és ValidationAttribute.ErrorMessageResourceType implementálva vannak.

Ez a cikk a Blazorglobalizációs és honosítási funkcióinak használatát ismerteti a következő alapján:

A Accept-Language fejléc, amelyet a böngésző a felhasználó böngészőbeállításokban megadott nyelvi beállításai alapján állít be.
Az alkalmazás által beállított kultúra, amely nem a Accept-Language fejlécértéke alapján van beállítva. A beállítás lehet statikus az összes felhasználó számára, vagy az alkalmazáslogika alapján dinamikus. Ha a beállítás a felhasználó beállításain alapul, a rendszer általában menti a beállítást a későbbi látogatások újratöltéséhez.

További általános információkért tekintse meg a következő erőforrásokat:

A nyelvi és kulturális kifejezések gyakran felcserélhetők a globalizációs és honosítási fogalmak kezelésekor.

Ebben a cikkben nyelv a felhasználó által a böngésző beállításaiban megadott választásokra vonatkozik. A felhasználó nyelvi kijelölései a böngésző kéréseiben jelennek meg a Accept-Language fejlécben. A böngészőbeállítások általában a felhasználói felületen a "nyelv" szót használják.

Kultúra a .NET és Blazor API tagjaira vonatkozik. A felhasználói kérések közé tartozhat például a fejléc, amely a felhasználó szempontjából nyelvet határoz meg, de az alkalmazás végül a felhasználó által kért nyelvtől állítja be a ("kultúra") tulajdonságot. Az API általában a "kultúra" szót használja a tagnevekben.

A jelen cikk útmutatása nem tartalmazza a lap HTML nyelvi attribútumának (<html lang="...">) beállítását, amelyet az accessiblity-eszközök használnak. Az értéket statikusan állíthatja be, ha egy nyelvet rendel a lang címke <html> attribútumához, vagy a JavaScriptben document.documentElement.lang. A document.documentElement.lang értékét dinamikusan állíthatja be JS interop.

Jegyzet

A cikkben szereplő példakódok null értékű referenciatípusokat (NRT-ket) és .NET-fordító nullállapotú statikus elemzésivezetnek be, amelyeket a .NET 6-os vagy újabb verziójú ASP.NET Core támogat. A .NET 5 vagy korábbi verziójának megcélzásakor távolítsa el a null típusú megjelölést (?) a cikk példáiból.

Globalizáció

Az @bind attribútum irányelv a formázásokat alkalmazza és az értékeket jeleníti meg a felhasználó által előnyben részesített első nyelv alapján, amelyet az alkalmazás támogat. @bind támogatja a @bind:culture paramétert, hogy System.Globalization.CultureInfo-t biztosítson egy érték elemzéséhez és formázásához.

Az aktuális kultúra a System.Globalization.CultureInfo.CurrentCulture tulajdonságból érhető el.

CultureInfo.InvariantCulture a következő mezőtípusokhoz (<input type="{TYPE}" />, ahol a {TYPE} helyőrző a típus):

date
number

Az előző mezőtípusok:

A megfelelő böngészőalapú formázási szabályokkal jelennek meg.
Nem tartalmazhat szabad formátumú szöveget.
Adjon meg felhasználói interakciós jellemzőket a böngésző implementációja alapján.

Blazor beépített támogatást nyújt az aktuális kultúra értékeinek megjelenítéséhez. Ezért a @bind:culture és a date mezőtípusok használatakor nem ajánlott a number típusú kultúra megadása.

A következő mezőtípusok formázási követelményekkel rendelkeznek, és az összes fő böngésző nem támogatja őket, ezért az Blazornem támogatják őket:

datetime-local
month
week

Az előző típusok jelenlegi böngészőtámogatását lásd: Használhatom.

Alapértelmezés szerint Blazor betölti az alkalmazás kultúráját tartalmazó globalizációs adatok egy részét. Az összes globalizációs adat betöltéséhez állítsa <BlazorWebAssemblyLoadAllGlobalizationData>true be az alkalmazás projektfájljában (.csproj):

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

A .NET-globalizáció és a Unicode (ICU) nemzetközi összetevőinek támogatása (Blazor WebAssembly)

Blazor WebAssembly csökkentett globalizációs API-t és beépített nemzetközi összetevőket használ a Unicode (ICU) területi beállításaihoz.

A WebAssembly (Wasm) alkalmazásokban, ha a globalizációs invariáns mód le van tiltva, a rendszer betölt egy ICU-adatfájlt. A fájloknak négy alaptípusa van:

icudt.dat: Teljes adatok
icudt_EFIGS.dat: Területi beállítások adatai: en-*, fr-FR, es-ES, it-IT, és de-DE.
icudt_CJK.dat: Területi beállítások adatai: en-*, ja, ko, és zh-*.
icudt_no_CJK.dat: Az összes helyi beállítás adatai a icudt.dat-ból, kivéve ja, ko, és zh-*.

Adjon meg egy betöltendő fájlt az <BlazorIcuDataFileName> msBuild tulajdonsággal az alkalmazás projektfájljában (.csproj). A következő példa betölti a icudt_no_CJK.dat fájlt:

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

<BlazorIcuDataFileName> csak egyetlen fájlt fogad el. A fájl lehet a fejlesztő által létrehozott egyéni fájl. Egyéni ICU-fájl létrehozásához lásd : WASM Globalization Icu: Custom ICU.

Ha nincs megadva egy fájl, <BlazorIcuDataFileName> az alkalmazás kultúráját ellenőrizzük, és a kultúrájának megfelelő ICU fájlt betöltjük. Például a en-US kultúra eredményezi a icudt_EFIGS.dat fájl betöltését. A zh-CN esetében a icudt_CJK.dat fájlt használják.

További információért tekintse meg: .NET-globalizáció és ICU: ICU a WebAssembly..

Blazor WebAssembly csökkentett globalizációs API-t és beépített nemzetközi összetevőket használ a Unicode (ICU) területi beállításaihoz. További információért tekintse meg: .NET-globalizáció és ICU: ICU a WebAssembly..

A területi beállítások egyéni részhalmazának betöltése Blazor WebAssembly-alkalmazásokban a .NET 8 vagy újabb verzióiban támogatott. További információkért tekintse meg ezt a szakaszt a cikk .NET 8 vagy újabb verziójához.

Invariáns globalizáció

Ez a szakasz csak az ügyféloldali Blazor forgatókönyvekre vonatkozik.

Ha az alkalmazás nem igényel honosítást, konfigurálja az alkalmazást az invariáns kultúra támogatásához, amely általában az Amerikai Egyesült Államok angol nyelvén (en-US) alapul. Az invariáns globalizáció csökkenti az alkalmazás letöltési méretét, és gyorsabb alkalmazásindítást eredményez. Állítsa be a InvariantGlobalization tulajdonságot true-re az alkalmazás projektfájljában (.csproj):

<PropertyGroup>
  <InvariantGlobalization>true</InvariantGlobalization>
</PropertyGroup>

Másik lehetőségként konfigurálja az invariáns globalizációt a következő módszerekkel:

A runtimeconfig.json:

{
  "runtimeOptions": {
    "configProperties": {
      "System.Globalization.Invariant": true
    }
  }
}

Környezeti változóval:
- Kulcs: DOTNET_SYSTEM_GLOBALIZATION_INVARIANT
- Érték: true vagy 1

További információ: futtatókörnyezeti konfigurációs lehetőségek a globalizációhoz (.NET-dokumentáció).

Időzónára vonatkozó információk

Ez a szakasz csak az ügyféloldali Blazor forgatókönyvekre vonatkozik.

Az állandó globalizáció csak azt eredményezi, hogy nem honosított időzónaneveket használunk. Az időzónia kódjának és adatainak levágásához, amely csökkenti az alkalmazás letöltési méretét, és gyorsabb alkalmazásindítást eredményez, alkalmazza az <InvariantTimezone> MSBuild tulajdonságot true értékkel az alkalmazás projektfájljában:

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

Jegyzet

<BlazorEnableTimeZoneSupport> felülbírál egy korábbi <InvariantTimezone> beállítást. Javasoljuk, hogy távolítsa el a <BlazorEnableTimeZoneSupport> beállítást.

A rendszer egy adatfájlt tartalmaz az időzónára vonatkozó információk helyessé tétele érdekében. Ha az alkalmazásnak nincs szüksége erre a funkcióra, fontolja meg a letiltását azáltal, hogy az <BlazorEnableTimeZoneSupport> MSBuild tulajdonság értékét false-re állítja az alkalmazás projektfájljában.

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

Bemutató összetevő

Az alábbi CultureExample1 összetevő a jelen cikk által tárgyalt Blazor globalizációs és honosítási fogalmak bemutatására használható.

CultureExample1.razor:

@page "/culture-example-1"
@using System.Globalization

<h1>Culture Example 1</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;
}

Az előző példában (N2) szereplő számsztring formátuma (.ToString("N2")) egy standard .NET numerikus formátumjelző. A N2 formátum minden numerikus típus esetében támogatott, tartalmaz egy csoportelválasztót, és legfeljebb két tizedesjegyet jelenít meg.

Ha szeretné, adjon hozzá egy menüelemet a NavMenu összetevő NavMenu.razor összetevőjének (CultureExample1) navigációs eleméhez.

A kultúra dinamikus beállítása a `Accept-Language` fejlécből

Adja hozzá a Microsoft.Extensions.Localization csomagot az alkalmazáshoz.

A Accept-Language fejléc a böngésző állítja be, és a böngésző beállításaiban a felhasználó nyelvi beállításai vezérlik. A böngészőbeállításokban a felhasználó egy vagy több előnyben részesített nyelvet állít be a beállítások sorrendjében. A böngésző a beállítások sorrendjét használja a fejléc minden nyelvéhez tartozó minőségi értékek (q, 0-1) beállításához. Az alábbi példa az Amerikai Egyesült Államok angol, angol és Costa Rica-i spanyol nyelvét határozza meg, és az Egyesült Államok angol vagy angol nyelvét részesíti előnyben:

Accept-Language: en-US,en;q=0,9,es-CR;q=0,8

Az alkalmazás kultúrája úgy van beállítva, hogy megfelel az első kért nyelvnek, amely megfelel az alkalmazás támogatott kultúrájának.

Az ügyféloldali fejlesztésiállítsa a tulajdonságot az ügyféloldali alkalmazás projektfájljában ():

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

Az ügyféloldali fejlesztésinem támogatja a kultúra dinamikus beállítását a fejlécből.

Jegyzet

Ha az alkalmazás specifikációja megköveteli a támogatott kultúrák explicit listára való korlátozását, tekintse meg a cikk Az ügyféloldali kultúra dinamikus beállítása felhasználói beállítások szakaszában.

Az alkalmazások honosítása Localization Middlewarehasználatával történik. Az alkalmazáshoz hozzáadásra kerülnek a lokalizációs szolgáltatások a AddLocalizationsegítségével.

Adja hozzá a következő sort ahhoz a Program fájlhoz, amelyben a szolgáltatások regisztrálva vannak:

builder.Services.AddLocalization();

A kiszolgálóoldali fejlesztésiadja meg az alkalmazás által támogatott kultúrákat, mielőtt bármilyen köztes szoftver ellenőrizhetné a kéréskultúrát. A kérés lokalizáló köztes szoftvert általában közvetlenül a MapRazorComponentshívása előtt helyezze el. Az alábbi példa a támogatott kultúrákat konfigurálja az egyesült államokbeli angol és costa ricai spanyol nyelvhez:

kiszolgálóoldali fejlesztés soránadja meg az alkalmazás támogatott kultúráit közvetlenül az után, hogy az Útválasztó köztes szoftver (UseRouting) hozzáadódik a feldolgozási folyamatba. Az alábbi példa az egyesült államokbeli angol és costa ricai spanyol nyelvű támogatott kultúrákat konfigurálja a következő API használatával:

AddSupportedCultures Hozzáadja a globalizáció támogatott kultúráinak készletét (dátum, szám és pénznemformázás).
AddSupportedUICultures Hozzáadja a támogatott felhasználói felületi kultúrák készletét a honosításhoz (lefordított felhasználói felületi sztringek a tartalom megjelenítéséhez).

app.UseRequestLocalization(new RequestLocalizationOptions()
    .AddSupportedCultures(new[] { "en-US", "es-CR" })
    .AddSupportedUICultures(new[] { "en-US", "es-CR" }));

Az előző példában ugyanazok a támogatott formázási kultúrák és felhasználói felületi kultúrák vannak meghatározva egy szűk esetben, ahol az alkalmazást csak az Egyesült Államokban és Costa Ricában használják. Alternatív megoldásként az alkalmazások a dátum-, szám- és pénznemformázáshoz több kultúrát is használhatnak, de csak honosított tartalmakat biztosítanak az Egyesült Államok és Costa Rica számára, ahogy az alábbi példa is mutatja:

var uiCultures = new[] { "en-US", "es-CR" };

var formattingCultures = CultureInfo
    .GetCultures(CultureTypes.SpecificCultures)
    .Select(c => c.Name)
    .ToArray();

var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(uiCultures[0])
    .AddSupportedCultures(formattingCultures)
    .AddSupportedUICultures(uiCultures);

app.UseRequestLocalization(localizationOptions);

Az előző példában csak olyan kultúrákat ad vissza, CultureTypes.SpecificCultures amelyek egy adott országra vagy régióra vonatkoznak ( például en-US vagy fr-FR), amelyek teljes, konkrét globalizálási adatokkal (dátumok, számok, naptárak és egyéb kulturális felhasználói felület) állnak rendelkezésre, amelyeket a .NET a pontos formázáshoz és elemzéshez használhat. Előfordulhat, hogy a semleges kultúrák( például en vagy fr) nem rendelkeznek teljes globalizációs adatokkal, ezért nem szerepelnek a listában.

A honosítási köztes szoftvernek a Program fájl közbensőszoftver-folyamatában való rendeléséről további információt a ASP.NET Core Middlewarecímű témakörben talál.

A CultureExample1 szakaszban látható összetevő használatával tanulmányozhatja a globalizáció működését. Küldjön egy kérést az Egyesült Államok angol nyelvén (en-US). Váltson a Costa Rica-i spanyol (es-CR) nyelvre a böngésző nyelvi beállításai között. Kérje újra a weblapot.

Ha a kultúra amerikai angol (en-US), a renderelt összetevő hónap/nap dátum formázást (6/7), 12 órás időt (AM/PM) és vesszőelválasztókat használ számban a tizedesjelhez (1,999.69):

dátum: 2021.06.07. 06:45:22
Szám: 1 999,69

Ha a kultúra Costa Rica-i spanyol (es-CR), a renderelt összetevő a nap/hónap dátumformátumot (7/6), a 24 órás időt és a tizedesérték vesszővel történő leírását használja pontelválasztóként a számokban (1.999,69).

dátum: 2021.07.06. 06:49:38
szám: 1 999,69

Az ügyféloldali kultúra statikus beállítása

Állítsa be a BlazorWebAssemblyLoadAllGlobalizationData tulajdonságot true-re az alkalmazás projektfájljában (.csproj):

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

Az ügyféloldali renderelés köztes nyelvi (IL) Linker-konfigurációja a kifejezetten kért területi beállítások kivételével kiszűri a nemzetköziesítési információkat. További információért lásd: A linker konfigurálása az ASP.NET Core-hoz Blazor.

Az alkalmazás kultúrája JavaScriptben állítható be, amikor Blazor a applicationCultureBlazor indítási lehetőséggel kezdődik. Az alábbi példa úgy konfigurálja az alkalmazást, hogy az egyesült államokbeli angol (en-US) kultúrával induljon el.

Blazor automatikus indításának megakadályozása úgy, hogy hozzáadja a autostart="false" elemet a Blazor<script> címkéjéhez:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>

Az előző példában a {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útja és fájlneve. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

Adja hozzá a következő <script> blokkot a Blazor<script> címke után, de még a záró </body> címke előtt.

Blazor Web App:

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

Önálló Blazor WebAssembly:

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

A applicationCulture értékének meg kell felelnie a BCP-47 nyelvi címkeformátumnak. A Blazor indításról további információt ASP.NET Core Blazor indításicímű témakörben talál.

A kulturális Blazorindítási beállításának egyik alternatívája a kultúra beállítása C#-kódban. Állítsa CultureInfo.DefaultThreadCurrentCulture és CultureInfo.DefaultThreadCurrentUICulture a Program fájlban ugyanarra a kultúrára.

Adja hozzá a System.Globalization névteret a Program fájlhoz:

using System.Globalization;

Adja hozzá a kulturális beállításokat azon sor elé, amely az WebAssemblyHostBuilder (await builder.Build().RunAsync();) építését és futtatását végzi.

CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-US");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-US");

Jegyzet

A .NET 9-es vagy korábbi verzióiban a különálló Blazor WebAssembly alkalmazások a felhasználói felület globalizálási erőforrásait a(z) CultureInfo.DefaultThreadCurrentCulture alapján töltik be. Ha további globalizációs adatokat szeretne betölteni a honosítási CultureInfo.DefaultThreadCurrentUICulturekultúrához, frissítse az alkalmazást .NET 10-re vagy újabbra.

A kiszolgálóoldali kultúra statikus beállítása

A kiszolgálóoldali alkalmazások honosítása Localization Middlewarehasználatával történik. Az alkalmazáshoz hozzáadásra kerülnek a lokalizációs szolgáltatások a AddLocalizationsegítségével.

A Program fájlban:

builder.Services.AddLocalization();

Adja meg a statikus kultúrát a Program fájlban, mielőtt bármilyen köztes szoftver ellenőrizné a kéréskultúrát. Általában közvetlenül a MapRazorComponentselőtt helyezze el a Kérelem lokalizációs köztes szoftvert. Az alábbi példa az Egyesült Államok angol nyelvét konfigurálja:

Adja meg a statikus kultúrát a Program fájlban közvetlenül azután, hogy az Útválasztás köztes szoftver (UseRouting) hozzá van adva a feldolgozási folyamathoz. Az alábbi példa az Egyesült Államok angol nyelvét konfigurálja:

app.UseRequestLocalization("en-US");

A UseRequestLocalization kulturális értékének meg kell felelnie a BCP-47 nyelvi címkeformátumnak.

A honosítási köztes szoftvernek a Program fájl közbensőszoftver-folyamatában való rendeléséről további információt a ASP.NET Core Middlewarecímű témakörben talál.

A Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

Adja meg a statikus kultúrát a Startup.Configure (Startup.cs) fájlban közvetlenül azután, hogy az Útválasztás köztes szoftver hozzá van adva a feldolgozási folyamathoz. Az alábbi példa az Egyesült Államok angol nyelvét konfigurálja:

app.UseRequestLocalization("en-US");

A UseRequestLocalization kulturális értékének meg kell felelnie a BCP-47 nyelvi címkeformátumnak.

További információért a Lokalizációs köztes szoftver elhelyezéséről a Startup.Configureköztes szoftver folyamatában, lásd a ASP.NET Core Middlewarecímű témakört.

Az ügyféloldali kultúra dinamikus beállítása felhasználói beállítások szerint

Adja hozzá a Microsoft.Extensions.Localization csomagot az alkalmazáshoz.

Jegyzet

A csomagok .NET-alkalmazásokhoz való hozzáadásáról a Csomagok telepítése és kezeléseCsomaghasználati munkafolyamat (NuGet-dokumentáció)című cikkben talál útmutatást. Ellenőrizze a megfelelő csomagverziókat a NuGet.org.

Állítsa be a BlazorWebAssemblyLoadAllGlobalizationData tulajdonságot true-re a projektfájlban a következőképpen:

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

Az alkalmazás ügyféloldali renderelési kultúrája a Blazor keretrendszer API-jával van beállítva. A felhasználó kulturális környezetének kiválasztása megőrizhető a böngésző helyi tárolójában.

Adjon meg JS függvényeket a Blazor<script> címke után, hogy lekérje és beállítsa a felhasználó nyelvi beállítását a böngésző helyi tárhelyében.

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

Jegyzet

Az előző példa globális függvényekkel szennyezi az ügyfelet. Az éles alkalmazások jobb megközelítéséért lásd JavaScript-elkülönítést JavaScript-modulokban.

Adja hozzá a System.Globalization és Microsoft.JSInterop névtereit a Program fájl tetejére:

using System.Globalization;
using Microsoft.JSInterop;

Távolítsa el a következő sort:

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

Cserélje le az előző sort a következő kódra. A kód hozzáadja Blazorhonosítási szolgáltatását az alkalmazás szolgáltatásgyűjteményéhez AddLocalization, és JS interop használatával meghívja a JS-t, majd lekéri a felhasználó kulturális beállítását a helyi tárolóból. Ha a helyi tároló nem tartalmaz kulturális környezetet a felhasználó számára, a kód beállítja az Amerikai Egyesült Államok angol (en-US) alapértelmezett értékét.

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();

Jegyzet

Az alábbi CultureSelector összetevő bemutatja, hogyan hajthatja végre a következő műveleteket:

Állítsa be a felhasználó kulturális környezetének kiválasztását a böngésző helyi tárolójába JS interop használatával.
Töltse be újra a kért összetevőt (forceLoad: true), amely a frissített kultúrát használja.

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 (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 (CultureInfo.CurrentCulture != selectedCulture)
        {
            await JS.InvokeVoidAsync("blazorCulture.set", selectedCulture!.Name);

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

Jegyzet

A IJSInProcessRuntimetovábbi információ: JavaScript-függvények meghívása a .NET-metódusokból a ASP.NET Core Blazor.

A </main> összetevő (MainLayout) MainLayout.razor elem záró címkéjébe adja hozzá a CultureSelector összetevőt:

<article class="bottom-row px-4">
    <CultureSelector />
</article>

Az CultureExample1 szakaszban látható összetevő használatával tanulmányozhatja az előző példa működését.

A kiszolgálóoldali kultúra dinamikus beállítása felhasználói beállítások szerint

Jegyzet

Az alábbi példa feltételezi, hogy az alkalmazás globális interaktivitást alkalmaz az interaktív kiszolgálóoldali renderelés (interaktív SSR) megadásával a Routes összetevő App összetevőjén (Components/App.razor):

<Routes @rendermode="InteractiveServer" />

Ha az alkalmazás oldalankénti/összetevőnkénti interaktivitást () alkalmaz, lásd a jelen szakasz végén található megjegyzéseket a példák összetevőinek renderelési módjainak módosításához.

Adja hozzá a Microsoft.Extensions.Localization csomagot az alkalmazáshoz.

Jegyzet

A Program fájlban:

builder.Services.AddLocalization();

Állítsa be az alkalmazás alapértelmezett és támogatott kultúráit RequestLocalizationOptions-ra.

A kérésfeldolgozó folyamatban a MapRazorComponents hívása előtt helyezze el a következő kódot:

Miután az Útválasztás köztes szoftver (UseRouting) hozzáadva lett a kérelemfeldolgozási folyamathoz, helyezze el a következő kódot:

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

app.UseRequestLocalization(localizationOptions);

A honosítási köztes szoftvernek a köztes szoftver folyamatban való rendeléséről további információt a ASP.NET Core Middlewarecímű témakörben talál.

Az alábbi példa bemutatja, hogyan állíthatja be az aktuális kultúrát olyan cookie-ban, amit a Localization Middleware beolvashat.

A App összetevőhöz a következő névterek szükségesek:

Adja hozzá a következőket a App összetevőfájl elejéhez (Components/App.razor):

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

Adja hozzá a következő @code blokkot a App összetevőfájl aljára:

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

A Pages/_Host.cshtml fájl módosításához a következő névterek szükségesek:

Adja hozzá a következőt a fájlhoz:

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

A honosítási köztes szoftvernek a köztes szoftver folyamatban való rendeléséről további információt a ASP.NET Core Middlewarecímű témakörben talál.

Ha az alkalmazás nincs konfigurálva vezérlőműveletek feldolgozására:

MVC-szolgáltatások hozzáadásához hívja meg AddControllers a Program fájl szolgáltatásgyűjteményében:
```
builder.Services.AddControllers();
```
A vezérlővégpont-útválasztást a Program fájlhoz a MapControllers-n (IEndpointRouteBuilder) történő app meghívásával adja hozzá.
```
app.MapControllers();
```

Ha azt szeretné, hogy a felhasználói felület lehetővé tegye a felhasználó számára a kultúra kiválasztását, használjon egy átirányításalapú megközelítést, honosítási cookie. Az alkalmazás egy vezérlőre való átirányítással megőrzi a felhasználó kiválasztott kultúráját. A vezérlő a felhasználó kiválasztott kulturális környezetét egy cookie-ba állítja be, és visszairányítja a felhasználót az eredeti URI-hoz. A folyamat hasonló ahhoz, ami egy webalkalmazásban történik, amikor egy felhasználó megpróbál hozzáférni egy biztonságos erőforráshoz, ahol a rendszer átirányítja a felhasználót egy bejelentkezési lapra, majd visszairányítja az eredeti erőforrásra.

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

Figyelmeztetés

Az előző példában látható LocalRedirect művelet eredményével megakadályozhatja a nyílt átirányítási támadásokat. További információ: Nyílt átirányítási támadások megakadályozása ASP.NET Core.

Az alábbi CultureSelector összetevő bemutatja, hogyan hívhatja meg a Set metódusát a CultureController-on az új kultúrában. Az összetevő a Shared mappába kerül az alkalmazás egészében való használatra.

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 (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 (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);
        }
    }
}

Adja hozzá a CultureSelector összetevőt a MainLayout összetevőhöz. Helyezze a következő jelölést a záró </main> címkébe a Components/Layout/MainLayout.razor fájlban.

Adja hozzá a CultureSelector összetevőt a MainLayout összetevőhöz. Helyezze a következő jelölést a záró </main> címkébe a Shared/MainLayout.razor fájlban.

<article class="bottom-row px-4">
    <CultureSelector />
</article>

Az CultureExample1 szakaszban látható összetevő használatával tanulmányozhatja az előző példa működését.

Az előző példa feltételezi, hogy az alkalmazás globális interaktivitást alkalmaz az interaktív kiszolgáló renderelési módjának megadásával a Routes összetevő (App) Components/App.razor összetevőjén:

<Routes @rendermode="InteractiveServer" />

Ha az alkalmazás oldalonkénti/komponensenkénti interaktivitást alkalmaz, hajtsa végre a következő módosításokat:

Adja hozzá az interaktív kiszolgáló renderelési módját a CultureExample1 összetevőfájl tetejére (Components/Pages/CultureExample1.razor):
```
@rendermode InteractiveServer
```
Az alkalmazás fő elrendezésében (Components/Layout/MainLayout.razor) alkalmazza az interaktív kiszolgáló renderelési módját az CultureSelector összetevőre:
```
<CultureSelector @rendermode="InteractiveServer" />
```

A kultúra dinamikus megadása egy Blazor Web App-ban a felhasználói preferencia alapján

Ez a szakasz azokra a Blazor Web App-ekre vonatkozik, amelyek az automatikus (Kiszolgáló és WebAssembly) interaktivitást alkalmazzák.

Példák olyan helyekre, ahol egy alkalmazás tárolhatja a felhasználó beállításait, például böngésző helyi tárolási (gyakori ügyféloldali forgatókönyvek esetén), honosítási cookie vagy adatbázis (gyakori kiszolgálóoldali forgatókönyvek esetén), helyi tárolás és honosítási cookie (kiszolgáló- és WebAssembly-összetevőkkel rendelkezőBlazor Web App), vagy egy külső adatbázishoz csatolt és egy webes API-által elért külső szolgáltatásban. Az alábbi példa bemutatja, hogyan használható a böngésző helyi tárolója az ügyféloldali renderelt (CSR) összetevőkhöz, valamint a kiszolgálóoldali renderelt (SSR) összetevők honosítási cookie.

A `.Client` projekt frissítései

Adja hozzá a Microsoft.Extensions.Localization csomagot a .Client projekthez.

Jegyzet

Állítsa a BlazorWebAssemblyLoadAllGlobalizationData tulajdonságot true a .Client projektfájlban:

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

Adja hozzá a System.Globalization és Microsoft.JSInterop névtereit a .Client projekt Program fájljának tetejére:

using System.Globalization;
using Microsoft.JSInterop;

Távolítsa el a következő sort:

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

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();

Jegyzet

Adja hozzá a következő CultureSelector összetevőt a .Client projekthez.

Az összetevő az SSR- vagy CSR-összetevők esetében a következő módszereket alkalmazza:

A legördülő listában szereplő minden rendelkezésre álló kultúra megjelenítendő nevét egy szótár adja meg, mivel az ügyféloldali globalizációs adatok a kiszolgálóoldali globalizációs adatok által biztosított kulturális környezetek honosított szövegét tartalmazzák. A kiszolgálóoldali honosítás például akkor jelenik meg English (United States), ha en-US a kultúra, és Ingles () egy másik kultúra használatakor. Mivel a kulturális megjelenítési nevek fordítása nem érhető el Blazor WebAssembly globalizálással, az amerikai angol megjelenítési neve a kliensen minden betöltött kultúra esetében csak en-US. A saját szótár használata lehetővé teszi, hogy az összetevő legalább teljes angol nyelvű kulturális neveket jelenítsen meg.
Amikor a felhasználó módosítja a kultúrát, JS a helyi böngészőtárban állítja be a kulturális környezetet, és egy vezérlőművelet frissíti a honosítási cookie a kultúrával. Az alkalmazáshoz a vezérlőt később adják hozzá a Kiszolgáló projekt frissítései szakaszban.

Pages/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">@cultureDict[culture.Name]</option>
            }
        </select>
    </label>
</p>

@code
{
    private Dictionary<string, string> cultureDict = 
        new()
        {
            { "en-US", "English (United States)" },
            { "es-CR", "Spanish (Costa Rica)" }
        };

    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 (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);
        }
    }
}

A .Client projekt _Imports fájljában (_Imports.razor) adja hozzá a Pages mappában lévő összetevők névterét, és frissítse a névteret a .Client projekt névterének megfelelően:

@using BlazorSample.Client.Pages

Jegyzet

A IJSInProcessRuntimetovábbi információ: JavaScript-függvények meghívása a .NET-metódusokból a ASP.NET Core Blazor.

A .Client projektben adja hozzá a CultureSelector összetevőt a MainLayout összetevőhöz. Helyezze a következő jelölést a záró </main> címkébe a Layout/MainLayout.razor fájlban.

<article class="bottom-row px-4">
    <CultureSelector @rendermode="InteractiveAuto" />
</article>

A .Client projektben helyezze az alábbi CultureClient összetevőt a CSR-összetevők globalizációs működésének tanulmányozásához.

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

A .Client projektben helyezze az alábbi CultureServer összetevőt az SSR-összetevők globalizációs működésének tanulmányozásához.

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

A CultureExample1 szakaszban látható összetevővel megtudhatja, hogyan működik a globalizáció a globális automatikus renderelési módot öröklő összetevők esetében. Adja hozzá a CultureExample1 összetevőt a .Client projekt Pages mappájába.

Adja hozzá a CultureClient, CultureServerés CultureExample1 összetevőket a Layout/NavMenu.razoroldalsávjának navigációs sávjához:

<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>

Kiszolgálóprojekt frissítései

Adja hozzá a Microsoft.Extensions.Localization csomagot a kiszolgálóprojekthez.

Jegyzet

A kiszolgálóprojekt Program fájljában, amelyben a szolgáltatások regisztrálva vannak:

builder.Services.AddLocalization();

Állítsa be az alkalmazás alapértelmezett és támogatott kultúráit RequestLocalizationOptions-ra.

A kérésfeldolgozó folyamatban a MapRazorComponents hívása előtt helyezze el a következő kódot:

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

app.UseRequestLocalization(localizationOptions);

Az alábbi példa bemutatja, hogyan állíthatja be az aktuális kultúrát olyan cookie-ban, amit a Localization Middleware beolvashat.

A App összetevőhöz a következő névterek szükségesek:

Adja hozzá a következőket a App összetevőfájl elejéhez (Components/App.razor):

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

Az alkalmazás ügyféloldali renderelési kultúrája a Blazor keretrendszer API-jával van beállítva. A felhasználók kulturális környezetének kiválasztása a CSR-összetevők böngészőbeli helyi tárolójában is megmaradhat.

Miután a Blazor<script> címkéje, biztosítson JS függvényeket, hogy a felhasználó kultúráját lekérje és beállítsa a böngésző helyi tárolójában.

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

Jegyzet

Az előző példa globális függvényekkel szennyezi az ügyfelet. Az éles alkalmazások jobb megközelítéséért lásd JavaScript-elkülönítést JavaScript-modulokban.

Adja hozzá a következő @code blokkot a App összetevőfájl aljára:

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

Ha a kiszolgálóprojekt nincs konfigurálva vezérlőműveletek feldolgozására:

MVC-szolgáltatások hozzáadásához hívja meg AddControllers a Program fájl szolgáltatásgyűjteményében:
```
builder.Services.AddControllers();
```
A vezérlővégpont-útválasztást a Program fájlhoz a MapControllers-n (IEndpointRouteBuilder) történő app meghívásával adja hozzá.
```
app.MapControllers();
```

Ha lehetővé szeretné tenni a felhasználó számára az SSR-összetevőkhöz tartozó kultúra kiválasztását, használjon átirányítás-alapú megközelítést a honosítás érdekében cookie. Az alkalmazás egy vezérlőre való átirányítással megőrzi a felhasználó kiválasztott kultúráját. A vezérlő a felhasználó kiválasztott kulturális környezetét egy cookie-ba állítja be, és visszairányítja a felhasználót az eredeti URI-hoz. A folyamat hasonló ahhoz, ami egy webalkalmazásban történik, amikor egy felhasználó megpróbál hozzáférni egy biztonságos erőforráshoz, ahol a rendszer átirányítja a felhasználót egy bejelentkezési lapra, majd visszairányítja az eredeti erőforrásra.

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

Figyelmeztetés

Interaktív automatikus összetevők

Az ebben a szakaszban található útmutató az oldalanként/összetevő-renderelést alkalmazó alkalmazások összetevőinél is működik, és megadja az interaktív automatikus renderelési módot:

@rendermode InteractiveAuto

Lokalizáció

Ha az alkalmazás még nem támogatja a dinamikus kultúra kiválasztását, adja hozzá a Microsoft.Extensions.Localization csomagot az alkalmazáshoz.

Jegyzet

Ügyféloldali honosítás

Állítsa be a BlazorWebAssemblyLoadAllGlobalizationData tulajdonságot true-re az alkalmazás projektfájljában (.csproj):

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

A Program fájlban adja hozzá a System.Globalization névterét a fájl elejéhez:

using System.Globalization;

Adja hozzá Blazorhonosítási szolgáltatását az alkalmazás szolgáltatásgyűjteményéhez AddLocalization:

builder.Services.AddLocalization();

Kiszolgálóoldali honosítás

Használja Localization Middleware az alkalmazás kultúrájának beállításához.

Ha az alkalmazás még nem támogatja a dinamikus kultúra kiválasztását:

Az alkalmazáshoz hozzáadásra kerülnek a lokalizációs szolgáltatások a AddLocalizationsegítségével.
Adja meg az alkalmazás alapértelmezett és támogatott kultúráját a Program fájlban. Az alábbi példa a támogatott kultúrákat konfigurálja az egyesült államokbeli angol és costa ricai spanyol nyelvhez.

builder.Services.AddLocalization();

Helyezze a kérelem honosítási köztes szoftverét minden olyan köztes szoftver elé, amely ellenőrizheti a kéréskultúrát. A köztes szoftvereket általában közvetlenül a MapRazorComponentshívása előtt helyezze el:

Közvetlenül azután, hogy az útválasztó köztes szoftvert (UseRouting) hozzáadják a feldolgozási folyamathoz:

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

app.UseRequestLocalization(localizationOptions);

A honosítási köztes szoftvernek a köztes szoftver folyamatban való rendeléséről további információt a ASP.NET Core Middlewarecímű témakörben talál.

Az alkalmazáshoz hozzáadásra kerülnek a lokalizációs szolgáltatások a AddLocalizationsegítségével.
Adja meg az alkalmazás alapértelmezett és támogatott kultúráját Startup.Configure (Startup.cs). Az alábbi példa a támogatott kultúrákat konfigurálja az egyesült államokbeli angol és costa ricai spanyol nyelvhez.

A Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

Közvetlenül azután, hogy az útválasztó köztes szoftvert (Startup.Configure) hozzáadják a feldolgozási folyamathoz UseRouting-ban:

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

app.UseRequestLocalization(localizationOptions);

További információért a Lokalizációs köztes szoftver elhelyezéséről a Startup.Configureköztes szoftver folyamatában, lásd a ASP.NET Core Middlewarecímű témakört.

Ha az alkalmazásnak egy felhasználó kulturális beállításai alapján kell honosítania az erőforrásokat, használjon honosítási kultúrát cookie. A cookie használatával biztosítható, hogy a WebSocket-kapcsolat megfelelően propagálja a kultúrát. Ha a honosítási sémák az URL-elérési útra vagy a lekérdezési sztringre épülnek, lehetséges, hogy a séma nem működik együtt a WebSocketstechnológiával, így nem képes megőrizni a kulturális beállításokat. Ezért az ajánlott megközelítés egy honosítási kultúra használata cookie. Tekintse meg a cikk A kiszolgálóoldali kultúra dinamikus beállítása a felhasználói preferenciák szerint című szakaszát, ahol egy Razor kifejezés példáját találja, ami megőrzi a felhasználó kulturális környezetének kiválasztását.

Példa honosított erőforrásokra

A jelen szakaszban szereplő honosított erőforrások példája a jelen cikkben szereplő korábbi példákkal működik, ahol az alkalmazás által támogatott kultúrák alapértelmezett területi beállításként az angol (en), a spanyol (es) pedig felhasználó által kiválasztható vagy böngésző által megadott alternatív területi beállítások.

Hozzon létre egy erőforrásfájlt minden területi beállításhoz. Az alábbi példában erőforrásokat hoznak létre egy Greeting karakterlánchoz angol és spanyol nyelven.

Angol (en): Hello, World!
Spanyol (es): ¡Hola, Mundo!

Jegyzet

Az alábbi erőforrásfájlt a Visual Studióban a jobb gombbal a Pages mappára kattintva, majd a >Új elem hozzáadása>erőforrásfájlelemre kattintva adhatja hozzá. Nevezze el a fájlt CultureExample2.resx. Amikor megjelenik a szerkesztő, adjon meg adatokat egy új bejegyzéshez. Állítsa a Név értékre Greeting és állítsa a ÉrtékHello, World!értékre. Mentse a fájlt.

A Visual Studio Code használata esetén javasoljuk, hogy telepítse Tim Heuer ResX Viewer és Editor. Adjon hozzá egy üres CultureExample2.resx fájlt a Pages mappához. A bővítmény automatikusan átveszi a fájl kezelését a felhasználói felületen. Válassza az Új erőforrás hozzáadása gombot. Kövesse az utasításokat a Greeting (kulcs), Hello, World! (érték) és None (megjegyzés) bejegyzésének hozzáadásához. Mentse a fájlt. Ha bezárja és újra megnyitja a fájlt, láthatja a Greeting erőforrást.

Tim Heuer ResX Viewer és Editor nem a Microsoft tulajdonában van vagy általa karbantartott, és nem vonatkozik semmilyen Microsoft támogatási szerződésre vagy licencre.

Az alábbiak egy tipikus erőforrásfájlt mutatnak be. Manuálisan is elhelyezhet erőforrásfájlokat az alkalmazás Pages mappájába, ha nem szeretne beépített eszközkészletet használni integrált fejlesztői környezettel (IDE), például a Visual Studio beépített erőforrásfájl-szerkesztőjével vagy az erőforrásfájlok létrehozásához és szerkesztéséhez használható bővítményt tartalmazó Visual Studio Code-tal.

Pages/CultureExample2.resx:

<?xml version="1.0" encoding="utf-8"?>
<root>
  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
    <xsd:element name="root" msdata:IsDataSet="true">
      <xsd:complexType>
        <xsd:choice maxOccurs="unbounded">
          <xsd:element name="metadata">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" />
              </xsd:sequence>
              <xsd:attribute name="name" use="required" type="xsd:string" />
              <xsd:attribute name="type" type="xsd:string" />
              <xsd:attribute name="mimetype" type="xsd:string" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="assembly">
            <xsd:complexType>
              <xsd:attribute name="alias" type="xsd:string" />
              <xsd:attribute name="name" type="xsd:string" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="data">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="resheader">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" />
            </xsd:complexType>
          </xsd:element>
        </xsd:choice>
      </xsd:complexType>
    </xsd:element>
  </xsd:schema>
  <resheader name="resmimetype">
    <value>text/microsoft-resx</value>
  </resheader>
  <resheader name="version">
    <value>2.0</value>
  </resheader>
  <resheader name="reader">
    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
  <resheader name="writer">
    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
  <data name="Greeting" xml:space="preserve">
    <value>Hello, World!</value>
  </data>
</root>

Jegyzet

Az alábbi erőforrásfájlt a Visual Studióban a jobb gombbal a Pages mappára kattintva, majd a >Új elem hozzáadása>erőforrásfájlelemre kattintva adhatja hozzá. Nevezze el a fájlt CultureExample2.es.resx. Amikor megjelenik a szerkesztő, adjon meg adatokat egy új bejegyzéshez. Állítsa a Név értékre Greeting és állítsa a Érték¡Hola, Mundo!értékre. Mentse a fájlt.

A Visual Studio Code használata esetén javasoljuk, hogy telepítse Tim Heuer ResX Viewer és Editor. Adjon hozzá egy üres CultureExample2.resx fájlt a Pages mappához. A bővítmény automatikusan átveszi a fájl kezelését a felhasználói felületen. Válassza az Új erőforrás hozzáadása gombot. Kövesse az utasításokat a Greeting (kulcs), ¡Hola, Mundo! (érték) és None (megjegyzés) bejegyzésének hozzáadásához. Mentse a fájlt. Ha bezárja és újra megnyitja a fájlt, láthatja a Greeting erőforrást.

Pages/CultureExample2.es.resx:

<?xml version="1.0" encoding="utf-8"?>
<root>
  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
    <xsd:element name="root" msdata:IsDataSet="true">
      <xsd:complexType>
        <xsd:choice maxOccurs="unbounded">
          <xsd:element name="metadata">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" />
              </xsd:sequence>
              <xsd:attribute name="name" use="required" type="xsd:string" />
              <xsd:attribute name="type" type="xsd:string" />
              <xsd:attribute name="mimetype" type="xsd:string" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="assembly">
            <xsd:complexType>
              <xsd:attribute name="alias" type="xsd:string" />
              <xsd:attribute name="name" type="xsd:string" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="data">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="resheader">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" />
            </xsd:complexType>
          </xsd:element>
        </xsd:choice>
      </xsd:complexType>
    </xsd:element>
  </xsd:schema>
  <resheader name="resmimetype">
    <value>text/microsoft-resx</value>
  </resheader>
  <resheader name="version">
    <value>2.0</value>
  </resheader>
  <resheader name="reader">
    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
  <resheader name="writer">
    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
  <data name="Greeting" xml:space="preserve">
    <value>¡Hola, Mundo!</value>
  </data>
</root>

Az alábbi komponens bemutatja a honosított Greeting sztring használatát a IStringLocalizer<T>-el. Az alábbi példában szereplő Razor jelölés @Loc["Greeting"] az előző erőforrásfájlokban beállított Greeting értékkel honosítja a sztringet.

Adja hozzá a Microsoft.Extensions.Localization névterét az alkalmazás _Imports.razor fájlhoz:

@using Microsoft.Extensions.Localization

CultureExample2.razor:

@page "/culture-example-2"
@using System.Globalization
@inject IStringLocalizer<CultureExample2> Loc

<h1>Culture Example 2</h1>

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

<h2>Greeting</h2>

<p>
    @Loc["Greeting"]
</p>

<p>
    @greeting
</p>

@code {
    private string? greeting;

    protected override void OnInitialized()
    {
        greeting = Loc["Greeting"];
    }
}

Ha szeretné, adjon hozzá egy menüelemet a CultureExample2 összetevőhöz a NavMenu összetevő (NavMenu.razor) navigációs sávjához.

WebAssembly-kultúraszolgáltató referenciaforrása

A Blazor keretrendszer honosításának további megismeréséhez tekintse meg a WebAssemblyCultureProvider osztály a ASP.NET Core referenciaforrásában.

Jegyzet

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék váltása legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Megosztott erőforrások

Honosítási megosztott erőforrások létrehozásához kövesse az alábbi megközelítést.

Ellenőrizze, hogy a projekt hivatkozik-e a Microsoft.Extensions.Localization csomagra.

Jegyzet

A csomagok .NET-alkalmazásokhoz való hozzáadásáról a Csomagok telepítése és kezeléseCsomaghasználati munkafolyamat (NuGet-dokumentáció)című cikkben talál útmutatást. Ellenőrizze a megfelelő csomagverziókat a NuGet.org.
Ellenőrizze, hogy a Microsoft.Extensions.Localization névtér elérhető-e a projekt Razor összetevői számára a projekt _Imports fájljának egyik bejegyzésén keresztül:
```
@using Microsoft.Extensions.Localization
```
Hozzon létre egy álosztályt tetszőleges osztálynévvel. Az alábbi példában:
- Az alkalmazás a BlazorSample névteret használja, a honosítási eszközök pedig a BlazorSample.Localization névteret használják.
- A próba osztály neve SharedResource.
- Az osztályfájl egy Localization mappába kerül az alkalmazás gyökerénél.
Jegyzet

Ne használjon automatikusan létrehozott tervezőfájlt (például SharedResources.Designer.cs). A próba osztály a megosztott erőforrásosztályként való működésre szolgál. A tervezőfájl jelenléte névtérütközést eredményez.

Localization/SharedResource.cs:
```
namespace BlazorSample.Localization;

public class SharedResource
{
}
```
Hozza létre a megosztott erőforrásfájlokat a építési akció részeként Embedded resource. Az alábbi példában:
- A fájlok a Localization mappába kerülnek a próbabábu SharedResource osztályával (Localization/SharedResource.cs).
- Nevezze el az erőforrásfájlokat, hogy megfeleljenek a próbabábu osztály nevének. A következő példafájlok egy alapértelmezett honosítási fájlt és egy spanyol (es) honosítási fájlt tartalmaznak.
- Localization/SharedResource.resx
- Localization/SharedResource.es.resx
Figyelmeztetés

Az ebben a szakaszban ismertetett megközelítést követve nem állíthat be egyszerre LocalizationOptions.ResourcesPath, és nem használhatja a IStringLocalizerFactory.Create az erőforrások betöltésére.
Ha egy IStringLocalizer<T> összetevőbe injektált Razor dummy osztályára szeretne hivatkozni, helyezzen el egy @using irányelvet a honosítási névtérhez, vagy foglalja bele a honosítási névteret a dummy osztályhivatkozásba. Az alábbi példákban:
- Az első példa egy Localization irányelvvel a SharedResource próbabábu osztály @using névterét ismerteti.
- A második példa kifejezetten a SharedResource próbabábu osztály névterét ismerteti.
Egy Razor összetevőben használja a az alábbi módszert:
```
@using Localization
@inject IStringLocalizer<SharedResource> Loc
```
```
@inject IStringLocalizer<Localization.SharedResource> Loc
```

További útmutatásért lásd: Globalization and localization in ASP.NET Core.

Hely felülbírálása az "Érzékelők" panel használatával a fejlesztői eszközökben

Amikor a helymeghatározás felülírását használja a Érzékelők panelen a Google Chrome vagy a Microsoft Edge fejlesztői eszközeiben, az alapértelmezett nyelv az előrendezés után visszaáll. A tesztelés során ne állítsa be a nyelvet a Érzékelők panel használatával. Állítsa be a nyelvet a böngésző nyelvi beállításaival.

További információért lásd: Blazor A honosítás nem működik az InteractiveServer (dotnet/aspnetcore #53707).

További erőforrások

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-11-11

Megosztás a következőn keresztül:

ASP.NET Core Blazor globalizáció és honosítás

Globalizáció és honosítás

Globalizáció

A .NET-globalizáció és a Unicode (ICU) nemzetközi összetevőinek támogatása (Blazor WebAssembly)

Invariáns globalizáció

Időzónára vonatkozó információk

Bemutató összetevő

A kultúra dinamikus beállítása a Accept-Language fejlécből

Az ügyféloldali kultúra statikus beállítása

A kiszolgálóoldali kultúra statikus beállítása

Az ügyféloldali kultúra dinamikus beállítása felhasználói beállítások szerint

A kiszolgálóoldali kultúra dinamikus beállítása felhasználói beállítások szerint

A kultúra dinamikus megadása egy Blazor Web App-ban a felhasználói preferencia alapján

A .Client projekt frissítései

Kiszolgálóprojekt frissítései

Interaktív automatikus összetevők

Lokalizáció

Ügyféloldali honosítás

Kiszolgálóoldali honosítás

Példa honosított erőforrásokra

WebAssembly-kultúraszolgáltató referenciaforrása

Megosztott erőforrások

Hely felülbírálása az "Érzékelők" panel használatával a fejlesztői eszközökben

További erőforrások

Visszajelzés

További források

A kultúra dinamikus beállítása a `Accept-Language` fejlécből

A `.Client` projekt frissítései