在 Blazor 应用中如何使用 Bootstrap 下拉菜单来选择本地化？

Question

我看过大量的教程和博客文章，但它们都建议使用选择控件来更改语言。它们都没有解释如何使用 HREF 实现本地化。 您能否至少给我提示或链接，以帮助我弄清楚如何使用 <a href=“de/page”>German</a>更改语言？ 除了这个功能之外，我已经实现了与本地化有关的所有内容。 谢谢

注意: 此问题总结整理于：Localization in Blazor using bootstrap dropdown menu.

Answer 1

你好，

基于这篇文章，我写了一个示例：

注册相关服务器，并在program.cs中添加中间件：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddLocalization();
builder.Services.AddControllers();
builder.Services.AddBlazorBootstrap();
.........
var supportedCultures = new[] { "en-US", "es-CL" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);
app.UseRequestLocalization(localizationOptions);
app.MapControllers();

添加控制器：

[Route("[controller]/[action]")]
public class CultureController : Controller
{
    public IActionResult Set(string culture, string redirectUri)
    {
        if (culture != null)
        {
            HttpContext.Response.Cookies.Append(
                CookieRequestCultureProvider.DefaultCookieName,
                CookieRequestCultureProvider.MakeCookieValue(
                    new RequestCulture(culture, culture)));
        }
        return LocalRedirect(redirectUri);
    }
}

添加CultureSelector 组件：

@using System.Globalization
@inject NavigationManager Navigation

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary"> Select your locale</DropdownToggleButton>
    <DropdownMenu>
        @foreach (var culture in supportedCultures)
        {
            if (CultureInfo.CurrentCulture.Name!=culture.Name)
            {
                <DropdownItem Type="ButtonType.Link" To="@CultureUri[culture.Name]">@culture.DisplayName</DropdownItem>
            }
            else
            {
                <DropdownItem Type="ButtonType.Button" Active=true>@culture.DisplayName</DropdownItem>
            }
        }
    </DropdownMenu>
</Dropdown>

@code
{
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("es-CL"),
    };
    private string redirecturi { get; set; }
    private Dictionary<string, string> CultureUri { get; set; } = new();
    protected override void OnInitialized()
    {
        redirecturi  = Uri.EscapeDataString(new Uri(Navigation.Uri)
                    .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped));
        foreach (var culture in supportedCultures)
        {
            var cultureEscaped = Uri.EscapeDataString(culture.Name);
            CultureUri.Add(culture.Name, $"Culture/Set?culture={cultureEscaped}&redirectUri={redirecturi}");
        }
    }
}

将组件添加到 MainLayout 组件中（注意，该组件应该是一个静态页面，以便您使用 href 实现本地化）：

<main>        
    <div class="top-row px-4">
        <CultureSelector/>
    </div>
    <article class="content px-4">
        @Body
    </article>
</main>

按照本文档添加所需的 css/js 文件。 修改 Home 组件并添加资源文件：

@using Microsoft.Extensions.Localization
@inject IStringLocalizer<Home> Loc
<PageTitle>Home</PageTitle>
<h1>@Loc["Hi"]</h1>
Welcome to your new app.

现在，当我第一次看到组件时：

选择西班牙语后：

对于 Blazor WebAssembly应用，可以参考文档的这一部分。

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。 注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。