Blazor 服務器端，在呈現時從 .razor 頁面調用駐留在 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 調用之后的標記中。

我的問題是在 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");            
}