3

在 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

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

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

PS请忽略静态方法中有关实例属性的位。我有一个解决方法，但不想弄乱帖子。

4

2 回答 2

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');
}
于 2020-06-03T03:11:34.737 回答
0

你的代码看起来不错。可能是它无法找到您的 .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 方法中被击中。

输出

谢谢

于 2020-06-03T03:58:27.803 回答