.NET Razor页面：通过JavaScript更新InputTextArea绑定模型值

当你用JavaScript直接修改<InputTextArea>的DOM内容时，Blazor的双向绑定机制不会自动感知到这个变化，所以绑定的Data.values不会同步更新。可以用下面两种方法解决：

方法1：触发input事件通知Blazor更新 #

修改你的AddValues函数，在插入内容后手动触发input事件，Blazor会监听这个事件来更新绑定的模型值：

function AddValues() {
    // 获取InputTextArea对应的textarea元素
    const textarea = document.querySelector('textarea');
    // 插入硬编码值到文本框
    textarea.value += "----";
    // 触发input事件，通知Blazor更新绑定值
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
}

这样修改后，Blazor会捕获到input事件，自动把文本框的最新值同步到Data.values里，提交表单时就能拿到更新后的值了。

方法2：通过JS互操作直接更新.NET模型 #

如果不想操作DOM，也可以直接通过JS调用.NET方法来更新模型：

首先在Razor页面的代码块中添加可被JS调用的方法：

[JSInvokable]
public void UpdateValues(string addContent)
{
    Data.values += addContent;
    StateHasChanged(); // 通知组件重新渲染，同步UI
}

然后修改AddValues函数，调用上面的.NET方法：

function AddValues() {
    const addText = "----";
    // 替换为你的项目程序集名称（一般就是项目名）
    DotNet.invokeMethodAsync('你的程序集名称', 'UpdateValues', addText);
}

这种方式直接操作模型，Blazor会自动同步UI内容，不需要手动修改DOM。

两种方法里，第一种更适合简单的DOM修改场景，第二种适合需要复杂逻辑或不想操作DOM的情况。

内容的提问来源于stack exchange，提问作者Dev Developer