Blazor WebAssembly JSInvokable Binding - 如何更新屏幕？

Question

我有一种情况，我在页面上监听 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 中显示并更新了一个变量。

我做错了吗？

谢谢

Answer 1

尝试使用：

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

这样做：

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

Blazor WebAssembly JSInvokable Binding - 如何更新屏幕？

Blazor WebAssembly JSInvokable Binding - how to update screen?

blazor

blazor-webassembly