Blazor 服务器应用程序 JavaScript 库不工作（Metronic 模板）

Question

我有 Blazor 服务器端应用程序，其中我为 Metronic Bootstrap 模板添加了 JavaScript 和 CSS 库。

当我运行应用程序时，模板已完全加载，但 JavaScript 没有响应。

例如，当我单击侧面菜单（箭头图标）或展开列表，或单击用户配置文件下拉菜单时，所有这些部分都不起作用。

但是，当我注释掉该行时，Blazor 服务器库 ( blazor.server.js) 模板开始工作，但其他 Blazor 组件无法正常工作（例如计数器）。

在_Host.cshtml文件Head部分添加了以下 CSS 引用：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />    
<link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />

在Body部分中添加了以下 JavaScript 参考。

<script src="_framework/blazor.server.js"></script>
<script src="./assets/plugins/global/plugins.bundle.js"></script>
<script src="./assets/js/scripts.bundle.js"></script>
<script src="./assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
<script src="./assets/js/custom/widgets.js"></script>
<script src="./assets/js/custom/apps/chat/chat.js"></script>
<script src="./assets/js/custom/modals/create-app.js"></script>
<script src="./assets/js/custom/modals/upgrade-plan.js"></script>

我也尝试了以下方法，但没有任何效果。看起来 Blazor 服务器应用程序在这些 JavaScript 文件加载到 DOM 之前正在渲染。我如何加载这些脚本并使其正常工作。任何帮助将非常感激。

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start().then(function () {
        var customScript = document.createElement('script');
        customScript.setAttribute('src', scriptURLs);
        document.head.appendChild(customScript);
    });

    const scriptURLs = [
        "./assets/plugins/global/plugins.bundle.js",
        "./assets/js/scripts.bundle.js",
        "./assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
        "./assets/js/custom/widgets.js",
        "./assets/js/custom/apps/chat/chat.js",
        "./assets/js/custom/modals/create-app.js",
        "./assets/js/custom/modals/upgrade-plan.js",
        // ...
    ];
</script>

在我的MainLayout.razor

@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime

<div class="d-flex flex-column flex-root">
    <div class="page d-flex flex-row flex-column-fluid">
        <MainSidebar />
        <div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
            <MainHeader />
            @Body
            <MainFooter />
        </div>
    </div>
</div>

Answer 1

只需添加以下内容：

<script>
            function InitMetronicScript() {
                $.getScript('theme/assets/plugins/global/plugins.bundle.js');
                $.getScript('theme/assets/js/scripts.bundle.js');
                $.getScript('theme/assets/js/custom/widgets.js');
</script>
    

到您的 _Host.cshtml 文件

并调用它

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

在你的 Layout.razor 中，它应该可以正常工作。