Blazor中InputNumber绑定值无法更新问题求助

1. 检查模型类的属性定义 #

先确认CreateOrderItemRequest的Quantity属性必须有可读写的setter，要是只有getter，绑定根本没法更新值：

// 错误写法：只有getter，值无法被修改
public int Quantity { get; } = 1;

// 正确写法：同时包含get和set
public int Quantity { get; set; } = 1;

2. 确认双向绑定语法是否正确 #

不管用微软原生的InputNumber还是Blazor Bootstrap的NumberInput，都得用双向绑定语法，不能只写单向的Value属性：

微软InputNumber正确用法： #

<InputNumber @bind-Value="OrderItemRequestInput.Quantity" />

要是写成<InputNumber Value="OrderItemRequestInput.Quantity" />，只会显示初始值，UI输入的内容根本同步不到模型里。

Blazor Bootstrap NumberInput正确用法： #

Blazor Bootstrap的NumberInput同样需要用@bind-Value实现双向绑定：

<NumberInput @bind-Value="OrderItemRequestInput.Quantity" Min="1" />

别误用不带@bind-的Value参数，否则输入值不会同步回模型。

3. 提交方法别重新实例化模型 #

要是你的提交方法里不小心重新创建了OrderItemRequestInput实例，那提交的肯定是新对象的初始值1：

// 错误写法：提交时重新new实例，重置了所有值
private async Task HandleSubmit()
{
    var request = new CreateOrderItemRequest();
    // ... 后续提交逻辑
}

// 正确写法：直接用已经绑定好的模型实例
private async Task HandleSubmit()
{
    await _orderService.CreateItemAsync(OrderItemRequestInput);
}

4. 确保模型是组件的成员字段/属性 #

如果OrderItemRequestInput是方法里的局部变量，绑定会直接失效。必须把它定义成组件类的成员：

// 正确：组件类中定义模型
private CreateOrderItemRequest OrderItemRequestInput { get; set; } = new();

// 错误：局部变量无法和UI绑定
private void SomeMethod()
{
    var model = new CreateOrderItemRequest();
}

5. 兜底排查：手动触发状态更新 #

如果前面的都没问题，偶尔会碰到状态更新异常的情况，可以在输入变更时手动调用StateHasChanged()：

<NumberInput @bind-Value="OrderItemRequestInput.Quantity" @oninput="() => StateHasChanged()" />

不过正常情况下Blazor的双向绑定会自动处理状态更新，这一步只作为最后的排查手段。

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