jQuery后的结合值给出ID值

Question

 <InputText class="form-control form-control-lg" id="mrnBarcode" placeholder="Type or scan MRN" @bind-value="patientFormViewModel.MRN" required />
 <button class="btn btn-primary" type="button" value="mrn" data-bs-toggle="modal" data-bs-target="#barcodeModal">Scan MRN</button>

  Quagga.onDetected(function (result) {

      console.log("Detected barcode: " + result.codeResult.code);



          let MRNbarcodeText = document.getElementById('mrnBarcode');
          a = result.codeResult.code;
          MRNbarcodeText.value = a;
         
          $('#barcodeModal').modal('hide');

  });

在MVC中，没有问题来绑定该值。当用户进入字段时，它会绑定值。当字符串从jQuery函数中填充在字段中时，该值不会绑定。 我使用Quagga扫描仪读取条形码并将值返回输入文本字段。它非常简单，在MVC中起作用，但我们移植到了大火，现在该值没有绑定。

中，在读取条形码后，正确的条形码值在正确的字段中填充，但在保存时不会发生绑定。它为值返回null。
    

Blazor的 @bind-value依赖于双向数据绑定，这不会自动通过JavaScript或jQuery识别对DOM进行的更改。当您使用jQuery（mrnbarcodetext.value = a;）设置元素的值时，没有通知此更改。结果， @bind-value =“ dateryformviewmodel.mrn”和输入之间的绑定未更新。

dotnet.invokemethodasync允许JavaScript在您的Blazor Project中调用.NET方法。

要解决此问题，您需要明确通知大火。这是您可以解决的方法：

上您的剃须刀

[JSInvokable]
public void UpdateMRN(string newMRN)
{
    patientFormViewModel.MRN = newMRN;

    // Optionally trigger UI updates manually, if needed
    StateHasChanged();
}

Answer 1

Quagga.onDetected(function (result) {
    console.log("Detected barcode: " + result.codeResult.code);

    let MRNbarcodeText = document.getElementById('mrnBarcode');
    let a = result.codeResult.code;

    // Update the input value
    MRNbarcodeText.value = a;

    // Notify Blazor about the change
    DotNet.invokeMethodAsync('YourBlazorProjectNamespace', 'UpdateMRN', a);

    // Hide the modal
    $('#barcodeModal').modal('hide');
});