asp.net 为什么我不能在blazor.server.js之后加载任何js?

5cg8jx4n  于 2023-10-21  发布在  .NET
关注(0)|答案(4)|浏览(172)

因此,我注意到在我的_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">

它根本就没有命中函数,什么都没有发生,它没有注册它。

b1zrtrql

b1zrtrql1#

使用Net5,您现在可以通过覆盖OnAfterRenderAsync引用主布局上的脚本.这里有一个例子
你将首先继承日本帝国陆军

@inject IJSRuntime JSRuntime

下面是代码:

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

l7mqbcuq2#

如果可能的话,你们能分享一下屏幕截图吗?或者展示一下你们是如何在项目中添加JavaScript库引用的,让它工作的。MainLayout.razor或**_Host.cshtml**)也是你们添加blazor.server.js的地方
我尝试了两种方法,在_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");
        }
    }
}

**注意:**我也试过在库路径之前使用~/或/或../,但对我不起作用。

carvr3hs

carvr3hs3#

这不是一个完整的解决方案(至少对我来说还没有),因为它导致了各种各样的比赛条件-但似乎我正在解决这个问题的正确道路上-希望在未来十年内的某个时候。
似乎更好的方法之一是禁用blazor.server|webassembly.js上的autostart链接,然后通过将它们添加为元素来添加JS文件导入。

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

在此之后,在blazor导入下面创建一个,并将您的元素导入页面。在Blazor加载后,您将看到它们被添加到页面中。请原谅这些肮脏的代码,它是免费的,我还在实验中。

<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,这并不重要。

ovfsdjhp

ovfsdjhp4#

使用.net 7,您可以在您想要使用的blazor组件的代码部分下引用OnAfterRenderAsync中的JS
例如:假设你想在index组件下调用script.js JS,那么你需要在index组件的@code部分添加以下代码;

@inject IJSRuntime JS

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./assets/js/script.js");
        
    }
}

其中assets/js/script.jswwwroot文件夹中的文件位置。

相关问题