ASP.NET commutació multilingüe amb funcions integrades MVC

Pàgina actualitzada :
Data de creació de la pàgina :

Medi ambient

Visual Studio
  • Visual Studio 2019
ASP.NET Core
  • 3,0
  • 3,1

Al principi

ASP.NET utilitzar les característiques de localització del Core MVC per canviar entre diversos idiomes per mostrar-los.

Crear un fitxer de recurs per al text traduït

Creeu una carpeta per emmagatzemar els fitxers de recursos (RESX) que gestionen el text. La ubicació és a qualsevol lloc, però deixar-ho directament sota de la ruta. Aquest camí també afecta els ajustaments posteriors.

Feu clic amb el botó dret del projecte i seleccioneu Afegeix o nova carpeta.

image

Deixeu els recursos de nom de la carpeta. També podeu definir arbitràriament aquest nom de carpeta, però podeu especificar aquest nom de carpeta en la configuració posterior.

image

A continuació, creeu un fitxer de recursos per introduir text per a cada idioma.

Feu clic amb el botó dret a la carpeta recursos i seleccioneu Afegeix o nou element.

image

Seleccioneu el fitxer de recursos (. RESX). El nom del fitxer pot ser arbitrari, però ha de coincidir amb el nom que especifiqueu més endavant. Per ara, diguem SharedResource. RESX.

image

Després de crear el fitxer. RESX, feu doble clic per obrir-lo i escriviu el nom que identifiqui el text i el text que voleu que es mostri. El fitxer SharedResource. RESX és el fitxer que s'utilitzarà si l'idioma no existeix. Ho vaig entrar en japonès aquí. Si voleu que altres idiomes, com ara l'anglès, siguin el predeterminat, introduïu-los en aquest idioma.

Aquí entrem en Hola i adéu com a mostres. Tingueu en compte que distingeix entre majúscules i minúscules.

image

Continueu per crear fitxers de recursos per a altres idiomes. Per identificar l'idioma, especifiqueu el nom del fitxer, com ara Sharedresource. ≪ codi de cultura >. RESX. Podeu especificar una o ambdues combinacions d'ISO 639 i ISO 3166 per al codi de cultura. El codi de suport està subjecte a canvis de tant en tant, de manera que la classe de Culturreinfo al lloc de Microsoft Si us plau, referiu-vos a la pàgina.

Aquesta vegada, en (anglès) i es (espanyol) es preparen. El japonès no està disponible perquè és el valor per defecte.

image

Introdueixi el text traduït amb les claus en el mateix estat per a cada arxiu.

image

image

A continuació, tindreu un fitxer que defineixi només les classes. Creeu-lo amb el mateix nom que el fitxer de recursos que heu creat.

De fet, no m'importa el que el nom de l'arxiu de codi en si és perquè només ha de coincidir amb el nom de la classe dins, però deixar-lo igual de manera que sigui fàcil d'entendre. No importa on voleu escriure el codi.

image

Fer de l'espai de noms l'arrel del projecte i crear una classe buida.

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

Fixar cada programa

Startup.cs

Destret Startup.cs. Descriviu el mètode Configurreservices de la manera següent:

Serveis. AddMvc (). Si hi ha un mètode Addviewlocalització, el text traduït tant pel costat de la vista com pel costat del controlador Estic segur que puc aconseguir-ho, però Com també en els serveis de la web oficial. No hi ha cap problema amb cridar el mètode d'Addlocalització junts.

Opcions. ResourcesPath especifica el camí de la carpeta on es troba el fitxer RESX. Si s'especifiquen tots dos, els serveis. AddMvc (). El mètode Addviewlocalització té prioritat.

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

A continuació, modifiqueu el mètode de configuració per a Startup.cs. Si només voleu llegir el fitxer de recursos, no ho necessiteu. Codi que es requereix per permetre a l'usuari especificar un idioma arbitràriament.

Estem utilitzant les característiques construïdes en ASP.NET Core MVC com a estàndard. El codi següent descriu la "cadena de consulta", "cookie" i "encapçalament HTTP d'acceptació de l'idioma" en funció de l'entorn de l'usuari. Podeu canviar entre les llengües de visualització en una d'elles. Us veurem més endavant com comprovar l'operació real.

El llenguatge commutable s'especifica aquí a l'array (supportedCultures). He especificat ja com a idioma predeterminat, però no he creat el fitxer ja en aquesta hora. SharedResource. RESX s'utilitza si es especifica un idioma diferent en en, es.

Podeu separar la IU dels idiomes que admeteu, però no hi ha gaire benefici per separar-lo. Teniu la mateixa llengua.

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 fitxer. Per obtenir una llengua localitzada en el costat del controlador, iStringLocalizer es rep en el constructor. El SharedResource ha de tenir el mateix nom que la classe que heu creat abans. El text es passa a l'importador del localitzador rebut, passant la cadena de claus introduïda al fitxer de recursos. es poden recuperar. La llengua del text es determina a partir de la petició de cultura.

