如何解决InputNumber.ValueChanged绑定的编译错误？

问题场景 #

在Blazor表单中实现双向绑定时，InputText可正常工作，但为InputNumber添加ValueChanged属性时出现以下编译错误：

CS1662 无法将 lambda 表达式转换为预期的委托类型，因为块中的某些返回类型无法隐式转换为委托返回类型
CS1503 参数 2: 无法从“方法组”转换为“EventCallback”

触发错误的Component.razor代码如下：

@page "/test"

@using System.ComponentModel.DataAnnotations

<EditForm Model="@model">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText Value="@model.Street" ValueExpression="@(() => model.Street)" ValueChanged="@StreetChanged" />
    <InputNumber Value="@model.HouseNr" ValueExpression="@(() => model.HouseNr)" ValueChanged="@HouseNrChanged" />
    <button type="submit">Send</button>
</EditForm>

@code {
    protected void StreetChanged(string? value)
    {
        // ... code to lookup address and fill other fields
        model.Street = value;
    }

    protected void HouseNrChanged(int? value)
    {
        // ... code to lookup address and fill other fields
        model.HouseNr = value;
    }

    private Address model { get; set; } = new();

    class Address
    { 
        [Required]
        public string? Street { get; set; }

        [Required]
        public int? HouseNr { get; set; }
    }
}

推测问题与ValueChanged的类型差异有关：

• InputText.ValueChanged 的类型为EventCallback<string>
• InputNumber.ValueChanged 的类型为EventCallback<TValue>

问题解答 #

1. 如何修复该错误？ #

核心问题是Blazor无法自动推断InputNumber的泛型TValue类型为int?，导致ValueChanged的委托类型不匹配，有两种直接修复方式：

方式一：显式指定InputNumber的泛型类型

直接在标签上声明TValue为int?，让框架明确类型匹配关系：

<InputNumber TValue="int?" Value="@model.HouseNr" ValueExpression="@(() => model.HouseNr)" ValueChanged="@HouseNrChanged" />

方式二：将事件处理改为异步方法（符合Blazor设计习惯）

Blazor的EventCallback优先支持异步委托，虽然同步方法理论上可行，但异步写法更贴合框架设计：

protected async Task HouseNrChanged(int? value)
{
    // ... 执行地址查询等逻辑
    model.HouseNr = value;
    await Task.CompletedTask;
}

同时配合上述显式指定泛型类型的写法，确保类型完全匹配。

2. 是否有相关官方文档？ #

Blazor官方表单组件文档明确说明：

• InputNumber是泛型组件，当无法自动推断TValue时必须显式声明
• ValueChanged用于响应值变更，类型为EventCallback<TValue>
• ValueExpression用于提供表达式树，支撑验证和表单状态跟踪

3. ValueExpression 除了引发运行时错误外，还有什么作用？ #

ValueExpression的核心作用是提供属性的表达式树，让Blazor框架能够：

• 解析模型属性的验证特性（如代码中的[Required]），实现字段级验证
• 跟踪表单字段的状态（如是否被修改的"脏状态"），用于表单提交时的状态判断
• 支持@bind-Value语法糖：使用双向绑定语法时，框架会自动生成对应的ValueExpression，无需手动声明

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