从 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 中获取剃须刀页面的实例？

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

如果无法获取 razor 组件的实例，还有其他方法可以注册我的滚动事件吗？

Answer 1

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

@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(_ => { });
        }
    })     
   }
};