关于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




