ASP.NET核心剃刀页面的本地化 - 今天福彩字谜总汇

这是一系列探索本地化的一系列文章中的第一个 ASP.NET核心剃刀页面应用程序。这篇文章会看看 准备内容本地化的站点所需的配置,在其他 单词,全球化网站。未来的文章将涵盖创建本地化 内容以及如何呈现它。

ASP.NET核心全球化概述

全球化是准备申请以满足不同的申请 基于用户偏好的语言。本地化是调整网站的过程 不同国家,地区或今天福彩字谜总汇的内容。起点 对于Web应用程序的全球化正在能够确定每个的语言或今天福彩字谜总汇 要求。在此之后,需要一种机制来选择基于的内容 the current request culture. In this article, I look at the role that the CultureInfo class plays in localisation, and how to implement a view 组件使用户能够为请求选择他们的首选今天福彩字谜总汇。

以下步骤将基本本地化添加到剃刀页面应用程序,该应用程序是从标准的ASP.NET Core 3.0 Web应用程序模板生成的,没有配置身份验证。 我打电话给我的应用程序“本地化”。您可能想要以不同的方式命名。如果你这样做,请小心命名空间 如果要从本文中复制和粘贴代码。

  1. 首先打开 startup.cs. file and adding the following using directives:

    using System.Globalization;
    using Microsoft.AspNetCore.本土化;
    using Microsoft.Extensions.Options;
  2. Localisation is an opt-in feature. It is not enabled by default. Amend the ConfigureServices method to include AddLocalization, which makes the various supporting localisation services available to the dependency injection system. Then add the code to configure RequestLocalizationOptions 适用于申请。

    services.Configure<RequestLocalizationOptions>(options =>
    {
       var supportedCultures = new[]
        {
            new CultureInfo("en"),
            new CultureInfo("de"),
            new CultureInfo("fr"),
            new CultureInfo("es"),
            new CultureInfo("ru"),
            new CultureInfo("ja"),
            new CultureInfo("ar"),
            new CultureInfo("zh"),
            new CultureInfo("en-GB")
        };
        options.DefaultRequestCulture = new RequestCulture("en-GB");
        options.SupportedCultures = supportedCultures;
        options.SupportedUICultures = supportedCultures;
    });

    您需要指定您计划在申请中支持的语言或今天福彩字谜总汇。 Cultures are represented in .NET by the CultureInfo class, which 保存有关号码和日期格式,日历,写入系统的信息, 排序订单和其他具体的语言环境。过载 CultureInfo 这里使用的类构造函数占用表示今天福彩字谜总汇名称的字符串。允许 值是ISO 639-1代码,其代表语言(例如“英语”) 可选地,具有代表国家或方言的ISO 3166子今天福彩字谜总汇代码(例如 英国的“en-gb”或南非的“en-za”)。在上面的例子中 支持语言数量,包括一个亚今天福彩字谜总汇 - 英国英语 已被设置为默认今天福彩字谜总汇。

  3. Now that the RequestLocalizationOptions have been configured, 它们可以应用于请求本地化中间件,需要是 added in the Configure method after app.UseRouting():

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    
    var localizationOptions = app.ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>().Value;
    app.UseRequestLocalization(localizationOptions);
     
    

设置请求今天福彩字谜总汇

请求本地化中间件利用调用组件 RequestCultureProviders. 确定当前请求的今天福彩字谜总汇。 默认情况下添加其中三个:

  • QueryStringRequestCultureProvider,从查询字符串获取今天福彩字谜总汇
  • CookieRequestCultureProvider从饼干中获得今天福彩字谜总汇
  • AcceptHeadersRequestCultureProvider从浏览器中获取今天福彩字谜总汇 接受语言标题

