Blazor WebAssembly JSInvokable 绑定 - 如何更新屏幕？答案

【问题标题】：Blazor WebAssembly JSInvokable Binding - how to update screen?Blazor WebAssembly JSInvokable 绑定 - 如何更新屏幕？
【发布时间】：2021-04-15 01:33:04
【问题描述】：

我有一种情况，我正在页面上的 JS 中监听滚动事件，当滚动事件被触发时，它会调用一个 C# 方法，该方法是 JSInvokable 来将当前滚动位置存储在一个变量中。

我希望能够在页面更改时在页面上显示此值（主要用于开发）。但是 JSInvokable 方法正确存储了值但是双向绑定没有更新。

下面是一个伪例子：

<div>Current Scroll Position: @scrollPosition.ToString()</div>


@code{

long scrollPosition = 0;

[JSInvokable("OnScroll")]
public void OnScroll(string index)
{
    int.TryParse(index, out var topIndex);
    scrollPosition = topIndex;
}
}

我希望当从调用 JSInvokable 方法的 JS 更新 scrollPosition 变量时，它也会更新 DOM 条目。

我意识到我可以通过 JS 完成这一切，但只是想尝试以绑定为例。我没有为此使用任何输入字段，而只是在 DOM 中显示并更新了一个变量。

我做错了吗？

谢谢

【问题讨论】：

属性声明不需要代码块开头的@。即：长滚动位置 = 0；如果这不能排序，您也可以尝试添加 StateHasChanged();设置后 ScrollPosition = topIndex;
谢谢你，尼尔，是的，开头的 @ 是这篇文章中的一个错字，它不在代码中。但是，添加 StateHasChanged() 确实（几乎）解决了这个问题。它在我向下滚动页面时起作用，DOM 正在更改并显示新的滚动位置，直到我导航到另一个页面然后再次返回此页面。然后它停止更新 DOM，即使我可以看到变量正在使用 Console.WriteLine 进行更改......有什么想法吗？非常感谢您的回答。
所以，你是说如果你离开然后回来，你会看到方法 OnScroll 的控制台输出（组件中的代码，而不是 javascript），你正在更新变量 scrollPosition ?这很奇怪。使用更完整版本的实际代码而不是伪代码来更新您的问题可能会更好，尤其是您要覆盖的所有组件生命周期事件。

标签： blazor blazor-webassembly

【解决方案1】：

尝试使用：

InvokeAsync(() => { StateHasChanged(); });

这样做：

[JSInvokable("OnScroll")]
public async Task OnScroll(string index)
{
    int.TryParse(index, out var topIndex);
    scrollPosition = topIndex;
    await InvokeAsync(() => { StateHasChanged(); });
 
}

【讨论】：

嘿@enet。对于我自己的学习，您认为为什么这会解决它？
我认为它现在正在工作，有等待和没有等待版本的 StatehasChanged。不知道为什么它现在可以工作 - 我重构了一些代码，它现在可以工作了。但感谢大家对此的帮助。我对 Blazor 非常陌生，这是一个学习曲线，就像所有新开发人员一样。再次感谢
它使用异步任务或 void 方式工作。这就是我在评论中想要说的——“有或没有等待版本”。很抱歉没有投票等我被我的编码赶上了回来做这件事。现在已经完成了。再次抱歉礼节不好，这不是我的本意。
没关系。很高兴您解决了问题