ASP.NET สลับหลายภาษาด้วยฟังก์ชันในตัวของ MVC หลัก

ปรับปรุงหน้า :
วันที่สร้างเพจ :

สภาพ แวด ล้อม

สตูดิโอภาพ
  • สตูดิโอภาพ 2019
แกนASP.NET
  • 3.0
  • 3.1

ในตอนแรก

ASP.NETใช้คุณลักษณะการแปลของ MVC หลักเพื่อสลับระหว่างหลายภาษาเพื่อแสดง

สร้างแฟ้มทรัพยากรสําหรับข้อความที่แปล

สร้างโฟลเดอร์เพื่อเก็บแฟ้มทรัพยากร (Resx) ที่จัดการข้อความ สถานที่อยู่ที่ไหนก็ได้ แต่ปล่อยให้มันอยู่ด้านล่างเส้นทาง เส้นทางนี้ยังมีผลต่อการตั้งค่าในภายหลัง

คลิกขวาที่โครงการ และเลือก

image

ปล่อยให้ทรัพยากรชื่อโฟลเดอร์ นอกจากนี้คุณยังสามารถตั้งชื่อโฟลเดอร์นี้โดยพลการ แต่คุณสามารถระบุชื่อโฟลเดอร์นี้ในการตั้งค่าในภายหลัง

image

จากนั้นสร้างไฟล์ทรัพยากรเพื่อป้อนข้อความสําหรับแต่ละภาษา

คลิกขวาที่โฟลเดอร์ทรัพยากรและเลือกเพิ่มหรือรายการใหม่

image

เลือกแฟ้มทรัพยากร (.resx) ชื่อแฟ้มสามารถถูกกําหนดได้ แต่ต้องตรงกับชื่อที่คุณระบุในภายหลัง สําหรับตอนนี้ สมมติว่า SharedResource.resx

image

หลังจากที่คุณสร้างแฟ้ม .resx แล้ว ให้ดับเบิลคลิกเพื่อเปิดแล้วพิมพ์ชื่อที่ระบุข้อความและข้อความที่คุณต้องการแสดงจริง แฟ้ม SharedResource.resx คือแฟ้มที่จะใช้ถ้าไม่มีภาษา ฉันป้อนมันในภาษาญี่ปุ่นที่นี่ ถ้าคุณต้องการให้ภาษาอื่นๆ เช่น ภาษาอังกฤษเป็นค่าเริ่มต้น ให้ใส่ภาษาเหล่านั้นลงในภาษานั้น

ที่นี่เราป้อนสวัสดีและลาเป็นตัวอย่าง โปรดสังเกตว่า เป็นกรณีสําคัญ

image

สร้างแฟ้มทรัพยากรสําหรับภาษาอื่นต่อไป เมื่อต้องการระบุภาษา ให้ระบุชื่อแฟ้ม เช่นSharedResource<รหัสวัฒนธรรม>.resx คุณสามารถระบุชุดของ ISO 639 และ ISO 3166 สําหรับรหัสวัฒนธรรมหนึ่งหรือทั้งสองชุด รหัสสนับสนุนอาจมีการเปลี่ยนแปลงเป็นครั้งคราวดังนั้นCultureInfo ชั้นบนไซต์ Microsoft โปรดดูหน้า

เวลานี้ en (ภาษาอังกฤษ) และ es (สเปน) จะเตรียม ภาษาญี่ปุ่นไม่พร้อมใช้งานเนื่องจากเป็นค่าเริ่มต้น

image

ป้อนข้อความที่แปลด้วยคีย์ในสถานะเดียวกันสําหรับแต่ละไฟล์

image

image

ถัดไปคุณจะมีไฟล์ที่กําหนดเฉพาะชั้นเรียน คุณสร้างสิ่งนี้ด้วยชื่อเดียวกันกับแฟ้มทรัพยากรที่คุณเพิ่งสร้างขึ้น

ในความเป็นจริง, ฉันไม่สนใจสิ่งที่ชื่อของไฟล์รหัสตัวเองเป็นเพราะคุณจะต้องตรงกับชื่อของชั้นภายใน, แต่ปล่อยให้มันเหมือนกันเพื่อที่จะเข้าใจง่าย. มันไม่สําคัญว่าคุณต้องการที่จะเขียนรหัส

image

ทําให้ namespace รากของโครงการ และสร้างคลาสว่าง

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

แก้ไขแต่ละโปรแกรม

Startup.cs

แก้ไขStartup.cs อธิบายวิธีการConfigureServicesดังต่อไปนี้:

บริการ 0.000000000000000000 ถ้ามีวิธีการ AddViewLocalization ข้อความแปล โดยทั้งสองด้านมุมมองและด้านตัวควบคุมเป็น ฉันแน่ใจว่าฉันจะได้รับมัน แต่ เช่นเดียวกับการให้บริการเว็บไซต์อย่างเป็นทางการ ไม่มีปัญหากับการเรียกวิธีการเพิ่มการปรับให้เข้ากัน

