Blazor Two-way Bind Not Detected When Is Updated From JS

I have a simple two-way binded component: ... @functions { private string MyVar { get; set; } = 'foo'; All runs fine wh

Solution 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/

Solution 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.