ASP.NET Çekirdek Blazor genelleştirme ve yerelleştirme

Makale
11/12/2024

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Bu makalede, farklı kültür ve dillerdeki kullanıcılara genelleştirilmiş ve yerelleştirilmiş içeriğin nasıl işlenip işlendiği açıklanmaktadır.

Genelleştirme ve yerelleştirme

Genelleştirme için sayı Blazor ve tarih biçimlendirmesi sağlar. Yerelleştirme için içeriği .NET Kaynakları sisteminiBlazorişler.

ASP.NET Core'un yerelleştirme özelliklerinin sınırlı bir kümesi desteklenir:

Desteklenir:IStringLocalizer ve IStringLocalizer<T> uygulamalarda desteklenir Blazor .

Desteklenmiyor:IHtmlLocalizer ve IViewLocalizer ASP.NET Temel MVC özellikleridir ve Blazor uygulamalarında desteklenmez.

uygulamalar için, ve uygulandığında veri ek açıklamaları kullanılarak form doğrulaması için yerelleştirilmiş doğrulama iletileri desteklenir.

Bu makalede, 'nin genelleştirme ve yerelleştirme özelliklerinin aşağıdakilere göre nasıl kullanılacağı Blazoraçıklanmaktadır:

Tarayıcı Accept-Language ayarlarındaki kullanıcının dil tercihlerine göre tarayıcı tarafından ayarlanan üst bilgi.
Uygulama tarafından ayarlanan ve üst bilgininAccept-Language bağlı olmayan bir kültür. Ayar tüm kullanıcılar için statik veya uygulama mantığına göre dinamik olabilir. Ayar kullanıcının tercihini temel alırsa, ayar genellikle gelecekteki ziyaretlerde yeniden yüklenmek üzere kaydedilir.

Ek genel bilgiler için aşağıdaki kaynaklara bakın:

Genelleştirme ve yerelleştirme kavramlarıyla ilgilenirken dil ve kültür terimleri genellikle birbirinin yerine kullanılır.

Bu makalede dil, bir kullanıcının tarayıcı ayarlarında yaptığı seçimleri ifade eder. Kullanıcının dil seçimleri, üst bilgidekiAccept-Language gönderilir. Tarayıcı ayarları genellikle kullanıcı arabiriminde "dil" sözcüğünü kullanır.

Kültür , .NET ve Blazor API üyeleriyle ilgili. Örneğin, kullanıcının isteği, kullanıcının perspektifinden bir Accept-Language. API genellikle üye adlarında "kültür" sözcüğünü kullanır.

Bu makaledeki kılavuzda, accessiblity araçlarının kullandığı sayfanın HTML dil özniteliğinin ()<html lang="..."> ayarlanması ele alınmıyor. Etiketin özniteliğine lang veya <html> JavaScript'te bir dil document.documentElement.lang atayarak değeri statik olarak ayarlayabilirsiniz. değerini document.documentElement.lang birlikte çalışmaJS dinamik olarak ayarlayabilirsiniz.

Not

Bu makaledeki kod örnekleri, .NET 6 veya sonraki sürümlerindeki ASP.NET Core'da desteklenen null atanabilir başvuru türlerini (NTS) ve .NET derleyici null durum statik analizini benimser. Core 5.0 veya önceki ASP.NET hedeflerken, makalenin örneklerinden null tür atamasını (?) kaldırın.

Globalleştirme

öznitelik yönergesi @bind , uygulamanın desteklediği ilk tercih edilen dile göre görüntüleme için biçimler uygular ve değerleri ayrıştırmaktadır. @bind @bind:culture bir değeri ayrıştırmak ve biçimlendirmek için parametresini System.Globalization.CultureInfo destekler.

Geçerli kültüre özelliğinden System.Globalization.CultureInfo.CurrentCulture erişilebilir.

CultureInfo.InvariantCulture aşağıdaki alan türleri için kullanılır (<input type="{TYPE}" />yer tutucu türüdür {TYPE} ):

date
number

Önceki alan türleri:

Uygun tarayıcı tabanlı biçimlendirme kuralları kullanılarak görüntülenir.
Serbest biçimli metin içeremez.
Tarayıcının uygulamasına göre kullanıcı etkileşimi özelliklerini sağlayın.

Blazor , geçerli kültürdeki değerleri işlemek için yerleşik destek sağlar. Bu nedenle ve alan türleri kullanılırken @bind:culturedate ile number bir kültür belirtilmesi önerilmez.

Aşağıdaki alan türlerinin belirli biçimlendirme gereksinimleri vardır ve tüm ana tarayıcılar tarafından desteklenmez, bu nedenle tarafından Blazordesteklenmez:

datetime-local
month
week

Önceki türlerin geçerli tarayıcı desteği için bkz . Kullanabilir miyim?

Unicode (ICU) desteği için .NET genelleştirmesi ve Uluslararası Bileşenleri (Blazor WebAssembly)

Blazor WebAssembly , azaltılmış bir genelleştirme API'sini ve Unicode (ICU) yerel ayarları için yerleşik Uluslararası Bileşenler kümesini kullanır. Daha fazla bilgi için bkz . .NET genelleştirme ve ICU: WebAssembly üzerinde ICU.

Uygulamanın yerel ayarlarını denetlemek üzere özel bir ICU veri dosyası yüklemek için bkz . WASM Genelleştirme Icu. Şu anda özel ICU veri dosyasını el ile oluşturmak gerekir. Kasım 2025'te .NET 10 için dosya oluşturma işlemini kolaylaştıran .NET araçları planlanıyor.

Bir uygulamada yerel ayarların özel bir Blazor WebAssembly alt kümesinin yüklenmesi .NET 8 veya sonraki sürümlerde desteklenir. Daha fazla bilgi için bu makalenin 8.0 veya sonraki bir sürümü için bu bölüme erişin.

Sabit genelleştirme

Bu bölüm yalnızca istemci tarafı Blazor senaryoları için geçerlidir.

