Blazor two-way bind not detected when is updated from JS

Question

I have a simple two-way binded component:

<input type="text"  id="myInput" bind="@MyVar" />
...
@functions {
    private string MyVar { get; set; } = "foo";

All runs fine when I write text on input box. But, if input value is set from javascript then blazor is no able to detect the changed value.

document.getElementById('myInput').value='Random Value';

I tried to raise some events on element like 'key pressed' and so but the private var MyVar has no changes on blazor client side.

I would like to send back to blazor some values from client, I guess changing value of a hidden input may be solution, but not working.

Answer 1

When you enter a value into the input box an event is raised, and thus Blazor knows of that, and it updates the property ( MyVar ) to which the input box is bound (this is slso how Angular two-way binding works), but when you change the value of the input box from JavaScript, Blazor has no way to know about this occurrence.

But, hey, why would you do such a thing ?

To send data from JavaScript to Blazor, you shoud define a public and static method in Blazor, annotated with the attibute [JSInvokable], and a JavaScript function that calls this method:

[JSInvokable]
public static Task SendMessageAsync(string message)
{
    // Do something with message
}

DotNet.invokeMethodAsync(assemblyName, 'SendMessageAsync', "Hello Blazor");

Read more here: https://blogs.msdn.microsoft.com/webdev/2018/07/25/blazor-0-5-0-experimental-release-now-available/

Answer 2

As Blazor attaches itself to the onchange event you can make this work by triggering the 'onchange'-event on the element after you've set it.

var element = document.getElementById('myInput');
element.value = 'Random Value';
element.dispatchEvent(new Event('change'));  //<--makes Blazor see the change

There is in many cases no need to reinvent everything when you can use existing javascript-libraries.