如何通过JavaScript更新Blazor EditForm的InputNumber字段？

我懂你碰到的这个坑了——直接用JS改了InputNumber对应的DOM值后，后台的form.age始终是null，这其实是Blazor组件的工作机制导致的，咱们一步步来搞定它：

问题根源 #

Blazor的InputNumber这类表单组件，可不是直接和DOM元素做双向绑定的。它内部自己维护着状态，只有当组件感知到用户交互（比如输入、触发change事件），或者绑定的模型值主动更新时，才会同步DOM和模型。你直接用jQuery修改DOM的value，Blazor完全没收到通知，自然不会更新form.age。

解决方案一：直接通过JS互操作更新Blazor模型（推荐） #

这种方式更贴合Blazor的组件设计思路，绕开DOM直接更新后台模型：

1. Blazor端代码修改：

<EditForm Model="@form" OnValidSubmit="@(async () => await HandleValidationAsync())">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label>Age</label>
        <InputNumber class="form-control" id="age" placeholder="0.0" @bind-Value="@form.age" readonly></InputNumber>
    </div>
    <button class="button blue" type="button" @onclick="@GetAge">Get</button>
</EditForm>

@code{
    private FormModel form = new FormModel();

    private async Task GetAge() {
        // 把当前组件的引用传给JS
        await jsRun.InvokeVoidAsync("onAgeSelected", DotNetObjectReference.Create(this), 15);
    }

    // 标记为可被JS调用的方法
    [JSInvokable]
    public void UpdateAge(int age) {
        form.age = age;
        StateHasChanged(); // 通知组件刷新UI和状态
    }

    public class FormModel {
        public int? age { get; set; }
    }

    private async Task HandleValidationAsync() {
        // 你的提交逻辑
    }
}

2. JS端代码修改：

window.onAgeSelected= (dotNetRef, data) => {
    // 调用Blazor组件里的UpdateAge方法更新模型
    dotNetRef.invokeMethodAsync('UpdateAge', data);
};

解决方案二：手动触发DOM的change事件（适合必须操作DOM的场景） #

如果你一定要通过修改DOM来实现，那得手动触发change事件，让Blazor的InputNumber组件感知到值的变化：

修改你的JS代码：

window.onAgeSelected= (data) => {
    const ageInput = document.getElementById('age');
    ageInput.value = data;
    // 手动触发change事件，让Blazor捕获到值变化
    ageInput.dispatchEvent(new Event('change', { bubbles: true }));
    // 用jQuery的话也可以这么写：
    // $("#age").val(data).trigger('change');
    return true;
};

注意：哪怕InputNumber设置了readonly，手动触发change事件依然能让Blazor识别到值的变化。

小提示 #

尽量优先用第一种方案，直接操作模型更符合Blazor的组件化思想，能避免DOM操作和组件状态不同步的各种问题。

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