You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

关于MudBlazor本地化支持及Blazor项目实现示例的技术问询

MudBlazor本地化支持及Blazor项目实现示例

嗨,别担心!MudBlazor完全支持本地化,只是官网的指引可能藏得有点深~我这就给你详细拆解Blazor Server和WebAssembly两种项目的实现步骤,还有实用示例。

通用准备工作(两种项目都需要)

首先得在项目里创建本地化资源文件:

  • 在项目根目录新建Resources文件夹
  • 添加默认资源文件MudBlazor.resx(对应英文,可直接使用MudBlazor的默认文本)
  • 为需要支持的语言添加对应资源文件,比如中文的MudBlazor.zh-CN.resx,把MudBlazor组件的文本键对应成目标语言,比如键MudTable.NoRecordsLabel的值设为暂无数据,键MudButton.Cancel设为取消等。

Blazor Web Server项目实现步骤

1. 配置Program.cs

添加本地化服务并设置支持的文化:

builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");

// 注册Blazor Server服务
builder.Services.AddServerSideBlazor()
    .AddMicrosoftIdentityConsentHandler();

// 定义支持的文化列表
var supportedCultures = new[] { "en-US", "zh-CN" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

// 启用请求本地化
app.UseRequestLocalization(localizationOptions);

2. 全局配置MudBlazor本地化(可选)

如果想让所有Mud组件自动读取本地化文本,可以在注册Mud服务时设置全局本地化提供器:

builder.Services.AddMudServices(config =>
{
    var localizer = builder.Services.BuildServiceProvider().GetService<IStringLocalizer<MudBlazor>>();
    config.LocalizationProvider = key => localizer[key];
});

3. 在组件中使用本地化

先在_Imports.razor添加命名空间:

@using Microsoft.Extensions.Localization

然后在组件里注入本地化器并使用:

@inject IStringLocalizer<MudBlazor> Localizer

<MudTable TItem="Product" NoRecordsLabel="@Localizer["MudTable.NoRecordsLabel"]">
    <!-- 表格列配置 -->
    <HeaderContent>
        <MudTh>产品名称</MudTh>
        <MudTh>价格</MudTh>
    </HeaderContent>
</MudTable>

<!-- 也可以直接用本地化文本做按钮文字 -->
<MudButton>@Localizer["MudButton.Save"]</MudButton>

Blazor WebAssembly项目实现步骤

1. 配置Program.cs

添加本地化服务并设置支持的文化:

builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");

// 定义支持的文化列表
var supportedCultures = new[] { "en-US", "zh-CN" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

builder.Services.Configure<RequestLocalizationOptions>(localizationOptions);

// 注册MudBlazor服务
builder.Services.AddMudServices();

2. 添加文化切换功能(可选)

wwwroot/index.html里添加切换文化的脚本:

<script>
    function setCulture(culture) {
        document.cookie = ".AspNetCore.Culture=culture=" + culture + ";path=/;SameSite=Lax";
        window.location.reload();
    }
</script>

3. 在组件中使用本地化

同样先在_Imports.razor添加命名空间,然后在组件里注入并使用:

@inject IStringLocalizer<MudBlazor> Localizer

<!-- 文化切换按钮 -->
<MudButton OnClick="@(() => setCulture("zh-CN"))">切换为中文</MudButton>
<MudButton OnClick="@(() => setCulture("en-US"))">Switch to English</MudButton>

<!-- 本地化的提示框 -->
<MudAlert Severity="Info" Title="@Localizer["MudAlert.Info"]">
    @Localizer["MudAlert.DefaultMessage"]
</MudAlert>

全局配置MudBlazor本地化(可选)

和Server项目类似,全局配置后所有组件自动使用本地化文本:

builder.Services.AddMudServices(config =>
{
    config.LocalizationProvider = key =>
    {
        var localizer = builder.Services.BuildServiceProvider().GetService<IStringLocalizer<MudBlazor>>();
        return localizer[key];
    };
});

小提示

  • 可以查看MudBlazor的官方源码,找到所有组件的默认文本键,确保资源文件里的键和官方一致
  • Blazor Server还可以通过URL参数(比如?culture=zh-CN)切换文化,无需额外脚本
  • 资源文件的复制属性要设为嵌入的资源,确保项目编译时能正确读取

备注:内容来源于stack exchange,提问作者Mukhtar Zayed

火山引擎 最新活动