ตัวเลือก ระบุเส้นทางของโฟลเดอร์ที่เป็นที่ตั้งของแฟ้ม Resx หากระบุทั้งสองบริการ 0.000000000000000000 กระบวนการAddViewLocalizationวิธีการมีความสําคัญ

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

จากนั้นปรับเปลี่ยนวิธีการกําหนดค่าสําหรับStartup.cs ถ้าคุณเพียงต้องการอ่านแฟ้มทรัพยากรคุณไม่จําเป็นต้องใช้ รหัสที่จําเป็นต้องอนุญาตให้ผู้ใช้ระบุภาษาโดยพลการ

เรากําลังใช้คุณสมบัติที่สร้างขึ้นใน ASP.NET MVC หลักเป็นมาตรฐาน. รหัสต่อไปนี้อธิบาย "สตริงแบบสอบถาม", "คุกกี้" และ "ยอมรับภาษา HTTP หัวข้อ" ขึ้นอยู่กับสภาพแวดล้อมของผู้ใช้ คุณสามารถสลับระหว่างภาษาที่แสดงเป็นภาษาใดภาษาหนึ่งได้ เราจะเห็นคุณในภายหลังวิธีการตรวจสอบการดําเนินงานที่เกิดขึ้นจริง

ภาษาที่สลับได้มีการระบุที่นี่ในอาร์เรย์ (สนับสนุนCultures) ฉันระบุ ja เป็นภาษาเริ่มต้น แต่ฉันไม่ได้สร้างไฟล์ ja ในขณะนี้ SharedResource.resx ถูกใช้ถ้าภาษาอื่นที่ไม่ใช่ en มีการระบุ es

คุณสามารถแยก UI จากภาษาที่คุณสนับสนุน แต่ไม่มีประโยชน์มากที่จะแยกออก คุณมีภาษาเดียวกัน

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

  // 省略
}

คอนโทรลเลอร์\HomeController.cs

แฟ้มตัวควบคุม\แฟ้มควบคุม เมื่อต้องการรับภาษาท้องถิ่นบนด้านตัวควบคุม iStringLocalizerจะได้รับในคอนสตรัคเตอร์ SharedResource ต้องมีชื่อเดียวกันกับคลาสที่คุณสร้างไว้ก่อนหน้านี้ ข้อความจะถูกส่งผ่านไปยังตัวนําเข้าของเครื่องแปลที่ได้รับโดยผ่านสตริงคีย์ที่ป้อนในไฟล์ทรัพยากร สามารถดึง ภาษาของข้อความจะถูกกําหนดขึ้นอยู่กับวัฒนธรรมที่ถูกร้องขอ

โดยวิธีการที่นอกเหนือไปจาก IStringLocalizer, นอกจากนี้ยังมี IHtmlLocalizer ที่จะได้รับ HTML เป็นมันเป็น

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

  // 省略
}

มุมมอง\_ViewImports.cshtml

มุมมอง\_ViewImports.cshtml เมื่อต้องการใช้โลคัลไลเซอร์บนด้านมุมมอง ถ้าคุณอธิบายเป็นดังนี้สําหรับตอนนี้ก็ตกลง นอกจากนี้ SharedResource ต้องมีชื่อเดียวกันกับแฟ้มทรัพยากรและคลาสที่คุณสร้างไว้ก่อนหน้านี้

IHtmlLocalizer อยู่ในพื้นที่ชื่อการแปลของ Microsoft.AspNetCore.Mvc.Mvc., ดังนั้นฉันจะกําหนดนี้เป็นใช้.

ถ้าคุณต้องการใช้โลคัลเซอร์ณจุดหนึ่ง ถ้าคุณเขียนในไฟล์ _ViewImports.cshtml, คุณจะสามารถใช้ในไฟล์มุมมองทั้งหมด.

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

มุมมอง\หน้าแรก\ดัชนี.cshtml

แฟ้มมุมมอง\หน้าแรก\ดัชนี.cshtml ข้อความที่ได้รับบนด้านตัวควบคุมและข้อความที่ได้รับโดยตรงในด้านมุมมองจะแสดงขึ้นตามลําดับ โลคัลไลเซอร์ด้านมุมมองยังได้รับข้อความ ด้วยการระบุสตริงคีย์สําหรับตัวสร้างดัชนี

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

ตรวจสอบการดําเนินงาน

สตริงแบบสอบถาม

คุณสามารถสลับภาษาที่แสดงโดยการระบุรหัส culture ในสตริงการสอบถามของ URL รูปแบบคือ?culture=<รหัสวัฒนธรรม> ถ้าคุณต้องการแยกจาก UI จะเป็น?culture=<รหัสวัฒนธรรม>&ui-วัฒนธรรม =<รหัสวัฒนธรรม>

