Blazor应用Razor页面InputText绑定double类型值报错如何解决？

InputText的Value参数仅支持string类型，直接绑定double会触发类型不匹配报错；直接使用ToString()仅能实现单向值输出，无法完成双向绑定的回写逻辑，所以不生效。以下是三种可行的解决方法： #

方案1：拆分双向绑定逻辑（无需修改Model，适合单场景使用） #

将@bind-Value语法拆分为三个绑定参数，分别处理显示、回写和验证关联即可：

<div class="form-group col">
    <label title="The quantity ">Quantity</label>
    <i class="fa fa-info-circle" style="color:dimgrey" title="The quantity"> 
    </i>
    <InputText 
        Value="@trade.qty.ToString()"
        ValueChanged="@(inputVal => { 
            // 可自行添加非法输入的提示逻辑
            if(double.TryParse(inputVal, out var doubleVal)) 
            {
                trade.qty = doubleVal;
            }
        })"
        ValueExpression="@(() => trade.qty)"
        class="form-control" 
    />
    <ValidationMessage For="@(() => trade.qty)" />
</div>

参数说明：

• Value：将double属性转为字符串用于前端显示
• ValueChanged：接收用户输入的字符串，校验为合法double后写回原属性
• ValueExpression：关联原double属性，保证验证逻辑正常生效

方案2：给Model新增字符串代理属性（适合不想在Razor写逻辑的场景） #

在原有Model的基础上新增一个专门用于绑定的字符串属性，自动处理类型转换：

public class Trade
{
    // 原有属性不变
    public Double qty { get; set; }
    // 新增绑定用代理属性
    public string qtyBindStr
    {
        get => qty.ToString();
        set 
        {
            if(double.TryParse(value, out var res))
            {
                qty = res;
            }
        }
    }
}

绑定时代码直接写为：

<InputText @bind-Value="@trade.qtyBindStr" class="form-control" />

方案3：自定义通用数值Input组件（适合多场景复用） #

如果项目中大量存在需要用InputText绑定数值的需求，可以直接封装通用组件，后续直接调用即可：

// 自定义组件代码，可放在项目的Components目录下
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

public class InputDoubleText : InputBase<double>
{
    [Parameter]
    public string NumberFormat { get; set; } = "";

    protected override bool TryParseValueFromString(string value, out double result, out string validationErrorMessage)
    {
        if (double.TryParse(value, out result))
        {
            validationErrorMessage = null;
            return true;
        }
        validationErrorMessage = "请输入有效的数值";
        return false;
    }

    protected override string FormatValueAsString(double value)
    {
        return value.ToString(NumberFormat);
    }
}

调用时代码和原生组件完全一致，直接绑定double属性即可：

<InputDoubleText @bind-Value="@trade.qty" class="form-control" />

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