无法获取由 Javascript 设置的输入值，然后由 Blazor 按钮单击读取

Question

Inside a .NET 5 blazor application I use a javascript library for barcode reading. When I press a button on blazor page I call javascript function. Javascript function reads the barcode and sets value of an input field.

There is an input field bound to string value:

<input id="result" @bind="@Received"/>

@code { private string Received { get; set; } }

A button click calls javascript function:

public async Task Start()
{
    await JSRuntime.InvokeVoidAsync("startBarcodeReader");
}

Javascript function sets value of input field:

document.getElementById('result').value = "Barcode Value";

Everything works as I expected and I see barcode value on my screen. I would like to use Received when I click another button. However bound value is null. It is not set.

public async Task Add()
{
    // Received is null
    await Task.CompletedTask;
}

If I manually type something into input field then value of Received variable is set. It seems that binding is not set bound variable unless focus is lost.

How can I get the value I see in input field? I tried to use oninout event of inout field and did not work.

Answer 1

As a rule, your JS code should not interfere in any way with the rendering and bounding features of Blazor. Thus, you cannot assign a value to an input field in JavaScript and expect this value to pass to the bounding variable Received . This can never occur. How can Blazor know that the value of the input field has changed? Is there any event listener attached to the input field that is to notify Blazor that a value has been entered. None.

Solution: Pass the value to a Blazor method in which you can update the variable Received ... After that the component will re-render, and the input field will show the same value inside it, but this time it is done by the rendering and bounding features of Blazor.

Note: You can employ DotNetObjectReference to call your JavaScript, passing it a reference to a C# object that defines a method to receive the value of the barcode when called from JavaScript.