หากคุณไม่ได้ระบุอะไร: ถ้าไม่ได้ระบุ SharedResource.resx ถูกใช้ (ในความเป็นจริง, การพิพากษาอีกได้ถูกนํามาใช้ ...)

image

รูปแบบที่ระบุสําหรับ?วัฒนธรรม=en ภาษาที่แสดงเป็นภาษาอังกฤษ

image

รูปแบบที่ระบุสําหรับ?culture=es ภาษาที่แสดงเป็นภาษาสเปน

image

รูปแบบที่ระบุสําหรับ?วัฒนธรรม=ja มีใช้แฟ้มที่ใช้ร่วมกันResource.ja.resx ใช้ SharedResource.resx เนื่องจากไม่มีอยู่

image

พยายามระบุภาษาที่ไม่มีอยู่ ใช้ SharedResource.resx เนื่องจากไม่มีแฟ้มที่สอดคล้องกันที่นี่

image

คุกกี้

คุกกี้สามารถเปลี่ยนภาษาที่แสดงได้ โดยปกติการเผยแพร่จากฝั่งเซิร์ฟเวอร์ แต่คราวนี้ผมจะพยายามลงทะเบียนคุกกี้โดยตรงในการทํางานของเบราว์เซอร์

เนื่องจากแต่ละเว็บเบราว์เซอร์มีเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ คุณจึงใช้เครื่องมือดังกล่าวเพื่อลงทะเบียนคุกกี้ ในรูปด้านล่างคุณสามารถกด F12 บนขอบเพื่อแสดงเครื่องมือสําหรับนักพัฒนา

ชื่อของคุกกี้ที่เกี่ยวข้องคือ AspNetCore.Cultureและค่าที่ระบุภาษาเป็น ป้อนในฟอร์มของ c=<รหัสวัฒนธรรม>|uic=<รหัสวัฒนธรรม>.======<culture code สําหรับคุกกี้ คุณต้องป้อนรหัส UI ด้วย เมื่อคุณลงทะเบียนคุกกี้แล้ว ให้รีเฟรชหน้าเว็บของเว็บเบราว์เซอร์เพื่อรีเฟรช คุกกี้จะถูกส่งไปยังเซิร์ฟเวอร์เพื่อให้เซิร์ฟเวอร์จะเรียกข้อมูลภาษาที่ระบุ

ในรูปด้านล่าง คุณสามารถป้อนc=en|uic=enเพื่อแสดงภาษาอังกฤษ

image

พิมพ์c=es|uic=esเพื่อแสดงภาษาสเปน

image

ยอมรับ-ส่วนหัว HTTP ภาษา

ยอมรับภาษา HTTP หัวข้อตรวจสอบข้อมูลส่วนหัวที่ร้องขอจากเว็บเบราว์เซอร์ไปยังเซิร์ฟเวอร์ มันเป็นความสามารถในการสลับภาษาตาม

คุณสามารถส่งภาษาที่ยอมรับได้ในการตั้งค่าเว็บเบราว์เซอร์ของคุณ แต่ตามค่าเริ่มต้นคุณสามารถจับคู่กับการตั้งค่าภาษาของระบบปฏิบัติการได้ ขณะนี้ส่งการยอมรับภาษาแล้ว (หรือไม่ส่งจริงขึ้นอยู่กับระบบปฏิบัติการและเว็บเบราว์เซอร์.) ภาษาจะถูกเตรียมใช้งานในเว็บเบราว์เซอร์สําหรับภาษาของระบบปฏิบัติการ แต่อาจถูกต้อง)

ตัวอย่างเช่นดังแสดงในรูปด้านล่างคุณสามารถเปิดหน้าในเว็บเบราว์เซอร์ของภาษาอังกฤษ OS และส่งข้อมูลเพื่อให้คุณสามารถโดยอัตโนมัติ เลือก SharedResource.en.resx เพื่อแสดงภาษาอังกฤษ

image

ถ้าคุณพยายามที่จะระบุภาษาที่ไม่มีอยู่ในสายอักขระแบบสอบถาม คุณควรใช้SharedResource.resxเดิม ยอมรับภาษาแสดงภาษาอังกฤษเพราะมี en

image

ถ้า ja ถูกระบุในสตริงแบบสอบถาม

image

สรุป

ที่นี่ฉันพยายามที่จะใช้สลับหลายภาษาในวิธีที่ง่ายที่สุด เมื่อต้องการสลับภาษาให้ตรงกับสภาพแวดล้อมของผู้ใช้ ให้ใช้ส่วนหัว HTTP ยอมรับภาษาเป็นภาษาเริ่มต้นที่แสดง หากผู้ใช้เลือกภาษาใด ๆ ก็เป็นความคิดที่ดีที่จะเพิ่มคุกกี้หรือเพิ่ม (หรือป้อนโดยตรง) ของสตริงแบบสอบถาม