c# - Binding Value after Jquery gives Id value - Stack Overflow

admin管理员组

文章数量:1398798

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.

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.

• c#
• jquery
• forms
• asp-core
• blazor

Share Improve this question Follow edited Mar 17 at 7:24 Zhi Lv 22k11 gold badge2727 silver badges3737 bronze badges asked Mar 14 at 9:20 clickjawclickjaw 2111 silver badge22 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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.

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

本文标签： cBinding Value after Jquery gives Id valueStack Overflow