Uygulama yerelleştirme gerektirmiyorsa, uygulamayı genellikle Birleşik Devletler İngilizceyi (en-US) temel alan sabit kültürü destekleyecek şekilde yapılandırın. Sabit genelleştirmenin kullanılması, uygulamanın indirme boyutunu azaltır ve uygulamanın daha hızlı başlatılmasına neden olur. InvariantGlobalization özelliğini true uygulamanın proje dosyasında (.csproj):

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

Alternatif olarak, sabit genelleştirmeyi aşağıdaki yaklaşımlarla yapılandırın:

runtimeconfig.json içinde:

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

Ortam değişkeniyle:
- Anahtar: DOTNET_SYSTEM_GLOBALIZATION_INVARIANT
- Değer: true veya 1

Daha fazla bilgi için bkz. Genelleştirme için çalışma zamanı yapılandırma seçenekleri (.NET belgeleri).

Saat dilimi bilgileri

Bu bölüm yalnızca istemci tarafı Blazor senaryoları için geçerlidir.

Sabit genelleştirmenin benimsenmesi yalnızca yerelleştirilmemiş saat dilimi adlarının kullanılmasına neden olur. Uygulamanın indirme boyutunu azaltan ve uygulamanın daha hızlı başlatılmasına neden olan saat dilimi kodunu ve verilerini kırpmak için, uygulamanın proje dosyasında değeri <InvariantTimezone> olan MSBuild özelliğini uygulayıntrue:

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

Not

<BlazorEnableTimeZoneSupport> önceki <InvariantTimezone> bir ayarı geçersiz kılar. Ayarı kaldırmanızı <BlazorEnableTimeZoneSupport> öneririz.

Saat dilimi bilgilerini doğru yapmak için bir veri dosyası eklenir. Uygulama bu özelliği gerektirmiyorsa, uygulamanın proje dosyasında MSBuild özelliğini <BlazorEnableTimeZoneSupport> olarak ayarlayarak false devre dışı bırakmayı göz önünde bulundurun:

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

Tanıtım bileşeni

Bu makalede ele alınan genelleştirme ve yerelleştirme kavramlarını göstermek CultureExample1 için aşağıdaki Blazor bileşen kullanılabilir.

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

Önceki örnekteki () sayı dizesi biçimi (N2.ToString("N2")), standart bir .NET sayısal biçim tanımlayıcısıdır. Biçimi N2 tüm sayısal türler için desteklenir, bir grup ayırıcısı içerir ve en fazla iki ondalık basamak işler.

İsteğe bağlı olarak, bileşenin (NavMenu) NavMenu.razor bileşenindeki CultureExample1 gezintiye bir menü öğesi ekleyin.

Üst bilgiden `Accept-Language` kültürü dinamik olarak ayarlama

Microsoft.Extensions.Localization Paketi uygulamaya ekleyin.

Üst Accept-Language bilgi tarayıcı tarafından ayarlanır ve tarayıcı ayarlarında kullanıcının dil tercihleri tarafından denetlenmektedir. Tarayıcı ayarlarında, kullanıcı tercih sırasına göre bir veya daha fazla tercih edilen dil ayarlar. Tercih sırası, tarayıcı tarafından üst bilgideki her dil için kalite değerlerini (q0-1) ayarlamak için kullanılır. Aşağıdaki örnekte İngilizce, İngilizce ve Kosta Rika İspanyolcası Birleşik Devletler Birleşik Devletler İngilizce veya İngilizce tercihi verilmiştir:

Accept-Language: en-US,en; q=0.9,es-CR; q=0.8

Uygulamanın kültürü, uygulamanın desteklenen bir kültürüyle eşleşen ilk istenen dille eşleşerek ayarlanır.

İstemci tarafı geliştirmede, BlazorWebAssemblyLoadAllGlobalizationData istemci tarafı uygulamasının proje dosyasında ():true.csproj

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

İstemci tarafı geliştirmede, üst bilgiden Accept-Language kültürü dinamik olarak ayarlamak desteklenmez.

Not

Uygulamanın belirtimi desteklenen kültürleri açık bir listeyle sınırlamayı gerektiriyorsa, bu makalenin Kullanıcı tercihine göre istemci tarafı kültürünü dinamik olarak ayarlama bölümüne bakın.

Uygulamalar Yerelleştirme Ara Yazılımı kullanılarak yerelleştirilir. ile AddLocalizationuygulamaya yerelleştirme hizmetleri ekleyin.

Hizmetlerin kaydedildiği dosyaya Program aşağıdaki satırı ekleyin:

builder.Services.AddLocalization();

Sunucu tarafı geliştirmede, istek kültürünü denetleyebilen herhangi bir ara yazılımdan önce uygulamanın desteklenen kültürlerini belirtin. Genel olarak, çağrısından MapRazorComponentshemen önce İstek Yerelleştirme Ara Yazılımı'nı yerleştirin. Aşağıdaki örnek, Birleşik Devletler İngilizce ve Kosta Rika İspanyolcası için desteklenen kültürleri yapılandırıyor:

Sunucu tarafı geliştirmede, yönlendirme ara yazılımı (UseRouting) işleme işlem hattına eklendikten hemen sonra uygulamanın desteklenen kültürlerini belirtin. Aşağıdaki örnek, Birleşik Devletler İngilizce ve Kosta Rika İspanyolcası için desteklenen kültürleri yapılandırıyor:

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

Dosyanın ara yazılım işlem hattında Program Yerelleştirme Ara Yazılımını sıralama hakkında bilgi için bkz . ASP.NET Core Ara Yazılımı.

Genelleştirmenin CultureExample1nasıl çalıştığını incelemek için Tanıtım bileşeni bölümünde gösterilen bileşeni kullanın. Birleşik Devletler İngilizce (en-US) ile bir istekte bulun. Tarayıcının dil ayarlarında Kosta Rika İspanyolcasına (es-CR) geçin. Web sayfasını yeniden isteyin.

Kültür Birleşik Devletler İngilizce ()en-US olduğunda, işlenen bileşen ondalık değeri () için nokta içeren sayılarda ay/gün tarih biçimlendirmesi (6/7), 12 saatlik saat (AM/PM1,999.69 ) ve virgül ayırıcıları kullanır:

Tarih: 07.06.2021 06:45:22
Sayı: 1.999,69

Kültür Kosta Rika İspanyolcası (es-CR olduğunda), işlenen bileşen ondalık değeri () için virgül içeren sayılarda gün/ay tarih biçimlendirmesi (7/61.999,69), 24 saatlik zaman ve nokta ayırıcılarını kullanır:

Tarih: 6/7/2021 6:49:38
Sayı: 1.999,69

İstemci tarafı kültürünü statik olarak ayarlama

BlazorWebAssemblyLoadAllGlobalizationData özelliğini true uygulamanın proje dosyasında (.csproj):

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

İstemci tarafı işleme için Ara Dil (IL) Bağlayıcı yapılandırması, açıkça istenen yerel ayarlar dışında uluslararasılaştırma bilgilerini çıkarır. Daha fazla bilgi için bkz . ASP.NET Core Blazoriçin Bağlayıcıyı Yapılandırma.

Başlangıç seçeneğiyle BlazorapplicationCulture başladığında uygulamanın kültürü JavaScript'te Blazor ayarlanabilir. Aşağıdaki örnek, uygulamayı Birleşik Devletler İngilizce (en-US) kültürü kullanılarak başlatacak şekilde yapılandırılır.

etiketine ekleyerek otomatik başlatmayı Blazorautostart="false"Blazor

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

Yukarıdaki örnekte, {BLAZOR SCRIPT} yer tutucu betik yolu ve dosya adıdır Blazor . Betiğin konumu için bkz . ASP.NET Core Blazor proje yapısı.

Etiketinden sonra <script>Blazorve kapanış <script> etiketinden önce aşağıdaki </body> bloğu ekleyin:

Blazor Web App:

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

Tek başına Blazor WebAssembly:

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

değeri applicationCulture BCP-47 dil etiketi biçimine uygun olmalıdır. Blazor'ı başlatma hakkında daha fazla bilgi için bkz. ASP.NET Core Blazor'ı başlatma.

Kültürün Blazorbaşlangıç seçeneğini ayarlamanın bir alternatifi, kültürü C# kodunda ayarlamaktır. CultureInfo.DefaultThreadCurrentCulture CultureInfo.DefaultThreadCurrentUICulture ve dosyasını aynı kültüre ayarlayınProgram.

Ad alanını System.Globalization dosyaya Program ekleyin:

using System.Globalization;

