ASP.NET peralihan multibahasa dengan fitur bawaan MVC inti

Halaman Diperbarui :
Tanggal pembuatan halaman :

Lingkungan

Studio visual
  • Visual Studio 2019
ASP.NET inti
  • 3,0
  • 3,1

Pada mulanya

ASP.NET menggunakan inti MVC lokalisasi fitur untuk beralih di antara beberapa bahasa untuk menampilkan mereka.

Membuat file sumber daya untuk teks yang diterjemahkan

Buat folder untuk menyimpan file sumber daya (Resx) yang mengelola teks. Lokasi adalah di mana saja, tapi tinggalkan langsung di bawah rute. Jalur ini juga mempengaruhi pengaturan nanti.

Klik kanan proyek dan pilih Tambah atau folder baru.

image

Tinggalkan sumber nama folder. Anda juga dapat mengatur nama folder ini sewenang-wenang, tetapi Anda dapat menentukan nama folder ini di pengaturan nanti.

image

Kemudian membuat file sumber daya untuk memasukkan teks untuk setiap bahasa.

Klik kanan folder sumber dan pilih Tambah atau item baru.

image

Pilih berkas sumber daya (. resx). Nama file dapat sewenang-wenang, tetapi harus sesuai dengan nama yang Anda tentukan nanti. Untuk saat ini, katakanlah SharedResource. resx.

image

Setelah Anda membuat berkas. resx, klik dua kali untuk membukanya, dan kemudian ketik nama yang menunjukkan teks dan teks yang ingin Anda Tampilkan sebenarnya. Berkas SharedResource. resx adalah berkas yang akan digunakan jika bahasa tidak ada. Saya masuk dalam bahasa Jepang di sini. Jika Anda ingin bahasa lain, seperti bahasa Inggris, untuk menjadi default, masukkan dalam bahasa tersebut.

Di sini kita masukkan Hello dan Goodbye sebagai sample. Perhatikan bahwa ini peka huruf besar/kecil.

image

Lanjutkan untuk membuat file sumber daya untuk bahasa lain. Untuk mengidentifikasi bahasa, Tentukan nama file, seperti Sharedresource. ≪ kultur kode >. resx. Anda dapat menentukan salah satu atau kedua kombinasi ISO 639 dan ISO 3166 untuk kode budaya. Kode dukungan dapat berubah dari waktu ke waktu, sehingga kelas CultureInfo di situs Microsoft Silakan merujuk ke halaman.

Kali ini, en (bahasa Inggris) dan es (Spanyol) disiapkan. Jepang tidak tersedia karena itu adalah default.

image

Masukkan teks terjemahan dengan kunci dalam keadaan yang sama untuk setiap berkas.

image

image

Selanjutnya, Anda akan memiliki file yang hanya mendefinisikan kelas. Anda membuat ini dengan nama yang sama seperti file sumber daya yang baru saja Anda buat.

Bahkan, saya tidak peduli apa nama kode file itu sendiri adalah karena Anda hanya perlu mencocokkan nama kelas di dalam, tapi meninggalkannya sama sehingga mudah dimengerti. Tidak peduli di mana Anda ingin menulis kode.

image

Membuat namespace akar proyek dan membuat kelas kosong.

namespace LocalizationText
{
  // クラス名は作成した .resx のファイル名と同じにする必要がある
  public class SharedResource { }
}

Perbaiki setiap program

Startup.cs

Perbaiki startup.cs. Menjelaskan metode ConfigureServices sebagai berikut:

Layanan. AddMvc (). Jika ada metode AddViewLocalization, teks yang diterjemahkan oleh kedua sisi tampilan dan sisi pengontrol Aku yakin aku bisa mendapatkannya, tapi Seperti juga pada layanan website resmi. Tidak ada masalah dengan memanggil metode AddLocalization bersama-sama.

Pilihan. ResourcesPath menentukan jalur dari folder mana file Resx terletak. Jika keduanya ditentukan, Layanan. AddMvc (). Metode AddViewLocalization diutamakan.

public void ConfigureServices(IServiceCollection services)
{
  services.AddControllersWithViews();

  // Resx ファイルのあるフォルダを指定する。
  // コントローラー側でしか使用しないならこちらでもよい。AddViewLocalization を使用するならこちらはなくても動作する。
  //services.AddLocalization(options => options.ResourcesPath = "Resources");

  services.AddMvc()
    // ローカライズに必要。Resx ファイルのフォルダパスを指定
    .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix, opts => { opts.ResourcesPath = "Resources"; });
}

