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

Question

我正试图将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调用之后的标记中。

我的问题是在引导中的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.chtml中，我添加了：

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

在SignUpContak.rarzor上，我添加了：

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