当前位置：首页 > news >正文

BootstrapBlazor与JS互调

news 2025/7/12 12:58:20

记录

这个框架目前JS的调用要成功实现

用它提供的JSRuntime扩展
用非常复杂的原生实现的方式

方式1

参考JSRuntime扩展的描述
首先

[Inject]
[NotNull]
private IJSRuntime? JSRuntime { get; set; }[NotNull]
private JSModule? Module { get; set; }protected override async Task OnAfterRenderAsync(bool firstRender)
{await base.OnAfterRenderAsync(firstRender);if (firstRender){Module = await JSRuntime.LoadUtility();}
}

然后，注意，这个鸟玩意需要将JS代码以字符串的形式写到C#里，我试了好像只能固定的以一个字符串的形式写死，直接读取JS脚本文件成字符串进来也不行。然后如果需要传参，需要注意转移字符的问题。
用的是这个接口，Function接口,它有支持传入参数的功能，我是弄了半天也没明白怎么用，就是不起作用，例子也没有说这个传参是怎么操作的。
在这里插入图片描述

譬如，我下面的这段代码，我希望操作页面中的的链接元素，实现某个功能

    private async Task SetHrefEnableAsync(string name,bool flg){string selector = @"'a.nav-link[href*=""name""]'";string enable = flg.ToString().ToLower();if(Module!=null){await Module.Function($@"const links = document.querySelectorAll({selector});links.forEach(link => {{if ({enable}) {{console.log('启用逻辑')}} else {{console.log('禁用逻辑')}}}});");}}

这个需要自己解决转移字符的问题，注意加$@来处理转移字符，并且将涉及到的花括号双倍写，然后将自己传入参数的变量名zi
跑出来。

方式2

原生Blazor实现
步骤大概是这样

写好JS脚本放在wwwroot/js/下
index.html需要引入这个自定义的JS脚本
Blazor组件这边,给个参考范例,参考这样写

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable@code {private IJSObjectReference? _jsModule;private DotNetObjectReference<JSHandler>? _dotnetHelper;protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){_dotnetHelper = DotNetObjectReference.Create(this);_jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/xxx.js"); // 对应 JS 文件路径await _jsModule.InvokeVoidAsync("jsfunc2", _dotnetHelper);}}public async ValueTask DisposeAsync(){if (_jsModule != null){await _jsModule.InvokeVoidAsync("jsfunc1");await _jsModule.DisposeAsync();}_dotnetHelper?.Dispose();}
}// JSHandler.cs
public class JSHandler: IDisposable
{private readonly Func<Task> _x;public JSHandler(Func<Task> x){_x = x;}// 被 JavaScript 调用的方法[JSInvokable]public async Task JsCallDotnetFunc(){await _x.Invoke();}// 释放资源public void Dispose(){// 清理逻辑（如有）}
}