请求今天福彩字谜总汇提供商被称为另一个,直到一个人能够确定要求的今天福彩字谜总汇。 也可以创建自己的请求今天福彩字谜总汇提供者,我计划 看看未来的文章。与此同时,我将展示如何创建一个 看法 Component 这使用户能够为当前请求设置今天福彩字谜总汇。

  1. 第一步是创建一个名为的文件夹 楷模,以及在该名称中添加类文件 CulturesWitchermodel.cs..

    using System.Collections.Generic;
    using System.Globalization;
     
    namespace Localisation.楷模
    {
        public class CulturesWitcher.Model
        {
            public CultureInfo CurrentUICulture { get; set; }
            public List<CultureInfo> SupportedCultures { get; set; }
        }
    }
    
  2. 添加名为的文件夹 viewcomponents. 到项目,并在其中,添加 名为的新C#类文件 cultureswitcherviewcomponent.cs.。然后替换 具有以下代码的内容:

    using Localisation.楷模;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.本土化;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Options;
    using System.Linq;
     
    namespace Localisation.viewcomponents.
    {
        public class CulturesWitcher.ViewComponent : 看法 Component
        {
            private readonly IOptions<RequestLocalizationOptions> localizationOptions;
            public CulturesWitcher.ViewComponent(IOptions<RequestLocalizationOptions> localizationOptions) =>
                this.localizationOptions = localizationOptions;
     
            public IViewComponentResult Invoke()
            {
                var cultureFeature = HttpContext.Features.Get<IRequestCultureFeature>();
                var model = new CulturesWitcher.Model
                {
                    SupportedCultures = localizationOptions.Value.SupportedUICultures.ToList(),
                    CurrentUICulture = cultureFeature.RequestCulture.UICulture
                };
                return View(model);
            }
        }
    }
    
  3. 将新文件夹添加到 页面 文件夹并命名它 组件. 在此之内,添加另一个名为的文件夹 CulturesWitcher.。然后加一个剃刀 View to that named default.chtml.,并替换现有内容 with the following:

    @model CulturesWitcher.Model
     
    <div>
        <form id="culture-switcher">
            <select name="culture" id="culture-options">
                <option></option>
                @foreach (var culture in Model.SupportedCultures)
                {
                    <option value="@culture.Name" selected="@(Model.CurrentUICulture.Name == culture.Name)">@culture.DisplayName</option>
                }
            </select>
        </form>
    </div>
     
     
    <script>
        document.getElementById("culture-options").addEventListener("change", () => {
            document.getElementById("culture-switcher").submit();
        });
    </script>
    

    The view component is a simple select element, populated with the supported cultures that were configured in Startup. The form that it sits within uses the default get method, which means that the submitted value will appear in the query string with a name of culture. The QueryStringRequestCultureProvider is designed to look for an item in the query string with a key of culture (and/or ui-culture).

    The CurrentCulture for the request determines the 特定于区域的格式,用于日期和数字。这 CurrentUICulture 用于选择包含的正确资源 翻译字符串。我会看看如何使用资源文件来定位 static 该系列中的下一篇文章中的内容。可以设置不同的 values for the CurrentCulture and the CurrentUICulture, 但是,既具有相同的价值则往往是有道理的。如果只有一个是 设置(例如,通过单个查询字符串值),然后将该值分配给两者 properties.

  4. 在这个阶段,你刚刚创造的视图中可能有一些红色波浪线,所以打开了 _ViewImports.chtml. 文件并添加第二个和第三个 using 下面的指令以及允许您使用标签帮助的最后一行 呈现视图组件:

    @using Localisation
    @using Localisation.楷模
    @using System.Globalization
    @namespace Localisation.页面
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper *, Localisation
  5. 在布局页面中包含今天福彩字谜总汇切换器视图组件,使用 标签辅助方法,如上一行所示。

    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">隐私</a>
            </li>
        </ul>
    </div>
    <vc:culture-switcher/>
  6. 改变 index.chtml. 在代码块中包含代码和 显示各种数据位的表的HTML:

    @page
    @using Microsoft.AspNetCore.本土化
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
        var requestCultureFeature = HttpContext.Features.Get<IRequestCultureFeature>();
        var requestCulture = requestCultureFeature.RequestCulture;
    }
     
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="//docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
     
        <table class="table culture-table">
            <tr>
                <td style="width:50%;">Culture</td>
                <td>@requestCulture.Culture.DisplayName {@requestCulture.Culture.Name}</td>
            </tr>
            <tr>
                <td>UI Culture</td>
                <td>@requestCulture.UICulture.Name</td>
            </tr>
            <tr>
                <td>UICulture Parent</td>
                <td>@requestCulture.UICulture.Parent</td>
            </tr>
            <tr>
                <td>Date</td>
                <td>@DateTime.Now.ToLongDateString()</td>
            </tr>
            <tr>
                <td>Currency</td>
                <td>
                    @(12345.00.ToString("c"))
                </td>
            </tr>
            <tr>
                <td>Number</td>
                <td>
                    @(123.45m.ToString("F2"))
                </td>
            </tr>
        </table>
    </div>

第一次运行应用程序时,请求的可剪切是设置的 the AcceptHeadersCultureRequestProvider. When you use the the dropdown to select different cultures, the culture is set by the QueryStringCultureRequestProvider. Try adding a ui-culture 键入查询字符串的键,具有不同的值 culture key (e.g. //localhost:xxxxx/?culture=es&ui-culture=de) to see 有什么影响。

Summary

本文是对剃刀页面本地化的介绍。它涵盖了它 配置您希望在申请中支持的今天福彩字谜总汇,以及 如何将该配置传递给本地化中间件。它展示了如何 当前请求的今天福彩字谜总汇在格式化内容方面工作 展示。它还展示了如何使您的访客能够改变今天福彩字谜总汇 适合他们的偏好。

你可能已经注意到,虽然日期和月份的名称是 根据与当前相关的日历自动翻译 今天福彩字谜总汇,其他静态内容仍然是英语。在下一篇文章中,我 将显示如何使用资源文件(.resx.)管理多个翻译 这种类型的内容。