( öğesini oluşturan ve çalıştıran WebAssemblyHostBuilderawait builder.Build().RunAsync();satırdan önce kültür ayarlarını ekleyin:

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

Not

Blazor WebAssembly Şu anda uygulamalar yalnızca tabanlı DefaultThreadCurrentCulturekaynakları yükler. Daha fazla bilgi için bkz Blazor . WASM yalnızca geçerli kültüre dayanır (geçerli kullanıcı arabirimi kültürüne uyulmuyor) (dotnet/aspnetcore #56824).

Sunucu tarafı kültürünü statik olarak ayarlama

Sunucu tarafı uygulamalar Yerelleştirme Ara Yazılımı kullanılarak yerelleştirilir. ile AddLocalizationuygulamaya yerelleştirme hizmetleri ekleyin.

Program dosyasında:

builder.Services.AddLocalization();

İstek kültürünü Program denetleyebilen herhangi bir ara yazılımdan önce dosyadaki statik kültürü belirtin. Genel olarak, İstek Yerelleştirme Ara Yazılımını hemen önüne MapRazorComponentsyerleştirin. Aşağıdaki örnekte İngilizce Birleşik Devletler yapılandırılır:

İşleme işlem hattına Program Yönlendirme Ara Yazılımı (UseRouting) eklendikten hemen sonra dosyadaki statik kültürü belirtin. Aşağıdaki örnekte İngilizce Birleşik Devletler yapılandırılır:

app.UseRequestLocalization("en-US");

için UseRequestLocalization kültür değeri BCP-47 dil etiketi biçimine uygun olmalıdır.

Dosyanın ara yazılım işlem hattında Program Yerelleştirme Ara Yazılımını sıralama hakkında bilgi için bkz . ASP.NET Core Ara Yazılımı.

Sunucu tarafı uygulamalar Yerelleştirme Ara Yazılımı kullanılarak yerelleştirilir. ile AddLocalizationuygulamaya yerelleştirme hizmetleri ekleyin.

In Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

İşlem işlem hattına Yönlendirme Ara Yazılımı eklendikten hemen sonra içindeki Startup.ConfigureStartup.cs() statik kültürü belirtin. Aşağıdaki örnekte İngilizce Birleşik Devletler yapılandırılır:

app.UseRequestLocalization("en-US");

için UseRequestLocalization kültür değeri BCP-47 dil etiketi biçimine uygun olmalıdır.

Yerelleştirme Ara Yazılımının ara yazılım işlem hattında Startup.Configuresıralanması hakkında bilgi için bkz . ASP.NET Core Ara Yazılımı.

İstemci tarafı kültürünü kullanıcı tercihlerine göre dinamik olarak ayarlama

Bir uygulamanın kullanıcının tercihini depolayabileceği konumlara örnek olarak tarayıcı yerel depolama (istemci tarafı senaryoları için yaygın), yerelleştirme cookie veya veritabanı (sunucu tarafı senaryoları için yaygın) veya dış veritabanına bağlı ve web API'sinin eriştiği dış hizmet verilebilir. Aşağıdaki örnekte tarayıcı yerel depolamanın nasıl kullanılacağı gösterilmektedir.

Microsoft.Extensions.Localization Paketi uygulamaya ekleyin.

Not

.NET uygulamalarına paket ekleme hakkında yönergeler için, Paket tüketimi iş akışında (NuGet belgeleri)paketleri yüklemek ve yönetmek altındaki makalelere bakın. NuGet.org'da doğru paket sürümlerini onaylayın.

BlazorWebAssemblyLoadAllGlobalizationData Özelliğini true proje dosyasında olarak ayarlayın:

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

Uygulamanın istemci tarafı işleme kültürü, çerçevenin API'sini Blazor kullanarak ayarlanır. Kullanıcının kültür seçimi tarayıcı yerel depolama alanında kalıcı hale gelebilir.

Tarayıcı yerel depolama alanıyla kullanıcının kültür seçimini almak ve ayarlamak için 's etiketindenJSBlazor<script> işlevler sağlayın:

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

Not

Yukarıdaki örnek, istemciyi genel işlevlerle kirletir. Üretim uygulamalarında daha iyi bir yaklaşım için bkz . JavaScript modüllerinde JavaScript yalıtımı.

ve ad System.Globalization Microsoft.JSInterop alanlarını dosyanın en üstüne Program ekleyin:

using System.Globalization;
using Microsoft.JSInterop;

Aşağıdaki satırı kaldırın:

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

Önceki satırı aşağıdaki kodla değiştirin. Kod ile 'nin yerelleştirme hizmetini uygulamanın hizmet koleksiyonuna ekler Blazorve kullanıcının yerel depolamadan kültür seçimini çağırmak AddLocalization ve almak için birlikte çalışmaJS.JS Yerel depolama kullanıcı için bir kültür içermiyorsa, kod varsayılan Birleşik Devletler İngilizce (en-US ) değerini ayarlar.

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

Not

Aşağıdaki CultureSelector bileşen aşağıdaki eylemlerin nasıl gerçekleştirileceklerini gösterir:

Birlikte çalışma aracılığıyla JS kullanıcının kültür seçimini tarayıcı yerel depolama alanına ayarlayın.
İstenen ()forceLoad: true bileşenini yeniden yükleyin. Bu bileşen güncelleştirilmiş kültürü kullanır.

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

Not

hakkında IJSInProcessRuntimedaha fazla bilgi için bkz . ASP.NET Core'da Blazor.NET yöntemlerinden JavaScript işlevlerini çağırma.

bileşenindeki öğesinin </main> kapanış etiketinin MainLayout içine ()MainLayout.razor bileşenini ekleyin CultureSelector :

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

CultureExample1 Önceki örneğin nasıl çalıştığını incelemek için Tanıtım bileşeni bölümünde gösterilen bileşeni kullanın.

Sunucu tarafı kültürünü kullanıcı tercihlerine göre dinamik olarak ayarlama

Bir uygulamanın kullanıcının tercihini depolayabileceği konumlara örnek olarak tarayıcı yerel depolama (istemci tarafı senaryoları için yaygın), yerelleştirme cookie veya veritabanı (sunucu tarafı senaryoları için yaygın) veya dış veritabanına bağlı ve web API'sinin eriştiği dış hizmet verilebilir. Aşağıdaki örnekte yerelleştirmenin nasıl kullanılacağı gösterilmektedir cookie.

Not

Aşağıdaki örnekte, uygulamanın bileşendeki () bileşende etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) belirterek genelRoutesvarsayılır:App

<Routes @rendermode="InteractiveServer" />

Uygulama sayfa başına/bileşen etkileşimini benimsediyse, örnek bileşenlerinin işleme modlarını değiştirmek için bu bölümün sonundaki açıklamalara bakın.

Microsoft.Extensions.Localization Paketi uygulamaya ekleyin.

Not

Sunucu tarafı uygulamalar Yerelleştirme Ara Yazılımı kullanılarak yerelleştirilir. ile AddLocalizationuygulamaya yerelleştirme hizmetleri ekleyin.

Program dosyasında:

builder.Services.AddLocalization();

ile RequestLocalizationOptionsuygulamanın varsayılan ve desteklenen kültürlerini ayarlayın.

İstek işleme işlem hattında çağrısından MapRazorComponents önce aşağıdaki kodu yerleştirin:

Yönlendirme Ara Yazılımı (UseRouting) istek işleme işlem hattına eklendikten sonra aşağıdaki kodu yerleştirin:

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

app.UseRequestLocalization(localizationOptions);

Ara yazılım işlem hattında Yerelleştirme Ara Yazılımını sıralama hakkında bilgi için bkz . ASP.NET Core Ara Yazılımı.

Aşağıdaki örnekte, Yerelleştirme Ara Yazılımı tarafından okunabilen bir cookie içinde geçerli kültürün nasıl ayarlanacağı gösterilmektedir.

Bileşen için App aşağıdaki ad alanları gereklidir:

Bileşen dosyasının (App) en üstüne Components/App.razor aşağıdakileri ekleyin:

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

Bileşen dosyasının altına @code aşağıdaki App bloğu ekleyin:

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

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

Dosyada Pages/_Host.cshtml yapılan değişiklikler aşağıdaki ad alanlarını gerektirir:

Aşağıdakileri dosyaya ekleyin:

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

Ara yazılım işlem hattında Yerelleştirme Ara Yazılımını sıralama hakkında bilgi için bkz . ASP.NET Core Ara Yazılımı.

Uygulama denetleyici eylemlerini işlemek üzere yapılandırılmamışsa:

Dosyadaki hizmet koleksiyonunda AddControllers arayarak Program MVC hizmetleri ekleyin:
```
builder.Services.AddControllers();
```
üzerinde arayarak Program dosyaya MapControllers denetleyici uç noktası yönlendirmesi IEndpointRouteBuilder ekleyin:app
```
app.MapControllers();
```

Kullanıcının bir kültür seçmesine izin veren kullanıcı arabirimi sağlamak için, yerelleştirme ile yeniden yönlendirme tabanlı bir yaklaşımcookie. Uygulama, kullanıcının seçili kültürünü bir denetleyiciye yönlendirme yoluyla kalıcı hale getirir. Denetleyici, kullanıcının seçili kültürünü bir cookie olarak ayarlar ve kullanıcıyı özgün URI'ye geri yönlendirir. Bu işlem, bir kullanıcı güvenli bir kaynağa erişmeye çalıştığında, kullanıcının bir oturum açma sayfasına yeniden yönlendirildiği ve ardından özgün kaynağa geri yönlendirildiği bir web uygulamasında gerçekleşen işlemlere benzer.

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

Uyarı

LocalRedirect Yukarıdaki örnekte gösterildiği gibi, açık yeniden yönlendirme saldırılarını önlemek için eylem sonucunu kullanın. Daha fazla bilgi için bkz . ASP.NET Core'da açık yeniden yönlendirme saldırılarını önleme.

Aşağıdaki CultureSelector bileşen, yönteminin SetCultureController yeni kültürle nasıl çağrılacaklarını gösterir. Bileşen, uygulama genelinde kullanılmak üzere klasörüne yerleştirilir 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 (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);
        }
    }
}

