C#：从HTML调用的JS函数调用JS静态方法--为什么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

举几个例子。我也尝试过通过第二个参数洗牌名字。

这是怎么回事？我遗漏了什么？

请忽略静态方法中的实例属性。我有办法解决这个问题，但不想把帖子弄得乱七八糟。

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“。

第二个参数必须是方法名。

<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方法中被击中。

​

​

谢谢