BootstrapBlazor与JS互调

记录

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

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

方式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实现
步骤大概是这样

1. 写好JS脚本放在wwwroot/js/下
2. index.html需要引入这个自定义的JS脚本
3. 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()
    {
        // 清理逻辑（如有）
    }
}

这里jsfunc1,jsfunc2对应的是JS脚本里的自定义函数,JSHandler是C#侧自定义操作JS的类
END