CultureSelector Bileşeni bileşene MainLayout ekleyin. Dosyadaki kapanış </main> etiketinin içine aşağıdaki işaretlemeyi Components/Layout/MainLayout.razor yerleştirin:

CultureSelector Bileşeni bileşene MainLayout ekleyin. Dosyadaki kapanış </main> etiketinin içine aşağıdaki işaretlemeyi Shared/MainLayout.razor yerleştirin:

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

CultureExample1 Önceki örneğin nasıl çalıştığını incelemek için Tanıtım bileşeni bölümünde gösterilen bileşeni kullanın.

Yukarıdaki örnekte, uygulamanın bileşendeki () bileşeninde Etkileşimli Sunucu işleme modunu belirterek genelRoutesvarsayılır:App

<Routes @rendermode="InteractiveServer" />

Uygulama sayfa başına/bileşen etkileşimini benimsiyorsa aşağıdaki değişiklikleri yapın:

Etkileşimli Sunucu işleme modunu bileşen dosyasının CultureExample1 (Components/Pages/CultureExample1.razor):
```
@rendermode InteractiveServer
```
Uygulamanın ana düzeninde ()Components/Layout/MainLayout.razor Etkileşimli Sunucu işleme modunu bileşene CultureSelector uygulayın:
```
<CultureSelector @rendermode="InteractiveServer" />
```

Kullanıcı tercihlerine göre kültürü Blazor Web App dinamik olarak ayarlama

Bu bölüm, Otomatik (Sunucu ve WebAssembly) etkileşimini benimseyenler için Blazor Web Appgeçerlidir.

Bir uygulamanın kullanıcının tercihini depolayabileceği konumlara örnek olarak tarayıcı yerel depolaması (istemci tarafı senaryoları için yaygın), yerelleştirme cookie veya veritabanında (sunucu tarafı senaryolar için yaygın), hem yerel depolama hem de yerelleştirme cookie (Blazor Web Appsunucu ve WebAssembly bileşenleriyle birlikte) veya dış veritabanına ekli ve web API'siyle erişilen bir dış hizmet verilebilir. Aşağıdaki örnekte, istemci tarafı işlenmiş (CSR) bileşenleri için tarayıcı yerel depolamasının nasıl kullanılacağı ve sunucu tarafı işlenen (SSR) bileşenleri için yerelleştirmenin cookie nasıl kullanılacağı gösterilmektedir.

Proje güncelleştirmeleri `.Client`

Microsoft.Extensions.Localization Paketi .Client projeye ekleyin.

Not

BlazorWebAssemblyLoadAllGlobalizationData Özelliğini true proje dosyasında olarak .Client ayarlayın:

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

proje System.Globalization dosyasının en üstüne Microsoft.JSInterop ve .Client ad Program alanlarını ekleyin:

using System.Globalization;
using Microsoft.JSInterop;

Aşağıdaki satırı kaldırın:

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

Not

Aşağıdaki CultureSelector bileşeni .Client projeye ekleyin.

Bileşen, SSR veya CSR bileşenleri için çalışmak üzere aşağıdaki yaklaşımları benimser:

İstemci tarafı genelleştirme verileri sunucu tarafı genelleştirme verilerinin sağladığı yerelleştirilmiş kültür görüntüleme adlarını içerdiğinden, açılan listedeki kullanılabilir her kültürün görünen adı bir sözlük tarafından sağlanır. Örneğin, sunucu tarafı yerelleştirme, kültür ne zaman English (United States) ve en-US farklı bir kültür kullanıldığında görüntülenirIngles (). Kültür görünen adlarının yerelleştirilmesi genelleştirme ile Blazor WebAssembly kullanılamadığından, yüklenen herhangi bir kültür için istemcide İngilizce Birleşik Devletler görünen adı yalnızca en-USolur. Özel sözlük kullanmak, bileşenin en azından tam İngilizce kültür adlarını görüntülemesine izin verir.
Kullanıcı kültürü değiştirdiğinde, JS birlikte çalışma yerel tarayıcı depolamasında kültürü ayarlar ve bir denetleyici eylemi yerelleştirmeyi cookie kültürle güncelleştirir. Denetleyici daha sonra Sunucu projesi güncelleştirmeleri bölümünde uygulamaya eklenir.

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[]
    {
        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);
        }
    }
}

.Client projesinin _Imports dosyasında (_Imports.razor), Pages klasöründeki bileşenlerin ad alanını ekleyerek ad alanını .Client projenizin ad alanıyla eşleşecek şekilde güncelleştirin:

@using BlazorSample.Client.Pages

Not

hakkında IJSInProcessRuntimedaha fazla bilgi için bkz . ASP.NET Core'da Blazor.NET yöntemlerinden JavaScript işlevlerini çağırma.

.Client projesinde CultureSelector bileşenini MainLayout bileşenine ekleyin. Dosyadaki kapanış </main> etiketinin içine aşağıdaki işaretlemeyi Layout/MainLayout.razor yerleştirin:

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

Projede .Client , CSR bileşenlerinde küreselleşmenin nasıl çalıştığını incelemek için aşağıdaki CultureClient bileşeni yerleştirin.

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 projesinde, küreselleştirmenin SSR bileşenleri için nasıl çalıştığını incelemek için aşağıdaki CultureServer bileşenini yerleştirin.

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

Genel otomatik işleme modunu devralan bir bileşende genelleştirmenin nasıl çalıştığını incelemek için CultureExample1 bölümünde gösterilen bileşenini kullanın. CultureExample1 bileşenini .Client projesinin Pages klasörüne ekleyin.

CultureClient, CultureServerve CultureExample1 bileşenlerini Layout/NavMenu.razorkenar çubuğu gezintisine ekleyin:

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

Sunucu projesi güncelleştirmeleri

Microsoft.Extensions.Localization Paketi sunucu projesine ekleyin.

Not

Sunucu tarafı uygulamalar Yerelleştirme Ara Yazılımı kullanılarak yerelleştirilir. ile AddLocalizationuygulamaya yerelleştirme hizmetleri ekleyin.

Hizmetlerin kaydedildiği sunucu projesinin Program dosyasında:

builder.Services.AddLocalization();

ile RequestLocalizationOptionsuygulamanın varsayılan ve desteklenen kültürlerini ayarlayın.

İstek işleme işlem hattında çağrısından MapRazorComponents önce aşağıdaki kodu yerleştirin:

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

app.UseRequestLocalization(localizationOptions);

Aşağıdaki örnekte, Yerelleştirme Ara Yazılımı tarafından okunabilen bir cookie içinde geçerli kültürün nasıl ayarlanacağı gösterilmektedir.

Bileşen için App aşağıdaki ad alanları gereklidir:

Bileşen dosyasının (App) en üstüne Components/App.razor aşağıdakileri ekleyin:

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

Uygulamanın istemci tarafı işleme kültürü, çerçevenin API'sini Blazor kullanarak ayarlanır. Bir kullanıcının kültür seçimi CSR bileşenleri için tarayıcı yerel depolama alanında kalıcı hale gelebilir.

etiketinden Blazor<script> sonra, tarayıcı yerel depolama alanıyla kullanıcının kültür seçimini almak ve ayarlamak için işlevler sağlayın:JS

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

Not

Yukarıdaki örnek, istemciyi genel işlevlerle kirletir. Üretim uygulamalarında daha iyi bir yaklaşım için bkz . JavaScript modüllerinde JavaScript yalıtımı.

Bileşen dosyasının altına @code aşağıdaki App bloğu ekleyin:

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

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

Sunucu projesi denetleyici eylemlerini işlemek üzere yapılandırılmamışsa:

Dosyadaki hizmet koleksiyonunda AddControllers arayarak Program MVC hizmetleri ekleyin:
```
builder.Services.AddControllers();
```
üzerinde arayarak Program dosyaya MapControllers denetleyici uç noktası yönlendirmesi IEndpointRouteBuilder ekleyin:app
```
app.MapControllers();
```

Kullanıcının SSR bileşenleri için bir kültür seçmesine izin vermek için, yerelleştirme ile yeniden yönlendirme tabanlı bir yaklaşımcookie. Uygulama, kullanıcının seçili kültürünü bir denetleyiciye yönlendirme yoluyla kalıcı hale getirir. Denetleyici, kullanıcının seçili kültürünü bir cookie olarak ayarlar ve kullanıcıyı özgün URI'ye geri yönlendirir. Bu işlem, bir kullanıcı güvenli bir kaynağa erişmeye çalıştığında, kullanıcının bir oturum açma sayfasına yeniden yönlendirildiği ve ardından özgün kaynağa geri yönlendirildiği bir web uygulamasında gerçekleşen işlemlere benzer.

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

Uyarı

Etkileşimli Otomatik bileşenler

Bu bölümdeki kılavuz, sayfa başına/bileşen işlemeyi benimseyen ve Etkileşimli Otomatik işleme modunu belirten uygulamalardaki bileşenler için de çalışır:

@rendermode InteractiveAuto

Localization (Yerelleştirme)

Uygulama dinamik kültür seçimini henüz desteklemiyorsa paketi uygulamaya ekleyin Microsoft.Extensions.Localization .

Not

İstemci tarafı yerelleştirme

BlazorWebAssemblyLoadAllGlobalizationData özelliğini true uygulamanın proje dosyasında (.csproj):

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

Program dosyasında, ad alanının ad alanını System.Globalization dosyanın en üstüne ekleyin:

using System.Globalization;

ile Blazoruygulamanın hizmet koleksiyonuna 'nin yerelleştirme hizmetini ekleyinAddLocalization:

builder.Services.AddLocalization();

Sunucu tarafı yerelleştirme

Uygulamanın kültürünü ayarlamak için Yerelleştirme Ara Yazılımı'nı kullanın.

Uygulama henüz dinamik kültür seçimini desteklemiyorsa:

ile AddLocalizationuygulamaya yerelleştirme hizmetleri ekleyin.
Dosyada uygulamanın varsayılan ve desteklenen kültürlerini Program belirtin. Aşağıdaki örnekte İngilizce ve Kosta Rika İspanyolcası Birleşik Devletler için desteklenen kültürler yapılandırılır.

builder.Services.AddLocalization();

İstek kültürünü denetleyebilen herhangi bir ara yazılımdan önce İstek Yerelleştirme Ara Yazılımını yerleştirin. Genellikle ara yazılımı çağrısından MapRazorComponentshemen önce yerleştirin:

İşleme işlem hattına Yönlendirme Ara Yazılımı (UseRouting) eklendikten hemen sonra:

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

app.UseRequestLocalization(localizationOptions);

Ara yazılım işlem hattında Yerelleştirme Ara Yazılımını sıralama hakkında bilgi için bkz . ASP.NET Core Ara Yazılımı.

ile AddLocalizationuygulamaya yerelleştirme hizmetleri ekleyin.
uygulamasındaStartup.Configure uygulamanın varsayılan ve desteklenen kültürlerini Startup.cs belirtin. Aşağıdaki örnekte İngilizce ve Kosta Rika İspanyolcası Birleşik Devletler için desteklenen kültürler yapılandırılır.

In Startup.ConfigureServices (Startup.cs):

services.AddLocalization();

Startup.Configure İşleme işlem hattına Yönlendirme Ara Yazılımı (UseRouting) eklendikten hemen sonra:

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

app.UseRequestLocalization(localizationOptions);

