剃刀页面中的本地注释属性

这是一个探索各个方面的系列中的第三篇文章 ASP.NET核心razor页面应用程序中的本地化。这 第一篇文章 如何与文化合作,而且 第二次涵盖了使用的基础知识 静态内容翻译的资源文件。在本文中,我解释了如何 为表单标签和验证错误消息提供本地化资源 对于具有数据注释属性的PageModel属性。

本文中的应用程序是相同的 以前的文章。它是使用标准剃刀页面3.1项目建造的 模板没有身份验证。本文中的许多概念都是 最初在上一篇文章中介绍,所以你应该先阅读这一点。

遵循的前三个步骤演示了使用资源启用本地化的最小配置。 如果您继续从上一篇文章中继续,您将涵盖这些:

  1. In ConfigureServices, localization is added to the DI container, specifying the location of resources in the application, and the cultures 通过应用程序支持:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddLocalization(options => options.资源Path = "resources");
    
        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;
        });
        
        services.AddSingleton<CommonLocalizationService>();
    
    }

    The CommonLocalizationService is a wrapper around an IStringLocalizer<T> 用于访问资源文件。它被介绍为访问手段 页面-Abnostic资源文件在上一篇文章中。

  2. 路由后添加了本地化中间件,通过 在上一步中指定的本地化选项 Configure method:

    var localizationOptions = app.ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>().Value;
    app.UseRequestLocalization(localizationOptions);
  3. 一个名为的文件夹 资源 被添加到应用程序的根目录中,包含一个名为的空类 CommonResources:

    public class CommonResources
    {
    }

    资源 are accessed using a localization provider (IStringLocalizer<T>) which needs to 使用特定类型。如果资源旨在只用一个 页面,您可以使用PageModel类作为类型。翻译 应在多个页面中使用数据注释,因此需要设置它们 to be page-agnostic. The CommonResources class provides a 页面 - 不可知的资源类型。它是空的(没有成员),因为它只是一个 placeholder.

  4. In the previous article, the AddViewLocalization extension 方法用于将视图本地化服务添加到应用程序的内容 服务收集。在本文中, AddDataAnnotationsLocalization extension method is chained to enable configuration of the IStringLocalizer to be used for accessing resources that contain data 注释翻译。工厂用于创建一个 IStringLocalizer which is typed to the empty CommonResources class created in the 最后一篇文章支持全局或页面 - 不可止结的资源文件。

    services.AddMvc().AddViewLocalization().AddDataAnnotationsLocalization(options =>
    {
        options.DataAnnotationLocalizerProvider = (type, factory) =>
        {
            var assemblyName = new AssemblyName(typeof(CommonResources).GetTypeInfo().Assembly.FullName);
            return factory.Create(nameof(CommonResources), assemblyName.Name);
        };
    });

