为什么在blazor.server.js之后无法加载任何js?

问题描述

所以我注意到在_Host.cshtml文件中，我在</body> 标记

So I noticed that in my _Host.cshtml file I have this script before the </body> tag

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

还有一些脚本，应该在这些脚本之后加载

And I also have some scripts that are suppose to load after that which are these

    <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脚本，那么我的菜单将无法正常工作，它将停止工作并看起来像这样.我实际上点击了很多，并且您没有看到动画.

However, if I have the blazor.js script at the top, my menu won't act normal, it will stop working and look like this.I'm actually clicking a lot and it's not animating as you can see.

但是，如果我将blazor.server.js脚本放在底部以最后加载，它就可以正常工作并且看起来像这样

However if I put the blazor.server.js script at the bottom to load last, it works just fine and looks like this

但是如果我最后加载它，我会在控制台中得到它

But then if I load it last, I get this in my console

这导致我无法执行此操作

which results in my not being able to do this

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

它根本没有命中该功能，什么也没有发生，也没有注册它.

It just doesn't hit the function at all, nothing happens, it doesnt register it.

推荐答案

使用Net5，您现在可以通过覆盖 OnAfterRenderAsync 在主布局上引用脚本.这是一个例子

Using the Net5, You can now reference your scripts on the main layout by overriding the OnAfterRenderAsync. Here is an example

您将首先继承IJSRuntime

You will first inherit 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");
        }
    }
}

这篇关于为什么在blazor.server.js之后无法加载任何js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！