Blazor JSInterop 静态与实例 C# 方法

Question

有人可以让我知道静态方法如何使用 JS 互操作从 JavaScript 调用 C# 方法吗？

如果我在引用该组件中的对象的组件的代码部分中有一个静态方法，并且页面上有该组件的多个实例，所有实例都会受到该方法调用的影响吗？

或者更糟的是，这是否会在我的服务器上充当单例，导致对该组件的每个客户端实例进行更新？

我目前正在开发一个录音系统，它循环播放文本中标记的短语，每当 JavaScript 在媒体流中检测到 5 帧静音时，我想调用一个 C# 方法来突出显示通过更改其 CSS class.

的下一段文本

Answer 1

如果你想改变组件中的一些样式，你肯定不想使用静态方法。因为静态方法 无法与组件实例交互 - 因为您不能在静态方法中使用 this 关键字。

我认为您首先要做的是，在 C# 端，在您的组件 C# 代码中创建一个经典方法。例如创建：

public void ChangeStyle() 
{
     this.ClassToDisplay = DoSomeManipulation();
}

然后，JS需要组件的实例。所以你可以这样做：（我使用 OnAfterRenderAsync 因为它显示在 Microsoft 文档中，但目标是执行一次）

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        DotNetObjectReference<MyComponent>? dotNetHelper = DotNetObjectReference.Create(this);
        await JS.InvokeVoidAsync("JSFile.setDotNetHelper", dotNetHelper);
    }
}

然后在JS端，需要setDotNetHelper方法，内容如下：

class JSFile
{
    static dotNetHelper;

    static setDotNetHelper(value)
    {
        JSFile.dotNetHelper = value;
    }
}

现在你已经准备好了，你可以随时调用组件的 ChangeStyle 方法。为此，请在 JS 中使用此指令：

await dotNetHelper.invokeMethodAsync('ChangeStyle');

瞧瞧。我可以澄清或提问，祝你好运！

// 迪伦

Blazor JSInterop 静态与实例 C# 方法

Blazor JSInterop static vs instance C# methods

c#

blazor

blazor-jsinterop