Kemudian mengubah metode konfigurasi untuk startup.cs. Jika Anda hanya ingin membaca file sumber daya, Anda tidak membutuhkannya. Kode yang diperlukan untuk memungkinkan pengguna untuk menentukan bahasa sewenang-wenang.

Kami menggunakan fitur built in ASP.NET Core MVC sebagai standar. Kode berikut menjelaskan "string kueri", "cookie", dan "Terima-bahasa HTTP header" tergantung pada lingkungan pengguna. Anda dapat beralih di antara bahasa tampilan di salah satu dari mereka. Kami akan melihat Anda nanti bagaimana untuk memeriksa operasi yang sebenarnya.

Bahasa switchable ditentukan di sini dalam array (supportedCultures). Saya menetapkan Ja sebagai bahasa default, tapi saya belum membuat file Ja kali ini. SharedResource. resx digunakan jika bahasa selain en, es ditentukan.

Anda dapat memisahkan UI dari bahasa yang Anda dukung, tetapi tidak ada banyak manfaat untuk memisahkannya. Anda memiliki bahasa yang sama.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  if (env.IsDevelopment())
  {
    // 省略
  }

  // 標準の機能で切り替えたい言語を定義します。
  var supportedCultures = new[]
  {
    new CultureInfo("ja"),
    new CultureInfo("en"),
    new CultureInfo("es"),
  };

  // 標準の言語切り替え機能を有効にします。対応しているのは「クエリ文字列」「Cookie」「Accept-Language HTTP ヘッダー」です。
  app.UseRequestLocalization(new RequestLocalizationOptions
  {
    DefaultRequestCulture = new RequestCulture("ja"),
    SupportedCultures = supportedCultures,
    SupportedUICultures = supportedCultures
  });

  app.UseHttpsRedirection();
  app.UseStaticFiles();

  // 省略
}

Controllers\HomeController.cs

Controllers\homecontroller.CS file. Untuk mendapatkan bahasa lokal di sisi controller, iStringLocalizer diterima di konstruktor. SharedResource harus memiliki nama yang sama dengan kelas yang Anda buat sebelumnya. Teks dilewatkan ke importir dari Localizer diterima dengan melewatkan string kunci yang dimasukkan dalam file sumber daya. dapat diambil. Bahasa teks ditentukan berdasarkan budaya yang diminta.

Omong-omong, selain IStringLocalizer, ada juga IHtmlLocalizer yang bisa mendapatkan HTML seperti itu.

public class HomeController : Controller
{
  private readonly ILogger<HomeController> _logger;
  private readonly IStringLocalizer<SharedResource> _localizer;

  // DI でローカライザーを取得します。
  public HomeController(ILogger<HomeController> logger, IStringLocalizer<SharedResource> localizer)
  {
    _logger = logger;
    _localizer = localizer;
  }

  public IActionResult Index()
  {
    // ローカライザーを使用して設定されている言語のリソースファイルからテキストを取得します。
    ViewData["Message"] = _localizer["Goodbye"];

    return View();
  }

  // 省略
}

Dilihat \ _ViewImports. cshtml

Views \ _ViewImports. cshtml file. Untuk menggunakan Localizer pada sisi tampilan, Anda harus menyuntikkan IHtmlLocalizer. Jika Anda menggambarkannya sebagai berikut untuk saat ini, itu adalah OK. Selain itu, SharedResource harus memiliki nama yang sama dengan file sumber daya dan kelas yang Anda buat sebelumnya.

IHtmlLocalizer berada di ruang nama Microsoft. AspNetCore. MVC. localization, jadi saya akan menentukan ini sebagai menggunakan.

Jika Anda hanya ingin menggunakan Localizer pada titik tertentu, Anda dapat menyertakan kode berikut dalam file tampilan terpisah. Jika Anda menulisnya dalam file _ViewImports. cshtml, Anda akan secara otomatis dapat menggunakannya di semua file tampilan.

@using LocalizationText
@using LocalizationText.Models
@using Microsoft.AspNetCore.Mvc.Localization
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@* ビュー側でローカライザーを使用できるように定義します *@
@inject IHtmlLocalizer<SharedResource> Localizer

