Question

我正在尝试将材料设计的Bootstrap包含到我的Blazor Server Side项目中。我可以在纯HTML文件中完美地工作，但是Blazor的问题与脚本有关。我认为需要在呈现页面后运行。该脚本从CDN调用一个函数。

<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>

我已经在_Hostcshtml的标记中添加了CDN，并验证了在编译系统时可以正确调用它。

有问题的函数（在表单输入字段上进行验证）是

<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>

在纯HTML文件中，此调用仅在CDN调用之后的标记中。

我的问题是在Bootstrap的OnAfterRenderAsync中正确调用.bootstrapMaterialDesign。

当前代码，显然是错误的：

@page "/signUpContak"

@layout SignUpLayout @inject IJSRuntime JSRuntime;

....

@code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) await     JSRuntime.InvokeAsync<>("bootstrapMaterialDesign"); } }

我希望这是有道理的。 Bootstrap Material Design的实现文档位于https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/

Answer 1

我通过以下操作设法解决了该问题。

在我的_host.cshtml中，我添加了：

function InitializeBootstrapMaterialDesign() {
        $(document).ready(function () 
    {$('body').bootstrapMaterialDesign(); });
}

然后在SignUpContak.razor上添加：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync("InitializeBootstrapMaterialDesign");            
}

Blazor服务器端，在呈现时从.razor页面调用驻留在CDN中的JavaScript函数

1 个答案: