Blazor JsRuntime

在Blazor中，IJSRuntime 是一个接口，它允许我们在C#代码中调用JavaScript函数。这在需要与浏览器的JavaScript API交互时特别有用，比如访问DOM元素、调用浏览器功能或执行其他客户端脚本。

以下是一个简单的Blazor使用IJSRuntime的例子，C#代码调用一个JavaScript函数来弹出一个警告框：

首先，在Blazor组件中注入IJSRuntime实例。这通常通过构造函数注入完成。

@page "/jsinterop"  
@rendermode @(new InteractiveServerRenderMode(prerender: true))
@inject IJSRuntime JSRuntime  
  
<button @onclick="ShowAlert">Show Alert</button>  
  
@code {  
    private async Task ShowAlert()  
    {  
        await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!");  
    }  
}

在上面的代码中，我们创建了一个按钮，并给它绑定了一个点击事件处理器ShowAlert。当按钮被点击时，ShowAlert方法会被调用，并通过JSRuntime的InvokeVoidAsync方法调用JavaScript的alert函数。

在实际应用中，我们可能需要编写自己的JavaScript函数并在Blazor中调用它们。所以我们需要在App.razor或者目标razor文件中引入JavaScript文件。

这里我们创建一个名为 myScript.js 的JavaScript文件，并将其放在 wwwroot/js 文件夹下：

window.myFunctions = {  
    showPrompt: function (message) {  
        return prompt(message, 'Type something');  
    }  
};

然后，在 IJSRuntimeExample.razor 中引入这个JavaScript文件：

<script src="js/myScript.js"></script>

现在，在Blazor组件中调用这个自定义的JavaScript函数：

@page "/jsinterop"
@rendermode @(new InteractiveServerRenderMode(prerender: true))
@inject IJSRuntime JSRuntime

<script src="js/myScript.js"></script>

<button @onclick="ShowPrompt">Show Prompt</button>
<p>Message: @Message</p>

@code {
    private string Message{ get; set; }

    private async Task ShowPrompt()
    {
        var result = await JSRuntime.InvokeAsync<string>("myFunctions.showPrompt", "Hello from Blazor with custom JS!");
        Message=result;
    }
}

在这个例子中，我们定义了一个按钮，当点击时调用ShowPrompt方法。这个方法使用JSRuntime的InvokeAsync方法来调用myFunctions.showPrompt函数，并接收用户输入的字符串作为返回结果。
InvokeAsync用于调用返回值的JavaScript函数，而InvokeVoidAsync用于调用不返回值的函数。

示例代码

IJSRuntimeExample.razor
myScript.js