下面的示例演示了数据注释的使用 PageModel属性表示从表格发布的值。表单是一个简单的联系表格,其中所有表格字段 are required.

  1. 将新的剃刀页添加到名为的应用程序 contact.chtml.

  2. 使用指令添加到PageModel文件的顶部:

    using System.ComponentModel.DataAnnotations;
    
  3. 使用Data Annotation属性添加以下属性到ContactModel:

    [BindProperties]
    public class 接触Model : PageModel
    {
        [Display(Name = "Message"), Required(ErrorMessage = "Message Required")]
        public string 信息 { get; set; }
        [Display(Name = "First Name"), Required(ErrorMessage = "First Name Required")]
        public string FirstName { get; set; }
        [Display(Name = "Last Name"), Required(ErrorMessage = "Last Name Required")]
        public string LastName { get; set; }
        [Display(Name = "Email"), Required(ErrorMessage = "Email Required"), DataType(DataType.电子邮件Address)]
        public string 电子邮件 { get; set; }
    }

    我没有在此示例中包含任何处理程序方法,因为重点不在处理发布的表单值上。

  4. 此步骤在上一篇文章中引入的共享资源文件中构建。翻译为 标签和错误消息被添加到英语,法语和德语资源以及用于联系页面的条目以及表单上的提交按钮。 只有德国资源文件的附加条目(commonresources.de.resx.)在这里显示 for brevity:

    接触kontakt.
    联系我们kontaktieren Sie Uns
    电子邮件电子邮件
    需要电子邮件eine. gältige电子邮件是erforderlich
    vorname.
    要求名字艾因 Vorname Ist Erforderlich.
    nachname.
    要求姓氏艾因 nachname ist erfordlich.
    信息Nachricht.
    需要留言eine. Nachricht Ist Erforderlich.
    提交send

    The keys for each entry are the values passed to the Name property of the Display attribute, and the ErrorMessage property of the Required 属性。法国资源文件(commonresources.fr.resx.) 除了德国人之外,需要翻译大多数相同的钥匙。除了 words 接触 and 信息,法语与英语相同。英语 资源文件需要错误消息的“翻译”,除非您是快乐的 使用属性中分配的现有(相当简洁)值。

    除了数据注释条目外,还有三个进一步的条目。 这些是用于导航,联系页面上的标题和按钮 将用于提交联系表格。

  5. The navigation can be added to the layout page, using the CommonLocalizerService that was created 并注入上一篇文章中的布局页面:

    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-page="/Contact">@localizer.Get("Contact")</a>
    </li>
  6. 最后,可以创建表格 contact.chtml.:

    @page
    @inject CommonLocalizationService localizer
    @model Localisation.Pages.接触Model
    @{
        ViewData["Title"] = localizer.Get("Contact Us");
    }
     
    <h1>@localizer.Get("Contact Us")</h1>
    <form method="post">
        <div class="form-group">
            <label asp-for="FirstName"></label>
            <input class="form-control" asp-for="FirstName">
            <span asp-validation-for="FirstName"></span>
        </div>
        <div class="form-group">
            <label asp-for="LastName"></label>
            <input class="form-control" asp-for="LastName">
            <span asp-validation-for="LastName"></span>
        </div>
        <div class="form-group">
            <label asp-for="电子邮件"></label>
            <input class="form-control" asp-for="电子邮件">
            <span asp-validation-for="电子邮件"></span>
        </div>
        <div class="form-group">
            <label asp-for="信息"></label>
            <textarea class="form-control" asp-for="信息"></textarea>
            <span asp-validation-for="信息"></span>
        </div>
        <button class="btn btn-secondary">@localizer.Get("Submit")</button>
    </form>
     
    @section scripts{ 
    <partial name="_validatisesscriptspartial."/>
    }
     
    

    The CommonLocalizerService is injected into the page, and 用于提供页面标题,标题和提交的翻译 按钮。表单的其余部分可以从任何应用中获取。它用 标签,输入和验证消息的标准标记助词助词。不引人注意 通过包含验证使能 validatisesscriptspartial. file.

  7. 最终的触摸是向其中添加一些风格 site.css. 文件,in. wwwroot / css. 在验证失败中添加一些颜色以输入和消息:

    .field-validation-error {
        color: #dc3545;
    }
    .input-validation-error {
        border-color: #dc3545;
        background-color: #ffe6e6;
    }

如果您运行应用程序并导航到联系人页面,则可以通过尝试提交空表单来测试本地化。客户端验证应该启动,因为没有必需的字段都具有值:

数据注释的本地化

然后,您可以使用文化切换器来测试翻译:

数据注释的本地化

概括

本文演示如何在剃刀页面应用程序中本地化数据注释属性。该过程基于资源的使用,并需要自己的配置。

到目前为止,通过在系列中的第一篇文章中创建的文化切换器视图组件,已将用于请求的文化设置为查询字符串值。这是 不是推荐的方法. 在下一篇文章中,我会看看如何通过的方式管理文化 路线数据而不是.