Binding Value after Jquery gives Id value

Question

I have a jQuery function that is giving an id a value in my <EditForm>. This value is populating in my <InputText> but when saved doesn't bind to the variable(ex @bind-value="patientModel.Foo").

 <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');

  });

In MVC there is no issue binding the value. When a user enters text into the field it binds the value. The value doesn't bind when a string is populated in the field from a jQuery function.

I'm using Quagga scanner to read a barcode and return a value to an input text field. It's fairly simple and works in MVC but we ported to Blazor and now the value doesn't bind.

In the modal, after the barcode is read, the correct barcode value is populated in the correct field but on save the binding doesn't occur. It returns null for the value.

Answer 1

I found an answer.

MRNbarcodeText.dispatchEvent(new Event('change'));

I didn't know I had to let my razor page know that information had changed on the page. This isn't the case in MVC.

Answer 2

Blazor maintains representations of the DOM and interacts directly with DOM objects. If an element rendered by Blazor is modified externally using JS directly or via JS Interop, the DOM may no longer match Blazor's internal representation, which can result in undefined behavior.

So, if you use jQuery to set the value of a form field in an ASP.NET Core Blazor application, Blazor does not automatically detect changes made via jQuery or JavaScript. You need to notify Blazor of the change so that it updates the bound property.

More detail information see:

ASP.NET Core Blazor JavaScript interoperability (JS interop)

Call .NET methods from JavaScript functions in ASP.NET Core Blazor

Call JavaScript functions from .NET methods in ASP.NET Core Blazor