因此,我注意到在我的_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">
它根本就没有命中函数,什么都没有发生,它没有注册它。
4条答案
按热度按时间b1zrtrql1#
使用Net5,您现在可以通过覆盖
OnAfterRenderAsync
引用主布局上的脚本.这里有一个例子你将首先继承日本帝国陆军
下面是代码:
l7mqbcuq2#
如果可能的话,你们能分享一下屏幕截图吗?或者展示一下你们是如何在项目中添加JavaScript库引用的,让它工作的。MainLayout.razor或**_Host.cshtml**)也是你们添加blazor.server.js的地方
我尝试了两种方法,在_Host.cshtml文件中的标记之前添加JavaScript引用,如下所示。但是没有用。
然后我添加了你在MainLayout.razor页面下的最后评论中建议的内容,即使这样也没有效果。对于MainLayout,请参阅以下内容(在这种情况下,如果我检查页面元素,它不会在页面标签中显示任何JavaScript引用。
**注意:**我也试过在库路径之前使用~/或/或../,但对我不起作用。
carvr3hs3#
这不是一个完整的解决方案(至少对我来说还没有),因为它导致了各种各样的比赛条件-但似乎我正在解决这个问题的正确道路上-希望在未来十年内的某个时候。
似乎更好的方法之一是禁用
blazor.server|webassembly.js
上的autostart
链接,然后通过将它们添加为元素来添加JS文件导入。在此之后,在blazor导入下面创建一个,并将您的元素导入页面。在Blazor加载后,您将看到它们被添加到页面中。请原谅这些肮脏的代码,它是免费的,我还在实验中。
如果不添加
autostart="false"
属性,您将在控制台中看到一条错误消息,提示Blazor已经启动。我的理解是,
await JSRuntime.InvokeAsync<Iblah>("import", "blah.js");
是为Razor组件设计的,但如果我错了,请纠正我。如果有人想知道,我用的是Metronic,这并不重要。ovfsdjhp4#
使用
.net 7
,您可以在您想要使用的blazor组件的代码部分下引用OnAfterRenderAsync
中的JS
。例如:假设你想在index组件下调用
script.js
JS,那么你需要在index组件的@code
部分添加以下代码;其中
assets/js/script.js
是wwwroot
文件夹中的文件位置。