0

我正在尝试将 Bootstrap for Material Design 包含到我的 Blazor 服务器端项目中。我让它在纯 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/

4

1 回答 1

0

我通过执行以下操作设法解决了这个问题。

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

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

在 SignUpContak.razor 我添加了：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync("InitializeBootstrapMaterialDesign");            
}
于 2020-08-30T17:52:31.817 回答