Views\Home\Index.cshtml

Views\home\index.cshtml file. Teks yang diperoleh pada sisi pengontrol dan teks yang diperoleh secara langsung pada sisi tampilan ditampilkan masing-masing. Tampilan-sisi Localizer juga mendapatkan teks dengan menentukan string kunci untuk pengindeks.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* ローカライザーから取得したテキストを表示します。 *@
<p>@Localizer["Hello"]</p>
<p>@ViewData["Message"]</p>

Periksa operasi

String kueri

Anda dapat mengganti bahasa tampilan dengan menentukan kode budaya dalam string kueri URL. Formatnya ? Culture = < kode budaya >. Jika Anda ingin memisahkan dari UI, itu akan ? budaya = < budaya kode > & UI-budaya = < kode budaya >.

Jika Anda tidak menentukan apa-apa: Jika tidak ditentukan, SharedResource. resx digunakan. (Pada kenyataannya, penilaian lain telah diterapkan...)

image

Pola yang ditentukan untuk ? Culture = en. Bahasa tampilan adalah bahasa Inggris.

image

Pola yang ditentukan untuk ? Culture = es. Bahasa tampilan adalah bahasa Spanyol.

image

Pola yang ditentukan untuk ? Culture = Ja. Awalnya, file SharedResource. ja. resx digunakan. SharedResource. resx digunakan karena tidak ada.

image

Cobalah untuk menentukan bahasa yang tidak ada. SharedResource. resx digunakan karena tidak ada file yang sesuai di sini.

image

Cookie

Kuki dapat mengalihkan bahasa tampilan. Biasanya diterbitkan dari sisi server, tapi kali ini saya akan mencoba untuk mendaftarkan cookie secara langsung dalam fungsi browser.

Karena setiap browser web memiliki alat pengembang, Anda menggunakannya untuk mendaftarkan cookie. Pada gambar di bawah ini, Anda dapat menekan F12 on Edge untuk menampilkan alat pengembang.

Nama cookie yang bersangkutan adalah . AspNetCore. Culture, dan nilai yang menentukan bahasa Masukkan dalam bentuk c = < kode budaya > | UIC = < kode kultur >. Untuk cookies, Anda juga harus memasukkan kode UI. Setelah Anda mendaftarkan cookie Anda, Segarkan halaman browser web Anda untuk me-refresh-nya. Cookie dikirim ke server sehingga server akan mengambil bahasa yang ditentukan.

Pada gambar di bawah ini, Anda dapat memasukkan c = en | UIC = en untuk menampilkan bahasa Inggris.

image

ketik c = es | UIC = es untuk menampilkan bahasa Spanyol.

image

Header HTTP terima-bahasa

Header HTTP terima-bahasa memeriksa informasi header yang diminta dari web browser ke server. Ini adalah kemampuan untuk beralih bahasa yang sesuai.

Anda dapat mengirim setiap Accept-bahasa di pengaturan browser web Anda, tetapi secara default Anda dapat mencocokkan pengaturan bahasa OS. Terima-bahasa sekarang dikirim. (Apakah itu sebenarnya dikirim tergantung pada OS dan web browser.) Bahasa diinisialisasi dalam browser web untuk bahasa OS, tetapi mungkin benar.)

Jadi, misalnya, seperti yang ditunjukkan pada gambar di bawah ini, Anda dapat membuka halaman di browser web OS bahasa Inggris dan mengirim informasi, sehingga Anda dapat secara otomatis SharedResource. en. resx dipilih untuk menampilkan bahasa Inggris.

image

Jika Anda mencoba untuk menentukan bahasa yang tidak ada dalam string kueri, Anda harus awalnya menggunakan SharedResource. resx. Terima-bahasa menampilkan bahasa Inggris karena en ada.

image

Jika Ja ditentukan dalam string kueri, string kueri diutamakan dan Jepang ditampilkan.

image

Ringkasan

Di sini saya mencoba untuk menerapkan peralihan multibahasa dengan cara termudah. Untuk beralih bahasa agar sesuai dengan lingkungan pengguna, gunakan header HTTP terima-bahasa sebagai bahasa tampilan default. Jika pengguna memilih bahasa apapun, itu adalah ide yang baik untuk menambahkan cookies atau menambahkan (atau masukkan langsung) dari string query.