Question

所以我通常使用这个主题，它是一个包含所有文件的文件夹，例如资产，html页面等。

如果我从那里开始索引页，然后单击一个菜单项，wen可以清楚地看到动画效果很好。

但是，一旦我添加了该页面使用的相同CSS和JS，它便开始起作用。

您看不到它，但是我单击了每个项目，并且该菜单未设置动画。它还缺少一些图标，如果您将两者进行比较，则可以看到它们。

现在这很有趣。如果我将渲染模式更改为static而不是此处的ServerPrerendered，则可以正常工作

<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>

它显然可以找到一些，因为它保持了相同的通用样式，并且当我使用前面提到的“静态”渲染它时，它工作得很好。几乎就像渲染速度太快了。

我在哪里出错了？

Answer 1

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

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

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

了解更多信息here

使用Blazor时，为什么我的JavaScript无法正确渲染？

1 个答案: