c# - Blazor:从 HTML onclick 调用的 JS 函数调用 C# 静态方法——为什么 JS 找不到该方法？

Question

在 Blazor 组件中，我想从 anchor 标记的 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

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

这应该如何运作？我错过了什么？

附言请忽略静态方法中有关实例属性的部分。我有一个解决方法，但不想让帖子变得困惑。

Answer 1

从外观上看，您最好使用引用 JSInterop，这样您就可以访问组件属性。

Razor

@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');
}