Blazor中jQuery为InputText赋值后@bind-value绑定失效求助

DevOps 小满

2026-6-13

问题原因

Blazor的InputText这类表单组件的双向绑定依赖监听DOM的input或change事件来同步值到绑定的.NET变量。当你通过原生JS或jQuery直接修改input元素的value属性时，不会自动触发这些事件，导致Blazor组件无法感知到值的变化，最终保存时绑定的patientFormViewModel.MRN还是初始值（或null）。

解决方案

方案1：手动触发DOM事件通知Blazor

修改你的扫码JS代码，在设置input值后手动触发input事件，让Blazor检测到值变化：

Quagga.onDetected(function (result) {
    console.log("Detected barcode: " + result.codeResult.code);
    
    let MRNbarcodeText = document.getElementById('mrnBarcode');
    const barcodeValue = result.codeResult.code;
    MRNbarcodeText.value = barcodeValue;
    // 手动触发input事件，同步值到Blazor绑定变量
    MRNbarcodeText.dispatchEvent(new Event('input', { bubbles: true }));
    
    $('#barcodeModal').modal('hide');
});

方案2：通过JS互操作直接更新.NET变量（推荐）

这种方式跳过DOM操作，直接和Blazor组件交互，更符合Blazor的组件模型：

在Blazor组件中定义一个可被JS调用的方法：

using Microsoft.JSInterop;

// 组件类中添加
[JSInvokable]
public void UpdateMRN(string barcodeValue)
{
    patientFormViewModel.MRN = barcodeValue;
    StateHasChanged(); // 通知组件更新UI（如果需要同步显示）
}

修改JS代码，调用这个.NET方法：

Quagga.onDetected(function (result) {
    console.log("Detected barcode: " + result.codeResult.code);
    
    // 调用Blazor组件的UpdateMRN方法，替换成你的项目程序集名称
    DotNet.invokeMethodAsync('YourAssemblyName', 'UpdateMRN', result.codeResult.code)
        .then(() => {
            $('#barcodeModal').modal('hide');
        });
});