為什么我的 blazor.server.js 之后加載不了任何 js？

Question

所以我注意到在我的 _Host.cshtml 文件中，我在</body>標記之前有這個腳本

 <script src="_framework/blazor.server.js"></script>

而且我還有一些腳本應該在這些腳本之后加載

    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
    <script src="assets/plugins/popper/popper.js"></script>
    <script src="assets/plugins/feather/feather.min.js"></script>

    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/plugins/typeahead/typeahead.js"></script>
    <script src="assets/plugins/typeahead/typeahead-active.js"></script>
    <script src="assets/plugins/pace/pace.min.js"></script>
    <script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="assets/plugins/highlight/highlight.min.js"></script>

    <!-- Articles Script -->
    <script src="assets/plugins/dataTable/datatables.min.js"></script>
        <script src="assets/plugins/summernote/summernote.min.js"></script>
        <script src="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
    <!-- Required Script -->
    <script src="assets/js/app.js"></script>
    <script src="assets/js/avesta.js"></script>
    <script src="assets/js/avesta-customizer.js"></script>

</body>

但是，如果我在頂部有 blazor.js 腳本，我的菜單將無法正常運行，它將停止工作並看起來像這樣。 我實際上點擊了很多，它沒有動畫，如你所見。

但是，如果我把 blazor.server.js 腳本放在最后加載，它工作得很好，看起來像這樣

但是如果我最后加載它，我會在我的控制台中得到它

這導致我無法做到這一點

<input @bind="@CurrentValue" @oninput="@((e) => { CurrentValue=(string)e.Value;})" @onkeypress="KeyPress" class="form-control" type="text" placeholder="Search" aria-label="Search">

它根本沒有擊中 function，沒有任何反應，它沒有注冊它。

Answer 1

使用 Net5，您現在可以通過覆蓋OnAfterRenderAsync在主布局上引用您的腳本。 這是一個例子

您將首先繼承 IJSRuntime

@inject IJSRuntime JSRuntime 

然后是代碼：

@code {        
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/assets/plugins/jquery/jquery.min.js");
        }
    }
}

Answer 2

如果可能的話，你們能否分享屏幕截圖或展示如何在項目中添加 JavaScript 庫參考以使其工作以及在哪里（例如MainLayout.razor或_Host.cshtml ）以及你們添加Z5475ZBD.437B748072DC437B748072

我嘗試了兩種方法，在標簽之前的 _Host.cshtml 文件中添加 JavaScript 引用，如下所示。 但它沒有奏效。

 <script src="~/_framework/blazor.server.js"></script> <script src="~/plugins/global/plugins.bundle.js"></script> <script src="~/plugins/custom/prismjs/prismjs.bundle.js"></script> <script src="~/js/scripts.bundle.js"></script> <script src="~/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script> <script src="~/js/custom/widgets.js"></script> <script src="~/js/pages/custom/wizard/wizard-5.js"></script>

然后我按照您在 MainLayout.razor 頁面下的最后評論中的建議添加了，即使那沒有用。 對於 MainLayout，請參閱以下內容（在這種情況下，如果我檢查頁面元素，它不會在頁面標簽中顯示任何 JavaScript 參考。

 @code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeAsync<IJSObjectReference>("import", "_framework/blazor.server.js"); await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/plugins/global/plugins.bundle.js"); await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/plugins/custom/prismjs/prismjs.bundle.js"); await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts.bundle.js"); await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/plugins/custom/fullcalendar/fullcalendar.bundle.js"); await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/pages/widgets.js"); await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/pages/custom/wizard/wizard-5.js"); } } }

注意：我也嘗試在庫路徑之前使用 ~/ 或 / or../ ，但對我沒有用。

Answer 3

這不是一個完整的解決方案（至少對我而言），因為它會導致各種賽車狀況 - 但似乎我正走在解決這個問題的正確道路上 - 希望在未來十年內的某個時間。

似乎這樣做的更好方法之一是禁用blazor.server|webassembly.js鏈接上的autostart ，然后通過將 JS 文件導入添加為元素來添加它們。

<script src="_framework/blazor.server.js" autostart="false"></script>

在此之后，在您的 blazor 導入下方創建一個，並將您的元素導入頁面。 在加載 Blazor 后，您將看到它們被添加到頁面中。 對不起，臟代碼，它是 WIP，我還在試驗。

<script>
    Blazor.start().then(function () {

        var customScript = document.createElement('script');
        customScript.setAttribute('src', 'assets/plugins/global/plugins.bundle.js');
        document.body.appendChild(customScript);
        
        var anotherScript = document.createElement('script');
        anotherScript.setAttribute('src', 'assets/js/scripts.bundle.js');
        document.body.appendChild(anotherScript);
    });
</script>

如果不添加autostart="false"屬性，您會在控制台中看到一條錯誤消息，說 Blazor 已經啟動。

我的理解是await JSRuntime.InvokeAsync<Iblah>("import", "blah.js"); 適用於 Razor 組件，但如果我錯了，請糾正我。 如果有人想知道，我正在使用 Metronic，這並不重要。