通过 javascript 在 Blazor 中更改输入值不会更改它的绑定属性值

Posted 2023-02-22

【中文标题】通过 javascript 在 Blazor 中更改输入值不会更改它的绑定属性值

【英文标题】：Changing an Input value in Blazor by javascript doesn't change it's binded property value

【发布时间】：2020-07-10 18:26:58

【问题描述】：

我正在使用app.net core 3.1 和blazor 构建一个网站。 在我的一个组件中，我有：

<input @bind="Message" type="text" id="input-message"/>

Message 只是一个字符串属性。

我有 javascript：

document.getElementById('input-message').value = 'some text';

问题是在运行上面的 js 之后，<input> 的值发生了变化，但 Message 的值没有变化，当然如果我在 <input> 中键入或粘贴一些内容，Message 的值也会发生变化。

【参考方案1】：

显然，通过 javascript 更改 <input> 值或 DOM 中的任何其他更改不会更改状态，因此 blazor 不会重新渲染组件。即使在您的剃须刀页面中手动调用StateHasChanged(); 也不起作用。

要完成此操作，您只需触发与用户正常修改 <input> 时发生的相同的 DOM 事件，如下所示：

var myElement = document.getElementById('input-message');
myElement.value = 'some text';
var event = new Event('change');
myElement.dispatchEvent(event);

【讨论】：

这个解决方案还能用吗？我在我的代码中做了完全相同的事情，输入值正在更新，但不是 blazor 中的有界值，组件不会重新渲染。

它还在工作

【参考方案2】：

你不应该直接在javascript中改变输入值，你应该做的是调用一个c#函数来更新值，然后它会更新javascript。

而不是做

document.getElementById('input-message').value = 'some text';

你应该做类似的事情

DotNet.invokeMethodAsync('UpdateMessageValue', 'some text');

你在哪里

public void UpdateMessageValue(string value)
    Message = value;

而且因为你在输入中使用了bind，所以document.getElementById('input-message').value的值会发生变化，c#中的值也会发生变化。

此答案不完整，我将向您传递有关如何执行此操作的想法，而不是解决您的问题的正确代码，但如果您想了解更多关于如何执行此操作的信息，您可以查看Call .NET methods from JavaScript functions in ASP.NET Core Blazor.