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。请忽略静态方法中有关实例属性的部分。我有一个解决方法，但不想弄乱 post.

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

谢谢

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

Blazor: Invoking C# static method from JS function called from HTML onclick--why can't the JS find the method?

c#

blazor

blazor-jsinterop