无法呈现 Blazor 组件

Posted 2023-03-27

【中文标题】无法呈现 Blazor 组件

【英文标题】：Can't render blazor component

【发布时间】：2020-01-04 02:27:09

【问题描述】：

使用 Visual Studio 2019 预览版 2.0、.NET 核心 SDK 3.0.100-preview8-013656。服务器端 Blazor 应用程序。

The blazor docs 表示渲染组件的方式是调用html.RenderComponentAsync。我在任何地方都找不到这个静态的 Html 类。 在 SDK 目录中，当我查看 Microsoft.AspNetCore.Components.dll 内部时，我看到它有一个带有这种方法的 HtmlRenderer 类，但它不是静态的。 当我查看 AspNetCore 源代码时，我在命名空间 Microsoft.AspNetCore.Mvc.Rendering 中看到了一个 HtmlHelperComponentExtensions 类

MVC？我很困惑。我使用的是最新的 SDK，文档是不是太旧了？

如果我尝试直接导航到我的组件的路由，我只会将 (await Html.RenderComponentAsync()) 直接写入我的文档以及控制台的 signalR 异常。

【参考方案1】：

当我查看 AspNetCore 源代码时，我看到了一个 命名空间中的 HtmlHelperComponentExtensions 类 Microsoft.AspNetCore.Mvc.Rendering

MVC？我很困惑。我正在使用最新的 SDK，只是文档 老了？

不，文档不旧... Html.RenderComponentAsync 不是 Blazor。 Blazor 没有 Html 助手的概念，它的文件扩展名要么是 .razor，用于组件文件，要么是 .cs，用于普通类。

@(await Html.RenderComponentAsync<Counter>(new  IncrementAmount = 10 )) 

上面的代码使用了 Html 辅助方法 RenderComponentAsync 渲染嵌入在 MVC 应用程序中的名为 Counter 的组件，将值 10 传递给其 IncrementAmount 属性。

如果您选择服务器端 Blazor 应用程序，则会在 Pages 文件夹中为您创建一个名为 _Host.cshtml 的文件。此文件包含方法 RenderComponentAsync，其类型说明符为 App，它是 Blazor 应用程序的根元素，因此会预渲染整个应用程序。

要做： 请务必安装 Visual Studio 2019 的最新预览版： .NET Core 3.0 Preview 8 需要 Visual Studio 2019 16.3 Preview 2 或更高版本

要安装最新的 Blazor WebAssembly 模板，还需要运行以下命令：dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview8.19405.7

您应该选择 Blazor Server App（服务器端 Blazor），然后一切准备就绪。您无需添加任何其他内容。

【讨论】：

您为我指明了正确的方向 (_Host.cshtml)。当我在那里关注源代码时，它会将我带到 Microsoft.AspNetCore.Mvc.ViewFeatures 中的方法（更多 MVC，它仍然让我感到困惑）。而且我仍然无法从我的Index.razor 中引用Html.RenderStaticComponentAsync，即使我拥有它与文档完全一样。但我想这是一个单独的问题。

再一次，Html.RenderStaticComponentAsync 不是 Blazor。 Blazor 没有 Html 助手的概念。 Html 助手用于 MVC 和 Razor 页面。 _Host.cshtml 是 Razor 文件，而不是 Blazor 文件。因此，如果您想使用 Html.RenderStaticComponentAsync 来启用预渲染，您应该在 .cshtml 扩展文件中使用它。不，你“不能从我的 Index.razor 中引用 Html.RenderStaticComponentAsync。”但是您可以从 .cshtml 扩展文件中引用 Html.RenderStaticComponentAsync 。我知道，这很令人困惑，而且确实需要一些学习努力。

既然如此，那就太令人困惑了。 “Html.RenderStaticComponentAsync 不是 Blazor：”它在 blazor 文档中。 “您可以从 .cshtml 扩展文件中引用 Html.RenderStaticComponentAsync：”这是呈现组件的文档化方式，当我将新组件添加到 blazor 项目时，我会得到一个 .razor 文件。

【参考方案2】：

问题是你想错误地使用 Html.RenderComponentAsync 是为什么它不起作用，你可能无法从这个开始。您的实际问题是您想在另一个 razer 组件或 blazer 页面中显示一个 Razer 组件，以防完整的 blazer 应用程序。此时，解决方案是，而不是这样做

@(await Html.RenderComponentAsync<Counter>(new  IncrementAmount = 10 )) 

就这样做

\<Counter IncrementAmount = 10/>