Blazor：从HTML onclick调用的JS函数中调用C＃静态方法-为什么JS无法找到该方法？

Question

在Blazor组件内部，我想从锚标记的HTML onclick事件中调用JS方法，因此：

<a onclick="window.LoadImage();" class="@CssClass">@DisplayName</a> 

我的JS方法是：

window.LoadImage = () => {
    DotNet.invokeMethodAsync('MyProject', 'FireEvent').then();
}

在JS方法中，我想触发C＃静态方法来触发事件，因此：

[JSInvokable]
public static void FireEvent()
{
   StateEngine.LoadImage(DisplayName, Target);
}
[Parameter]
public string DisplayName { get; set; }
[Parameter]
public string Target { get; set; }

我无法通过JS方法找到C＃方法。我为第一个参数尝试了多种名称配置，例如

MyProject (the assembly name)
MyProject.FolderName.ComponentName
FolderName.ComponentName
ComponentName

仅举几例。我还尝试通过第二个参数对名称进行改组。

这应该如何工作？我想念什么？

P.S。请忽略静态方法中有关实例属性的内容。我对此有一种解决方法，但不想使帖子混乱。

Answer 1

从外观上看，最好使用参考JSInterop，以便可以访问组件属性。

剃刀

@inject IJSRuntime JS
@implements IDisposable

 <a @onclick=Clicked>Click here</a>

@code
{
  private DotNetObjecctReference ObjRef;

  [JSInvokable]
  public void FireEvent()
  {
     StateEngine.LoadImage(DisplayName, Target);
  }

  private Task Clicked()
  {
    return JS.InvokeVoidAsync("window.LoadImage", ObjRef);
  }

  protected override Task OnInitializedAsync()
  {
    ObjRef = DotNetObjectReference.Create(this);
  }

  void IDisposable.Dispose()
  {
    ObjRef.Dispose();
  }
}

JS

window.LoadImage = (dotNetObject) => {
    dotNetObject.invokeMethod('FireEvent');
}

Answer 2

您的代码看起来不错。可能是无法找到您的.Net方法。请重试。

JS

window.LoadImage = function () {
DotNet.invokeMethodAsync("MyBlazorProject.UI", "FireEvent").then();}

第一个参数必须是Blazor组件的AssemblyName。就我而言，它是“ MyBlazorProject.UI”。
第二个参数必须是方法名称。

HTML

<a onclick="window.LoadImage()" class="btn btn-primary">Call .Net Method FireEvent</a>

这里的onclick是JavaScript事件，对您来说也很不错。

C＃代码

[JSInvokable]
public static void FireEvent()
{
    //debugger hits here
    //StateEngine.LoadImage(DisplayName, Target);
}

这一切对我都很好。单击锚标记后，调试器在FireEvent .Net方法中被命中。

谢谢