Blazor Server应用中JS修改input值后绑定字段未同步更新问题

Blazor的双向绑定依赖你指定的触发事件来同步DOM值和后台绑定字段。你给输入框绑定的触发事件是onchange，但通过JavaScript直接修改DOM的value属性不会自动触发该事件，Blazor无法感知到值发生了变更，因此后台绑定的searchPoint字段仍保留旧值。

• 方案1：JS修改值后手动触发绑定事件（最快修复）
  在原有JS赋值逻辑后新增一行触发change事件的代码即可，完整JS代码如下：

const searchInput = document.getElementById("SearchPoint");
searchInput.value = pos.coords.latitude + ', ' + pos.coords.longitude;
// 手动触发change事件通知Blazor同步值
searchInput.dispatchEvent(new Event('change'));

如果你后续修改@bind:event为oninput，则需要把上述代码的事件名改为input。

• 方案2：通过JS互操作直接更新C#字段（更符合Blazor设计规范）
  不需要直接操作DOM，通过Blazor原生的JS互操作能力直接更新绑定字段：

1. 在Blazor组件中定义可被JS调用的更新方法：

private string searchPoint;

[JSInvokable]
public void UpdateSearchPoint(string coordinate)
{
    searchPoint = coordinate;
    StateHasChanged();
}

2. JS侧直接调用该方法完成赋值：

const coordinate = `${pos.coords.latitude}, ${pos.coords.longitude}`;
// 替换为你实际的项目程序集名称
DotNet.invokeMethodAsync('你的程序集名称', 'UpdateSearchPoint', coordinate);

内容的提问来源于stack exchange，提问作者Krzysztof Krysztofczyk