Clever Geek Handbook

Localization in ASP.NET Core Razor Pages - Cultures

Hello habr! Right now, OTUS is opening a suite on a new course "C # ASP.NET Core Developer" . In this regard, we traditionally share with you a useful translation and invite you to sign up for an open day , during which you can learn in detail about the course, as well as ask the expert your questions.

This is the first article in a series on localization in ASP.NET Core Razor Pages applications. In this article, we will look at the configuration required to prepare a site for content localization, or in other words, for site globalization. In future articles, I'll talk about creating localized content and how to present it to the end user.

Globalization in ASP.NET Core

Globalization is preparing an application to support different languages ​​depending on the user's preference. Localization is the process of adapting website content to different countries, regions or cultures. The starting point for globalizing a web application is the ability to define the language or culture for each request. Next, we need a mechanism to select content based on the culture of the current request. In this article, we'll look at the role that a class plays CultureInfoin localization and how you can implement a view component so that users can choose their preferred culture for queries.

Razor Pages , - ASP.NET Core 3.0 . «Localisation». , , .

1. Startup.cs using :

using System.Globalization;
using Microsoft.AspNetCore.Localization;
using Microsoft.Extensions.Options;

2. - . . ConfigureServices, AddLocalization, . 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;
});

, . .NET CultureInfo, , , , , . CultureInfo, , , (). - ISO 639-1, (, «en» ), ISO 3166, (, «en-GB» «en-ZA» ). , - , .

3. , RequestLocalizationOptions , , Configure app.UseRouting():

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

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

, RequestCultureProviders. :

  • QueryStringRequestCultureProvider,

  • CookieRequestCultureProvider, cookie

, . , . , , .

1. - Models CultureSwitcherModel.cs.

using System.Collections.Generic;
using System.Globalization;
 
namespace Localisation.Models
{
    public class CultureSwitcherModel
    {
        public CultureInfo CurrentUICulture { get; set; }
        public List<CultureInfo> SupportedCultures { get; set; }
    }
}

2. ViewComponents C# CultureSwitcherViewcomponent.cs. :

using Localisation.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Localization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using System.Linq;
 
namespace Localisation.ViewComponents
{
    public class CultureSwitcherViewComponent : ViewComponent
    {
        private readonly IOptions<RequestLocalizationOptions> localizationOptions;
        public CultureSwitcherViewComponent(IOptions<RequestLocalizationOptions> localizationOptions) =>
            this.localizationOptions = localizationOptions;
 
        public IViewComponentResult Invoke()
        {
            var cultureFeature = HttpContext.Features.Get<IRequestCultureFeature>();
            var model = new CultureSwitcherModel
            {
                SupportedCultures = localizationOptions.Value.SupportedUICultures.ToList(),
                CurrentUICulture = cultureFeature.RequestCulture.UICulture
            };
            return View(model);
        }
    }
}

3. Pages Components. CultureSwitcher. Razor View default.cshtml :

@model CultureSwitcherModel
 
<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>

- select , , Startup. , , get , , culture. QueryStringRequestCultureProvider culture (/ ui-culture).

CurrentCulture . CurrentUICulture , , . , . CurrentCulture CurrentUICulture , , . (, ), .

4. , , -   _ViewImports.cshtml using, , , tag- :

@using Localisation
@using Localisation.Models
@using System.Globalization
@namespace Localisation.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Localisation

5. , tag-, .

<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">Privacy</a>
        </li>
    </ul>
</div>
<vc:culture-switcher/>

6. Index.cshtml, HTML- , :

@page
@using Microsoft.AspNetCore.Localization
@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="https://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>

AcceptHeadersCultureRequestProvider. , QueryStringCultureRequestProvider. ui-culture culture (, https://localhost:xxxxx/?culture=es&ui-culture=de), , .

Razor Pages. , , , . , . , .

, , , , . , (.resx) .

.

:



More articles:


All Articles