从 JavaScript 调用 .razor 页面中的实例方法

Question

我的主要目标是每当用户滚动到页面底部时调用 C# 方法。我寻找单独使用 blazor 的解决方案，但找不到。

因此，我使用 jQuery 注册滚动事件，然后使用 JSInvokable 调用 C# 方法。

jQuery 代码：

<script>
    //Used to register scroll event.
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            DotNet.invokeMethodAsync('Blazor-Example', 'OnScroll');
        }
    });
</script>

.Net 代码（在 .razor 页面中）：

@code {
  //This is called from jquery
  [JSInvokable("OnScroll")]
  public static void OnScroll()
  {
    //TODO: How to get hold of the razor component instance?
  }
}

这工作正常，但我想在 .razor 页面中调用实例方法，而不是静态方法。

换句话说：如何从 JavaScript 获取 razor 页面的实例？

我尝试使用在 OnInitialized() 期间设置的类型的静态实例__generated__[Name_of_the_razor_page]，但随后我的代码无法编译且不显示任何错误。

如果无法获取剃刀组件的实例，是否有其他方法来注册我的滚动事件？

Answer 1

您需要将 a 发送DotNetObjectReference到您的 javascript 并使用此引用来调用您的回调：

@inject IJSRuntime jsRuntime
...
@code {
  protected override void OnInitialized()
  {
     jsRuntime.InvokeVoidAsync("scroll.init", DotNetObjectReference.Create(this))
  }
  //This is called from jquery
  [JSInvokable("OnScroll")]
  public void OnScroll()
  {
    //TODO: How to get hold of the razor component instance?
  }
}

window.scroll = {
   init: dotnetHelper => {
      $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            dotnetHelper.invokeMethodAsync('OnScroll')
               .then(_ => { });
        }
    })     
   }
};