Per cert, a més de IStringLocalizer, també hi ha un IHtmlLocalizer que pot obtenir HTML com ho és.

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

  // 省略
}

Views \ _ViewImports. cshtml

Visualitzacions \ _ViewImports fitxer. cshtml . Per utilitzar un localitzador en el costat de la vista , heu d'injectar IHtmlLocalizer. Si ho descriviu de la manera següent, ara és correcte. També, SharedResource ha de tenir el mateix nom que el fitxer de recursos i la classe que heu creat abans.

IHtmlLocalizer és en l'espai de noms de Microsoft. AspNetCore. MVC. Localització, així defineixo això com utilitzar.

Si només voleu utilitzar el localitzador en un moment determinat, podeu incloure el codi següent en un fitxer de visualització separada. Si l'escriu en un arxiu de _ViewImports. cshtml, el podrà automàticament utilitzar en tots els arxius de vista.

@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 arxiu. El text obtingut en el costat del controlador i el text obtingut directament en el costat de la vista es mostren respectivament. El localitzador lateral de visualització també obté el text especificant una cadena de claus per a l'indexer.

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

Comprova l'operació

Cadena de consulta

Podeu canviar l'idioma de visualització especificant un codi de cultura a la cadena de consulta de l'adreça URL. El format és ? cultura = < codi de cultura >. Si vol separar-lo de la interfície d'usuari, serà ? cultura = codi de cultura < > & UI-Culture = < codi cultural >.

Si no especifiqueu res: Si no s'especifica, es fa servir SharedResource. RESX. (De fet, un altre judici s'ha aplicat...)

image

El patró especificat per a ? Culture = en. La llengua de visualització és l'anglès.

image

S'ha especificat el patró ? Culture = es. La llengua de visualització és l'espanyola.

image

El patró especificat ? cultura = ja. Originalment, s'utilitza el fitxer SharedResource. ja. RESX. S'utilitza SharedResource. RESX perquè no existeix.

image

Proveu d'especificar un idioma que no existeixi. S'utilitza SharedResource. RESX perquè no hi ha cap fitxer corresponent aquí.

image

Galetes

Les galetes poden canviar l'idioma de visualització. Normalment es publiquen des del costat del servidor, però aquesta vegada intentaré registrar les galetes directament a la funció del navegador.

Com que cada navegador web té una eina de desenvolupament, l'utilitzeu per registrar les galetes. A la figura següent, podeu prémer F12 in Edge per mostrar les eines per a desenvolupadors.

El nom de la galeta corresponent és . AspNetCore. la cultura i el valor que especifica la llengua és Introduïu en forma de codi de cultura c = < > | UIC = codi de cultura < >. Per a les galetes, també heu d'introduir el codi de la IU. Una vegada que hagi registrat la seva galeta, Refresqui la seva pàgina de navegador web per refrescar-lo. S'envia una galeta al servidor perquè el servidor recuperi l'idioma especificat.

A la figura següent, podeu introduir c = en | UIC = en per a mostrar l'anglès.

image

tipus c = es | UIC = es per mostrar l'espanyol.

image

Encapçalament HTTP d'acceptació d'idiomes

La capçalera d'HTTP Accept-Language comprova la informació de capçalera sol·licitada des del navegador web al servidor. És l'habilitat per canviar llengües consegüentment.

Vostè pot enviar qualsevol idioma d'acceptació en la configuració del seu navegador web, però per defecte pot coincidir amb la configuració d'idioma del sistema operatiu. Ara s'envia l'idioma d'acceptació. (Sigui o no s'enviï de fet depèn de l'OS i navegador web.) L'idioma s'inicialitza en el navegador web per a l'idioma de l'OS, però pot ser que sigui correcte.)

Així, per exemple, com es mostra a la figura següent, podeu obrir la pàgina al navegador web del sistema operatiu en anglès i enviar la informació, de manera que pugueu Es selecciona SharedResource. en. RESX per mostrar l'anglès.

image

Si intenteu especificar un idioma que no existeix a la cadena de consulta, hauríeu d'utilitzar SharedResource. RESX originalment. L'idioma d'acceptació Mostra anglès perquè en existeix.

image

Si ja s'especifica a la cadena de consulta, la cadena de consulta té prioritat i es Mostra el japonès.

image

Resum

Aquí he intentat implementar el canvi multilingüe de la manera més fàcil. Per canviar d'idioma perquè coincideixi amb l'entorn de l'usuari, utilitzeu la capçalera de l'HTTP Accept-Language com a llengua de visualització per defecte. Si l'usuari escull qualsevol idioma, és una bona idea afegir cookies o afegir (o entrar directament) de la cadena de consulta.