如何在Blazor中将绑定双精度属性的数字输入显示为百分比或美元格式？

要实现将Ratio的双精度值转换为百分比格式显示（如1.1799→117.99%，0.667→66.70%），并通过模型属性完成双向绑定，你可以通过添加中间绑定属性处理转换逻辑，具体实现如下：

代码修改方案 #

<input type="number" step="0.01" @bind="DisplayRatio" @bind:format="N2" />
<span>%</span>

@code {
    [Parameter]
    public double? Ratio { get; set; }

    // 输入框与原始Ratio的中间绑定属性，处理百分比转换
    private double? DisplayRatio
    {
        get => Ratio.HasValue ? Ratio.Value * 100 : null;
        set => Ratio = value.HasValue ? value.Value / 100 : null;
    }
}

关键细节说明 #

• 中间属性DisplayRatio：作为输入框和原始Ratio的转换桥梁，取值时将原始比例值乘以100转为百分比数值，赋值时将输入的百分比数值除以100还原为原始比例值。
• @bind:format="N2"：强制输入框显示两位小数，确保0.667转换后显示为66.70，完全匹配需求格式。
• step="0.01"：限制输入框的步进值为0.01，避免用户输入过多无效小数位。
• 空值兼容：针对Ratio的可空特性，DisplayRatio同步做了null判断，保证逻辑一致性。

若需输入框内直接显示%符号，由于type="number"输入框不支持非数字字符，建议改用type="text"并添加输入合法性验证逻辑，但这种方式需要额外处理用户输入的格式校验。

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