javascript - 为什么我的 JavaScript 在使用 Blazor 时不能正确呈现?

标签 javascript c# html blazor blazor-server-side

所以我有这个我经常使用的主题,它是一个包含所有文件的文件夹,例如 Assets 、html 页面等。

如果我从那里启动索引页面并单击菜单项,我们可以清楚地看到动画完美运行。 enter image description here

但是,一旦我添加了该页面使用的相同 CSS 和 JS,它就会开始运行。

enter image description here

您看不到它,但我正在单击每个项目,它不会使菜单动画化。 它还缺少一些图标,如果您比较两者,您可以看到这些图标。

现在有趣的是.. 如果我将渲染模式更改为 static 而不是 ServerPrerendered here

,它会完美地工作
<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

但如果我这样做,我们就会遇到这个问题..

Rendering server components from a static HTML page isn't supported.

我添加 HTML 的方式是这样做的。我进入 _Host.cshtml 文件并在标签的顶部像这样

<!DOCTYPE html>
<html lang="en">
<head>
...
    <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />
    <link href="assets/css/site.css" rel="stylesheet" />


    <!-- Articles CSS -->
    <link type="text/css" rel="stylesheet" href="assets/plugins/dataTable/datatables.min.css">
    <link type="text/css" rel="stylesheet" href="assets/plugins/summernote/summernote.min.css">
    <link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
    <!-- Main CSS -->
    <link type="text/css" rel="stylesheet" href="assets/css/style.css" />

对于 JS 文件也是如此,但我是在标签之前这样做的......

<script src="_framework/blazor.server.js"></script>
<!-- Footer 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>

而且它显然可以找到其中的一些,因为它保持相同的一般样式,并且当我像我之前提到的那样使用“静态”渲染它时,它工作得很好。就好像它渲染的速度太快了。

我哪里做错了?

最佳答案

我认为现在使用 Net5 更容易实现这一点。您可以将此 JavaScript 模块作为静态 Web Assets (wwwroot/exampleJsInterop.js) 添加到您的 .NET 库中,然后使用 IJSRuntime 服务将该模块导入到您的 .NET 代码中:

await jsRuntime.InvokeAsync<JSObjectReference>("import", "./_content/MyComponents/exampleJsInterop.js");

“导入”标识符是专门用于导入 JavaScript 模块的特殊标识符。您使用其稳定的静态 Web Assets 路径指定模块:_content/[LIBRARY NAME]/[WWWROOT 下的路径]。

了解更多 here

关于javascript - 为什么我的 JavaScript 在使用 Blazor 时不能正确呈现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62374995/

相关文章:

c# - 使用 LINQ 对列表进行排序,除了一个条目

javascript - 如何将 Controller 添加到指令中?

javascript - Ajax - 库或纯 Javascript

javascript - KoJs : bind a dynamic number of text boxes to elements of an array

c# - 如何刷新 gridview 以加载另一个具有不同条件的表

c# - 总是在 C# 中四舍五入一个值

javascript - 使用 getElementsByTagName 从 div 检索值

java - java if 语句帮助

html - 更改为 Wordpress 图像插入的 HTML

javascript - 如何使用复选框的值来隐藏具有相应 ID 的 div?