BlazorServer中C#与JavaScript的相互调用

BlazorServer中C#与JavaScript的相互调用

前言：

​ 虽然BlazorServer中推荐使用C#在razor页面中的替代JavaScript来完成逻辑的编写，但当需要使用第三方的javascript文件/组件里的内容时，则难免要在C#中调用其方法或对象。反之当你的(用到第三方组件的)Javascript代码想要和后台交互时，则需要调用C#的代码。好在BlazorServer中这两种通信都是支持的。下面将介绍其具体的实现方式。

🌮一.C#调用JavaScript方法

Blazor提供了IJSRuntime组件来提供与JavaScript的交互。

🍎 BlazorServer启动时就已经创建了IJSRuntime的实例,所以你可以直接使用构造方法注入

public class CustomService
{
   
    private readonly IJSRuntime _runtime;

    public CustomService(IJSRuntime runtime)
    {
   
        _runtime = runtime;
    }
}

🍌在razor页面（组件）中也是直接获取即可

page "/mytest"
    
<!--直接使用@inject标签获取即可-->
@inject IJSRuntime runtime 

<h3>MyTest</h3>

1.调取公用函数

page "/mytest"
    
<!--直接使用@inject标签获取即可-->
@inject IJSRuntime runtime 

<h3>MyTest</h3>

<button type="button" @onclick="DoNothing">点击</button>

@code {
   

    public void DoNothing()
    {
   
        await runtime.InvokeVoidAsync("alert",new object[1] {
    "FUCKYOU" }); //无返回值
        //runtime.InvokeAsync<>();   有返回值
    }
}

测试结果：

2.调取外部JavaScript函数

上面的只单独调用公共函数的时候不多，大多数时候需要从别的地方获取。调用方法如下

现有一自定义js文件如下（TestScript.js）

function WhatTheHell() {
   
    alert("WTF"