Yerelleştirme Ara Yazılımının ara yazılım işlem hattında Startup.Configuresıralanması hakkında bilgi için bkz . ASP.NET Core Ara Yazılımı.

Uygulamanın bir kullanıcının kültür ayarını depolamaya göre kaynakları yerelleştirmesi gerekiyorsa, yerelleştirme kültürü cookiekullanın. kullanımı cookie , WebSocket bağlantısının kültürü doğru bir şekilde yaymasını sağlar. Yerelleştirme düzenleri URL yolunu veya sorgu dizesini temel alırsa, düzen WebSockets ile çalışamayabilir ve bu nedenle kültürü kalıcı hale getirmez. Bu nedenle, önerilen yaklaşım bir yerelleştirme kültürü cookiekullanmaktır. göre sunucu tarafı kültürünü dinamik olarak ayarlama bölümüne bakın.

Yerelleştirilmiş kaynaklar örneği

Bu bölümdeki yerelleştirilmiş kaynaklar örneği, uygulamanın desteklenen kültürlerinin varsayılan yerel ayar olarak İngilizce (en) ve kullanıcı tarafından seçilebilen veya tarayıcıda belirtilen alternatif yerel ayar olarak İspanyolca (es) olduğu bu makaledeki önceki örneklerle birlikte çalışır.

Her yerel ayar için bir kaynak dosyası oluşturun. Aşağıdaki örnekte, İngilizce ve İspanyolca bir Greeting dize için kaynaklar oluşturulur:

İngilizce (en): Hello, World!
İspanyolca (es): ¡Hola, Mundo!

Not

Aşağıdaki kaynak dosyası, klasöre sağ tıklayıp Pages Yeni Öğe> Ekle>seçilerek Visual Studio'ya eklenebilir. Dosyayı CultureExample2.resx olarak adlandırın. Düzenleyici göründüğünde, yeni bir giriş için veri sağlayın. Nameve Greeting olarak ayarlayın. Dosyayı kaydedin.

Visual Studio Code kullanıyorsanız Tim Heuer'in ResX Görüntüleyicisi ve Düzenleyicisi'ni yüklemenizi öneririz. Klasöre CultureExample2.resx boş Pages bir dosya ekleyin. Uzantı, kullanıcı arabiriminde dosyanın yönetimini otomatik olarak devralır. Yeni Kaynak Ekle düğmesini seçin. (anahtar), Greeting (değer) ve Hello, World! (açıklama) için giriş eklemek için None yönergeleri izleyin. Dosyayı kaydedin. Dosyayı kapatıp yeniden açarsanız, kaynağı görebilirsiniz Greeting .

Tim Heuer'in ResX Görüntüleyicisi ve Düzenleyicisi Microsoft'a ait değildir veya microsoft tarafından korunmaz ve herhangi bir Microsoft Desteği Sözleşmesi veya lisansı kapsamında değildir.

Aşağıda tipik bir kaynak dosyası gösterilmektedir. Visual Studio'nun Pages yerleşik kaynak dosyası düzenleyicisi veya kaynak dosyalarını oluşturmak ve düzenlemek için bir uzantıya sahip Visual Studio Code gibi tümleşik bir geliştirme ortamıyla (IDE) yerleşik araçları kullanmamak isterseniz, kaynak dosyalarını uygulamanın klasörüne el ile yerleştirebilirsiniz.

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>

Not

Aşağıdaki kaynak dosyası, klasöre sağ tıklayıp Pages Yeni Öğe> Ekle>seçilerek Visual Studio'ya eklenebilir. Dosyayı CultureExample2.es.resx olarak adlandırın. Düzenleyici göründüğünde, yeni bir giriş için veri sağlayın. Nameve Greeting olarak ayarlayın. Dosyayı kaydedin.

Visual Studio Code kullanıyorsanız Tim Heuer'in ResX Görüntüleyicisi ve Düzenleyicisi'ni yüklemenizi öneririz. Klasöre CultureExample2.resx boş Pages bir dosya ekleyin. Uzantı, kullanıcı arabiriminde dosyanın yönetimini otomatik olarak devralır. Yeni Kaynak Ekle düğmesini seçin. (anahtar), Greeting (değer) ve ¡Hola, Mundo! (açıklama) için giriş eklemek için None yönergeleri izleyin. Dosyayı kaydedin. Dosyayı kapatıp yeniden açarsanız, kaynağı görebilirsiniz Greeting .

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>

Aşağıdaki bileşen ile Greetingyerelleştirilmiş IStringLocalizer<T> dizenin kullanımını gösterir. Razor Aşağıdaki örnekteki işaretleme@Loc["Greeting"], önceki kaynak dosyalarında ayarlanan değere Greeting anahtarlanan dizeyi yerelleştirir.

ad alanını Microsoft.Extensions.Localization uygulamanın _Imports.razor dosyasına ekleyin:

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

İsteğe bağlı olarak, bileşen () içindeki gezintiye CultureExample2NavMenubileşen için NavMenu.razor bir menü öğesi ekleyin.

WebAssembly kültür sağlayıcısı başvuru kaynağı

Çerçevenin yerelleştirmeyi nasıl işlediğini Blazor daha fazla anlamak için ASP.NET Core başvuru kaynağındaki sınıfınaWebAssemblyCultureProvider.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Paylaşılan kaynaklar

Yerelleştirme paylaşılan kaynakları oluşturmak için aşağıdaki yaklaşımı benimseyin.

proje tarafından Microsoft.Extensions.Localization paketine başvurulduğunu onaylayın.

Not

.NET uygulamalarına paket ekleme hakkında yönergeler için, Paket tüketimi iş akışında (NuGet belgeleri)paketleri yüklemek ve yönetmek altındaki makalelere bakın. NuGet.org'da doğru paket sürümlerini onaylayın.
projenin Microsoft.Extensions.Localization dosyasındaki bir giriş aracılığıyla projenin Razor bileşenleri için _Imports ad alanının kullanılabilir olduğunu onaylayın:
```
@using Microsoft.Extensions.Localization
```
Rastgele bir sınıf adıyla işlev dışı bir sınıf oluşturun. Aşağıdaki örnekte:
- Uygulama ad alanını BlazorSample , yerelleştirme varlıkları ise ad alanını BlazorSample.Localization kullanır.
- Kukla sınıfı olarak adlandırılır SharedResource.
- Sınıf dosyası, uygulamanın kökündeki bir Localization klasöre yerleştirilir.
Not

Otomatik olarak oluşturulan bir tasarımcı dosyası kullanmayın (örneğin, SharedResources.Designer.cs). Sahte sınıfın paylaşılan kaynak sınıfı olarak davranması amaçlanır. Tasarımcı dosyasının varlığı ad alanı çakışması ile sonuç alır.

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

public class SharedResource
{
}
```
Derleme Eylemipaylaşılan kaynak dosyalarını oluşturun. Aşağıdaki örnekte:
- Dosyalar, dummy Localization sınıfıSharedResource () ile klasörüne yerleştirilirLocalization/SharedResource.cs.
- Kaynak dosyalarını, sahte sınıfın adıyla eşleşecek şekilde adlandırın. Aşağıdaki örnek dosyalar, varsayılan bir yerelleştirme dosyası ve İspanyolca (es) yerelleştirme için bir dosya içerir.
- Localization/SharedResource.resx
- Localization/SharedResource.es.resx
Uyarı

Bu bölümdeki yaklaşımı takip ederken kaynakları yüklemek için aynı anda ayarlayıp LocalizationOptions.ResourcesPath kullanamazsınız IStringLocalizerFactory.Create .
Bir bileşene eklenen IStringLocalizer<T>Razor bir bileşenin kukla sınıfına başvurmak için, yerelleştirme ad alanı için bir @using yönerge yerleştirin veya yerelleştirme ad alanını sahte sınıf başvurusuna ekleyin. Aşağıdaki örneklerde:
- İlk örnek, bir Localization yönergesi SharedResource ile kukla sınıfı için ad alanını belirtir@using.
- İkinci örnek, sahte sınıfın SharedResource ad alanını açıkça belirtir.
Bir Razor bileşende aşağıdaki yaklaşımlardan birini kullanın:
```
@using Localization
@inject IStringLocalizer<SharedResource> Loc
```
```
@inject IStringLocalizer<Localization.SharedResource> Loc
```

Ek yönergeler için bkz . ASP.NET Core'da genelleştirme ve yerelleştirme.

Geliştirici araçlarında "Algılayıcılar" bölmesini kullanarak konum geçersiz kılma

Google Chrome veya Microsoft Edge geliştirici araçlarındaki Algılayıcılar bölmesini kullanarak konum geçersiz kılmayı kullanırken, geri dönüş dili ön kayıt sonrasında sıfırlanır. Test sırasında Algılayıcılar bölmesini kullanarak dili ayarlamaktan kaçının. Tarayıcının dil ayarlarını kullanarak dili ayarlayın.

Daha fazla bilgi için bkz Blazor . Yerelleştirme InteractiveServer ile çalışmıyor (dotnet/aspnetcore #53707).

Aracılığıyla paylaş

ASP.NET Çekirdek Blazor genelleştirme ve yerelleştirme

Genelleştirme ve yerelleştirme

Globalleştirme

Unicode (ICU) desteği için .NET genelleştirmesi ve Uluslararası Bileşenleri (Blazor WebAssembly)

Sabit genelleştirme

Saat dilimi bilgileri

Tanıtım bileşeni

Üst bilgiden `Accept-Language` kültürü dinamik olarak ayarlama

İstemci tarafı kültürünü statik olarak ayarlama

Sunucu tarafı kültürünü statik olarak ayarlama

İstemci tarafı kültürünü kullanıcı tercihlerine göre dinamik olarak ayarlama

Sunucu tarafı kültürünü kullanıcı tercihlerine göre dinamik olarak ayarlama

Kullanıcı tercihlerine göre kültürü Blazor Web App dinamik olarak ayarlama

Proje güncelleştirmeleri `.Client`

Sunucu projesi güncelleştirmeleri

Etkileşimli Otomatik bileşenler

Localization (Yerelleştirme)

İstemci tarafı yerelleştirme

Sunucu tarafı yerelleştirme

Yerelleştirilmiş kaynaklar örneği

WebAssembly kültür sağlayıcısı başvuru kaynağı

Paylaşılan kaynaklar

Geliştirici araçlarında "Algılayıcılar" bölmesini kullanarak konum geçersiz kılma

Ek kaynaklar

Ek kaynaklar

Aracılığıyla paylaş

ASP.NET Çekirdek Blazor genelleştirme ve yerelleştirme

Genelleştirme ve yerelleştirme

Globalleştirme

Unicode (ICU) desteği için .NET genelleştirmesi ve Uluslararası Bileşenleri (Blazor WebAssembly)

Sabit genelleştirme

Saat dilimi bilgileri

Tanıtım bileşeni

Üst bilgiden Accept-Language kültürü dinamik olarak ayarlama

İstemci tarafı kültürünü statik olarak ayarlama

Sunucu tarafı kültürünü statik olarak ayarlama

İstemci tarafı kültürünü kullanıcı tercihlerine göre dinamik olarak ayarlama

Sunucu tarafı kültürünü kullanıcı tercihlerine göre dinamik olarak ayarlama

Kullanıcı tercihlerine göre kültürü Blazor Web App dinamik olarak ayarlama

Proje güncelleştirmeleri .Client

Sunucu projesi güncelleştirmeleri

Etkileşimli Otomatik bileşenler

Localization (Yerelleştirme)

İstemci tarafı yerelleştirme

Sunucu tarafı yerelleştirme

Yerelleştirilmiş kaynaklar örneği

WebAssembly kültür sağlayıcısı başvuru kaynağı

Paylaşılan kaynaklar

Geliştirici araçlarında "Algılayıcılar" bölmesini kullanarak konum geçersiz kılma

Ek kaynaklar

Ek kaynaklar

Üst bilgiden `Accept-Language` kültürü dinamik olarak ayarlama

Proje güncelleştirmeleri `.Client`