Blazor切换不同文化时如何修复数字输入框值显示问题

问题核心 #

当Blazor应用切换到sv-SE这类以逗号作为小数分隔符的文化时，type="number"的输入框会无法显示decimal值。原因很明确：HTML5的number输入框仅认可.作为小数分隔符，与服务器端文化设置无关；而Blazor默认会用当前文化格式化数值，生成带逗号的字符串，不符合输入框的格式要求。

最优解决方案：利用绑定格式化参数 #

直接使用Blazor提供的@bind-value:format参数，强制以**不变文化（InvariantCulture）**格式化显示值，就能彻底解决问题，代码简洁优雅：

@using System.Globalization

<input type="number"
       step="@Step"
       @bind-value="Value"
       @bind-value:format="CultureInfo.InvariantCulture" />

@code {
    [Parameter]
    public decimal Value { get; set; } = 1.05m;

    [Parameter]
    public EventCallback<decimal> ValueChanged { get; set; }

    private string Step => "0.01";

    protected override void OnInitialized()
    {
        CultureInfo culture = new CultureInfo("sv-SE");
        CultureInfo.DefaultThreadCurrentCulture = culture;
        CultureInfo.DefaultThreadCurrentUICulture = culture;
    }
}

方案优势 #

• 无需手动处理字符串替换、负号修正这类易出错的逻辑
• 贴合Blazor框架设计，代码可读性与维护性更强
• 无论切换到哪种文化，number输入框都能正常显示和解析数值

自定义解析场景的替代方案 #

如果需要额外的输入验证或自定义解析规则，可以手动管理显示字符串与数值的转换：

@using System.Globalization

<input type="number"
       step="@Step"
       value="@DisplayValue" 
       @onchange="HandleInputChange"/>

@code {
    [Parameter]
    public decimal Value { get; set; } = 1.05m;

    [Parameter]
    public EventCallback<decimal> ValueChanged { get; set; }

    private string Step => "0.01";
    // 用不变文化格式化，确保输出带点的字符串
    private string DisplayValue => Value.ToString(CultureInfo.InvariantCulture);

    private void HandleInputChange(ChangeEventArgs args)
    {
        // 用不变文化解析，兼容输入框的标准化值
        if (decimal.TryParse(args.Value?.ToString(), NumberStyles.Number, CultureInfo.InvariantCulture, out var parsedValue))
        {
            Value = parsedValue;
            ValueChanged.InvokeAsync(Value);
        }
    }
}

这种方式同样避免了手动字符串操作的粗糙逻辑，同时保留了自定义处理的灵活性。

内容的提问来源于stack exchange，提问作者Cedervall