JS调用C#

JS调用C#静态方法

cs
1
2
3
4
5
6
7
8
9
10
11
DrawFlow.razor.cs
    
        //依赖注入
        [JSInvokable]
        public static void OpenModal()
        {

            isOpenFlowNode = true; // 打开模态框

            Console.WriteLine("isOpenFlowNode--" + isOpenFlowNode);
        }
plaintext
1
2
3
DrawFlow.razor

@inject IJSRuntime JS

应用程序下\wwwroot\js\flowCenter.js

js
1
2
3
4
5
6
7
8
9
10
11
12
13
flowCenter.js

document.addEventListener('dblclick', function (event) {
    // 检查点击的元素是否是 MDrag 组件
    if (event.target.closest('div.drawflow-node')) {

        console.log("111111111");
        //调用C#的静态方法
        DotNet.invokeMethodAsync('Platform.Blazor', 'OpenModal');
        console.log("222222222");
    }
});

JS调用C#实例方法

cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
DrawFlow.razor.cs
    
    
    
        [JSInvokable]
        public async Task OpenModal()
        {
    

            isOpenFlowNode = true; // 打开模态框

            Console.WriteLine("isOpenFlowNode--" + isOpenFlowNode);
        }


        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
			
            //初始化实例对象，传入JS
            await JS.InvokeVoidAsync("HandleDblClick",
            DotNetObjectReference.Create(this), nameof(OpenModal));
        }

注入IJSRuntime

plaintext
1
2
3
4
DrawFlow.razor

@inject IJSRuntime JS

应用程序下\wwwroot\js\flowCenter.js

js
1
2
3
4
5
6
7
8
flowCenter.js

function HandleDblClick(instance, callback) {

    //调用C#的实例方法
    instance.invokeMethodAsync(callback);
}

C#调用JS

cs
1
2
3
4
5
6
7
8
9
10
11
12
DrawFlow.razor.cs
    
private async Task OnNodeSelectedAsync(string nodeId)
{
    // 调用JS的方法
    await JS.InvokeVoidAsync("removeColorSelectedNode");

    if (_drawflow == null || string.IsNullOrEmpty(nodeId))
    {
        return;
    }
}

注入IJSRuntime

plaintext
1
2
3
4
DrawFlow.razor

@inject IJSRuntime JS

应用程序下\wwwroot\js\flowCenter.js

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
flowCenter.js

let colorArray = new Array(100).fill("");
const color = ['pink', 'cyan', 'green'];

//选中节点变化颜色
function removeColorSelectedNode() {

    // 选择所有包含 'drawflow-node' 的节点
    const nodes = document.querySelectorAll('.drawflow-node');

    nodes.forEach(node => {

        const str = node.id;

        const nodeId = parseInt(str.split('-')[1], 10);

        color.forEach(c => {
            if (node.classList.contains(c))
                colorArray[nodeId] = c;
        });

        // 检查每个节点是否包含 'selected' 类
        if (node.classList.contains('selected')) {
            // 如果存在 'selected'，则删除 'green' 类
            color.forEach(c => {
                node.classList.remove(c);
            });
        }
    });
}