我想使用 razor 頁面和一些 Blazor 組件構建一個 ASP.NET Razor 應用程式，并根據 URL 中的語言對站點內容進行本地化。
例如，/en/home并且/fr/home將具有基于語言呈現內容中的一個后盾頁面。
有什么方法可以做到這一點？
uj5u.com熱心網友回復：
AspNetCore.Mvc.Localization 有我們需要的東西。
在里面_ViewImports.cshtml，我們可以注入一個IViewLocalizer，它將抓取.resx相應頁面的檔案。
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
現在Localizer可以在我們所有的頁面中找到。
例如， Index.cshtml
@page
@model IndexModel
@{
ViewData["Title"] = @Localizer["Title"];
}
<h1>@Localizer["Header"]</h1>
<section>
<p>@Localizer["Welcome", User.Identity.Name]</p>
@Localizer["Learn"]
<a asp-page="Page1">@Localizer["SomePage"]</a>
<a asp-page="Dogs/Index">@Localizer["LinkDogs"]</a>
</section>
現在，一旦創建了 resx 檔案，頁面標題、標題和內容就會本地化。
Resources/Pages/Index.resx并且Resources/Pages/Index.fr.resx需要創建。有一個 VSCode 擴展可用于此，因為這些檔案只是丑陋的 XML。
字串可以引數化。在該Index.cshtml示例中，"Welcome"="Howdy {0}"獲取被參考@Localizer["Welcome", User.Identity.Name]并且用戶名將被替換為{0}。
在里面Startup.cs，我們還需要添加一些設定。
services.AddLocalization(options =>
{
options.ResourcesPath = "Resources";
}); // new
services.AddRazorPages()
.AddRazorRuntimeCompilation()
.AddViewLocalization(); // new
services.AddServerSideBlazor();
但這只能訪問Localizer我們的.cshtml檔案內部。我們的頁面仍然看起來像/home而不是/en/home。
為了解決這個問題，我們將添加一個IPageRouteModelConvention來修改我們的頁面模板，{culture}在我們所有的頁面之前。
在里面Startup.cs，我們需要在 razor 配置期間添加約定。
services.AddRazorPages(options =>
{
options.Conventions.Add(new CultureTemplatePageRouteModelConvention());
})
我CultureTemplatePageRouteModelConvention.cs在一個Middleware/檔案夾下創建了它，但你可以把它放在任何地方（不確定它是否是“技術上的”中間件？）。
using System;
using Microsoft.AspNetCore.Mvc.ApplicationModels;
using Microsoft.Extensions.Logging;
namespace app.Middleware
{
public class CultureTemplatePageRouteModelConvention : IPageRouteModelConvention
{
public void Apply(PageRouteModel model)
{
// For each page Razor has detected
foreach (var selector in model.Selectors)
{
// Grab the template string
var template = selector.AttributeRouteModel.Template;
// Skip the MicrosoftIdentity pages
if (template.StartsWith("MicrosoftIdentity")) continue;
// Prepend the /{culture?}/ route value to allow for route-based localization
selector.AttributeRouteModel.Template = AttributeRouteModel.CombineTemplates("{culture?}", template);
}
}
}
}
現在去/en/home應該解決，/home不應該。但是如果你去/fr/home你會注意到它仍然使用英文 resx 檔案。這是因為未根據 URL 更新區域性。
為了解決這個問題，需要更多的修改Startup.cs。
在Configure方法中，我們將添加
app.UseRequestLocalization();
在 下ConfigureServices，我們將配置請求本地化選項。這將包括添加RequestCultureProvider用于確定Culture每個請求的 。
services.Configure<RequestLocalizationOptions>(options =>
{
options.SetDefaultCulture("en");
options.AddSupportedCultures("en", "fr");
options.AddSupportedUICultures("en", "fr");
options.FallBackToParentCultures = true;
options.RequestCultureProviders.Remove(typeof(AcceptLanguageHeaderRequestCultureProvider));
options.RequestCultureProviders.Insert(0, new Middleware.RouteDataRequestCultureProvider() { Options = options });
});
This uses an extension method to remove the default accept-language header culture provider
using System;
using System.Collections.Generic;
using System.Linq;
namespace app.Extensions
{
public static class ListExtensions {
public static void Remove<T>(this IList<T> list, Type type)
{
var items = list.Where(x => x.GetType() == type).ToList();
items.ForEach(x => list.Remove(x));
}
}
}
More importantly, we need to create the RouteDataRequestCultureProvider we just added to the list.
Middleware/RouteDataRequestCultureProvider.cs
using System;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Localization;
namespace app.Middleware
{
public class RouteDataRequestCultureProvider : RequestCultureProvider
{
public override Task<ProviderCultureResult> DetermineProviderCultureResult(HttpContext httpContext)
{
string routeCulture = (string)httpContext.Request.RouteValues["culture"];
string urlCulture = httpContext.Request.Path.Value.Split('/')[1];
// Culture provided in route values
if (IsSupportedCulture(routeCulture))
{
return Task.FromResult(new ProviderCultureResult(routeCulture));
}
// Culture provided in URL
else if (IsSupportedCulture(urlCulture))
{
return Task.FromResult(new ProviderCultureResult(urlCulture));
}
else
// Use default culture
{
return Task.FromResult(new ProviderCultureResult(DefaultCulture));
}
}
/**
* Culture must be in the list of supported cultures
*/
private bool IsSupportedCulture(string lang) =>
!string.IsNullOrEmpty(lang)
&& Options.SupportedCultures.Any(x =>
x.TwoLetterISOLanguageName.Equals(
lang,
StringComparison.InvariantCultureIgnoreCase
)
);
private string DefaultCulture => Options.DefaultRequestCulture.Culture.TwoLetterISOLanguageName;
}
}
Note we check for RouteValues["culture"] in this provider, when that value isn't actually present yet. This is because we need another piece of middleware for Blazor to work properly. But for now, at least our pages will have the correct culture applied from the URL, which will allow /fr/ to use the correct Index.fr.resx instead of Index.resx.
Another issue is that the asp-page tag helper doesn't work unless you also specify asp-route-culture with the user's current culture. This sucks, so we will override the tag helper with one that just copies the culture every time.
Inside _ViewImports.cshtml
@* Override anchor tag helpers with our own to ensure URL culture is persisted *@
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, app
and under TagHelpders/CultureAnchorTagHelper.cs we will add
using System;
using app.Extensions;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
// https://stackoverflow.com/a/59283426/11141271
// https://stackoverflow.com/questions/60397920/razorpages-anchortaghelper-does-not-remove-index-from-href
// https://talagozis.com/en/asp-net-core/razor-pages-localisation-seo-friendly-urls
namespace app.TagHelpers
{
[HtmlTargetElement("a", Attributes = ActionAttributeName)]
[HtmlTargetElement("a", Attributes = ControllerAttributeName)]
[HtmlTargetElement("a", Attributes = AreaAttributeName)]
[HtmlTargetElement("a", Attributes = PageAttributeName)]
[HtmlTargetElement("a", Attributes = PageHandlerAttributeName)]
[HtmlTargetElement("a", Attributes = FragmentAttributeName)]
[HtmlTargetElement("a", Attributes = HostAttributeName)]
[HtmlTargetElement("a", Attributes = ProtocolAttributeName)]
[HtmlTargetElement("a", Attributes = RouteAttributeName)]
[HtmlTargetElement("a", Attributes = RouteValuesDictionaryName)]
[HtmlTargetElement("a", Attributes = RouteValuesPrefix "*")]
public class CultureAnchorTagHelper : AnchorTagHelper
{
private const string ActionAttributeName = "asp-action";
private const string ControllerAttributeName = "asp-controller";
private const string AreaAttributeName = "asp-area";
private const string PageAttributeName = "asp-page";
private const string PageHandlerAttributeName = "asp-page-handler";
private const string FragmentAttributeName = "asp-fragment";
private const string HostAttributeName = "asp-host";
private const string ProtocolAttributeName = "asp-protocol";
private const string RouteAttributeName = "asp-route";
private const string RouteValuesDictionaryName = "asp-all-route-data";
private const string RouteValuesPrefix = "asp-route-";
private readonly IHttpContextAccessor _contextAccessor;
public CultureAnchorTagHelper(IHttpContextAccessor contextAccessor, IHtmlGenerator generator) :
base(generator)
{
this._contextAccessor = contextAccessor;
}
public override void Process(TagHelperContext context, TagHelperOutput output)
{
var culture = _contextAccessor.HttpContext.Request.GetCulture();
RouteValues["culture"] = culture;
base.Process(context, output);
}
}
}
This uses an extension method to get the current culture from an HttpRequest
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Localization;
namespace app.Extensions
{
public static class HttpRequestExtensions
{
public static string GetCulture(this HttpRequest request)
{
return request.HttpContext.Features.Get<IRequestCultureFeature>()
.RequestCulture.Culture.TwoLetterISOLanguageName;
}
}
}
To make sure the dependency injection for the current context works, we need to modify Startup.cs
// Used by the culture anchor tag helper
services.AddHttpContextAccessor();
Now we can use the tag helper without things breaking.
Example:
<a asp-page="Page1">@Localizer["SomePage"]</a>
With normal pages working, now we can work on getting Blazor components translated.
Inside _Imports.razor, we will add
@using Microsoft.Extensions.Localization
Inside our myComponent.razor, we will add
@inject IStringLocalizer<myComponent> Localizer
Now we can use <h1>@Localizer["Header"]</h1> just like in our normal pages. But now there's another issue: our Blazor components aren't getting their Culture set correctly. The components see /_blazor as their URL instead of the page's URL. Comment out the <base href="~/"> in your <head> element in _Layout.cshtml to make Blazor try hitting /en/_blazor instead of /_blazor. This will get a 404, but we will fix that.
Inside Startup.cs, we will register another middleware.
app.Use(new BlazorCultureExtractor().Handle);
This call should be before the app.UseEndpoints and app.UseRequestLocalization() call.
Middleware/BlazorCultureExtractor.cs
using System;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using app.Extensions;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Localization;
namespace app.Middleware
{
public class BlazorCultureExtractor
{
private readonly Regex BlazorRequestPattern = new Regex("^/(.*?)(/_blazor.*)$");
public async Task Handle(HttpContext context, Func<Task> next)
{
var match = BlazorRequestPattern.Match(context.Request.Path.Value);
// If it's a request for a blazor endpoint
if (match.Success)
{
// Grab the culture from the URL and store it in RouteValues
// This allows IStringLocalizers to use the correct culture in Blazor components
context.Request.RouteValues["culture"] = match.Groups[1].Value;
// Remove the /culture/ from the URL so that Blazor works properly
context.Request.Path = match.Groups[2].Value;
}
await next();
}
}
}
The middleware will check if the route is trying to hit /en/_blazor, will set the RouteValues["culture"] value to en, and will rewrite the path to /_blazor before further processing. This puts the lang in the route values for our RequestCultureProvider to use, while also fixing the 404 from blazor trying to hit our localized routes.
Inside _Layout.cshtml I also use
<script src="~/_framework/blazor.server.js"></script>"
to ensure that the request for the blazor script hits the proper path instead of /en/_framework/.... Note the preceeding ~/ on the src attribute.
Closing remarks
If you want pure URL-based localization instead of the weird cookie stuff MS promotes, then it's a lot of work.
我沒有費心研究 Blazor pages這樣做，我現在只是堅持使用組件。
例如，
<component>
@(await Html.RenderComponentAsync<MyCounterComponent>(RenderMode.Server))
</component>
uj5u.com熱心網友回復：
對于 Blazor WASM 應用程式，您可以使用本地存盤來存盤/檢索用戶選擇的文化，并在用戶更改文化時相應地更新 UI。以下解決方案適用于希臘/美國文化，但您可以通過更改文化代碼來使用您想要的任何組合。
要實作這一點，您將需要一些 JavaScript 來讀寫本地存盤，如下所示。以下解決方案是使用bootstrap 4和標志圖示 css 實作的
在wasmwwwroot 檔案夾中的應用程式部分中，創建一個名為 scipts 的檔案夾，并在其中添加一個名為的檔案utils.js并放置以下代碼：
function getFromLocalStorage(key) {
return localStorage[key];
}
function setInLocalStorage(key, value) {
localStorage[key] = value;
}
同樣在您的wasm專案中，將以下代碼放入program.cs檔案中：
public static async Task Main(string[] args)
{
....
//get the jsinterop service
var js = host.Services.GetRequiredService<IJSRuntime>();
//read the culture key from the localstorage
var culture = await js.InvokeAsync<string>("getFromLocalStorage", "culture");
//Initializes a new variable of type System.Globalization.CultureInfo
CultureInfo selectedCulture;
//if culture is null
if (culture == null)
{
//set the default culture to be greek
selectedCulture = new CultureInfo("el-GR");
}
else
{
//else set the cuture based on the culture setting retrieved from the local storage
selectedCulture = new CultureInfo(culture);
}
//set the default culture for the application ui and thread
CultureInfo.DefaultThreadCurrentCulture = selectedCulture;
CultureInfo.DefaultThreadCurrentUICulture = selectedCulture;
await host.RunAsync();
}
在Shared專案或資源檔案所在的任何地方，將以下鍵/值對放在Resource.resx
Greek Greek
English English
而內 Resource.el.resx
Greek Ελληνικ?
English Αγγλικ?
現在讓我們創建一個新CultureSelectorComponent.razor組件并將其放置在wasm專案中，并在其中添加以下代碼，如下所示：
@inject NavigationManager navigationManager
@inject IJSRuntime js
@using System.Globalization
@*
The culture selector component that allows the user to change their display language and system locale
this forces all areas of the UI to render using the different available locales currently only Greek and American-US are supported
This affects the rendering of both Text values on the UI as well as all Metric systems including Decimals as well as Date formats and all other relevant localized variables
*@
<div class="btn-group nav-item dropdown">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@*currently we are showing only the selected flag with its corresponding parameters and values *@
<span class='flag-icon flag-icon-@(languages.Where(m => m.Code.Equals(CultureInfo.CurrentCulture.Name)).FirstOrDefault().TwoCharCode)'
data-toggle='tooltip' data-placement='top' data-original-title='@(languages.Where(m => m.Code.Equals(CultureInfo.CurrentCulture.Name)).FirstOrDefault().Name)' title='@(languages.Where(m => m.Code.Equals(CultureInfo.CurrentCulture.Name)).FirstOrDefault().Name)'>
</span>
@*currently we are hidding the value shown in the dropdown selected text *@
@*@(languages.Where(m => m.Code.Equals(CultureInfo.CurrentCulture.Name)).FirstOrDefault().TwoCharCode.ToUpper())*@
</button>
<div class="dropdown-menu dropdown-menu-right">
@foreach (var language in languages)
{
//the available flag options shown in the dropdown with their corresponding click event functions and class switcher selector
<button class="btn dropdown-item shadow-none blue-hover @(CultureInfo.CurrentCulture.Name.Equals(language.Code) ? "" : "")"
@onclick="(() => SetLanguage(language.Code))">
@((MarkupString)(language.IconTooltip)) @language.Name
</button>
}
</div>
</div>
@code {
public class Language
{
//the Name property that derives from the Resource files showing the language display name
public string Name { get; set; }
//the ISO Language Code property, check this link for more codes/information http://www.lingoes.net/en/translator/langcode.htm
public string Code { get; set; }
//the two char code property
public string TwoCharCode { get; set; }
//the tooltip property is used for showing a tooltip on top of each of the flags when the user hovers over the flag icons
public string IconTooltip { get; set; }
}
//the list of available languages together with the required properties defined above
List<Language> languages = new List<Language>
{
new Language{ Name = Resource.Greek, Code = "el-GR", TwoCharCode="gr", IconTooltip = $"<span class='flag-icon flag-icon-gr' data-toggle='tooltip' data-placement='top' title='{Resource.Greek}'></span>"},
new Language{ Name = Resource.English, Code = "en-US", TwoCharCode="us", IconTooltip = $"<span class='flag-icon flag-icon-us' data-toggle='tooltip' data-placement='top' title='{Resource.English}'></span>"},
};
//function that is associated with the click event when the user clicks one of the dropdown options from the language selector component.
void SetLanguage(string langcode)
{
var jsInProcessRuntime = (IJSInProcessRuntime)js;
jsInProcessRuntime.InvokeVoid("setInLocalStorage", "culture", langcode);
navigationManager.NavigateTo(navigationManager.Uri, forceLoad: true);
}
}
To use the above component simply reference it as follows, in our case this reference is put in our MainLayout.razor component: <CultureSelectorComponent />
If you need to display or save the currently selected culture anywhere in your application you can simply use the .net property for retrieving the cutlure info i.e. CultureInfo.CurrentCulture.Name or retrieve it from local storage with the .js helper methods created earlier inside of the utils.js file above. Finally you should reference all css/js resources mentioned above within wwwroot/index.html (wasm client project).
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/317613.html