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

【问题标题】：Blazor two-way bind not detected when is updated from JS从 JS 更新时未检测到 Blazor 双向绑定
【发布时间】：2019-01-15 20:16:55
【问题描述】：

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

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

当我在输入框上写文本时，一切运行良好。但是，如果输入值是从 javascript 设置的，则 blazor 无法检测到更改的值。

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

我尝试在元素上引发一些事件，例如“按下键”等，但私有 var MyVar 在 blazor 客户端没有任何变化。

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

【问题讨论】：

我相信它不打算那样工作，你为什么想要这个？
您好@flores 先生，感谢您的评论，请参阅 Isaac 的回答下方对您的评论的回答。谢谢！

标签： javascript blazor

【解决方案1】：

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

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

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

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

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

【讨论】：

但是，嘿，你为什么要这样做呢？ 因为我有一个复杂的树视图控件，我想向 blazor 发送“扩展”和“选定”节点事件职能。我不能调用静态方法，我想调用有状态的代码。您知道您可以将方法绑定到“onClick”。但是我无法将方法绑定到“onNodeSelected”或“onNodeExpanded”，然后我认为具有绑定值的隐藏输入可以充当代理（使用 js 我在引发树事件时更改输入隐藏值）
我不确定我是否完全理解您的评论。无论如何，您也可以调用实例方法。你的这个treeview控件，我猜它是用JavaScript写的，不是吗？如果是这样，我的拙见是您应该将其转换为 Blazor：组件、事件等。这是要走的路。否则，使用 Blazor 是没有意义的。
嗨，Issac，您将 JS 控件转换为 Blazor 是正确的，这就是方式。你知道我可以举一些“复杂”的控制吗？（这个看起来不错：medium.freecodecamp.org/…）
嗨 danni，这里是如何在 Blazor 中创建级联 DropDownList 的链接：mikesdotnetting.com/article/320/… 在我看来，你提到的那个不是推荐的。这里还有一个复杂组件的链接，您可能会发现它非常有用：github.com/stavroskasidis/BlazorContextMenu 另请参阅：github.com/aspnet/samples/tree/master/samples/aspnetcore/blazor github.com/BlazorExtensions blazor.net/community.html blazor.net/docs/get-started.html
嗨，艾萨克，非常感谢您的帮助。正如你所建议的，我改变了视角并将控制转换为 blazor。结果如下：github.com/ctrl-alt-d/BlazorServerTree

【解决方案2】：

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

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

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

【讨论】：