从 JS 更新时未检测到 Blazor 双向绑定

Question

我有一个简单的双向绑定组件：

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

当我在输入框上写文字时一切正常。但是，如果输入值是从 javascript 设置的，则 Blazor 无法检测到更改后的值。

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

我尝试在 'key pressed' 等元素上引发一些事件，但是私有变量 MyVar 在 blazor 客户端没有任何变化。

我想从客户端发回 blazor 一些值，我想改变隐藏输入的值可能是解决方案，但不起作用。

Answer 1

当您在输入框中输入一个值时，会引发一个事件，因此 Blazor 知道这一点，并更新输入框绑定到的属性 ( MyVar )（这也是如何Angular 双向绑定有效），但是当您将输入框的值从 JavaScript 更改时，Blazor 无法知道这种情况。

但是，嘿，你为什么要这样做？

要将数据从 JavaScript 发送到 Blazor，您应该在 Blazor 中定义一个 public 和静态方法，用属性 [JSInvokable] 注释，以及一个 JavaScript 调用的函数这个方法：

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

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

在此处阅读更多内容：https://blogs.msdn.microsoft.com/webdev/2018/07/25/blazor-0-5-0-experimental-release-now-available/

Answer 2

由于 Blazor 将自身附加到 onchange 事件，您可以通过在设置元素后触发元素上的 'onchange' 事件来完成这项工作。

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

在许多情况下，当您可以使用现有的 javascript-库时，无需重新发明一切。

从 JS 更新时未检测到 Blazor 双向绑定

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

javascript

blazor