在 ASP.NET Core 站点中实现 Blazor - 组件不在视图中呈现答案

【问题标题】：implementing Blazor in an ASP.NET Core site - components don't render in views在 ASP.NET Core 站点中实现 Blazor - 组件不在视图中呈现
【发布时间】：2021-09-23 04:26:05
【问题描述】：

我已按照本文中的每一步操作：https://waelkdouh.medium.com/integrating-blazor-components-into-existing-asp-net-core-mvc-applications-b1a2aec4ac1f

我在 Components/Pages 文件夹中创建了一个名为 MyFirst.razor 的文件，但在 Index.cshtml 中以 . 引用时它不会呈现。

Components.Pages/MyFirst.razor

 @page "/my-first"

<h3>Current count: @count</h3>

@code {
    private int count = 0;

    private void HandleClick()
    {
        count++;
    }
}

Views/Home/Index.cshtml

@using LC.BlazorTest.Components.Pages
   
<h1>Velkommen - blaze up</h1>

<MyFirst />

索引页面来源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<meta content="width=device-width, initial-scale=1.0" name="viewport" />

<title>BlazorBlazor</title>

<link href="/IMAGE/fav-icon.png" rel="icon" type="text/CSS" />

<link href="/STYLE/Creator/Creator.css" rel="stylesheet" type="text/CSS" />


</head>
<body>
    <main role="main" class="pb-3">
        


<h1>Velkommen - blaze up</h1>

<MyFirst />

    </main>

    <script crossorigin="anonymous" src="/SCRIPT/Creator/Creator.js" type="application/JAVASCRIPT"></script>

<script crossorigin="anonymous" src="https://kit.fontawesome.com/c237ba9e1f.js" type="application/JAVASCRIPT"></script>



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

    
</body>
</html>

标签没有改变。

【问题讨论】：

标签： c# asp.net-mvc asp.net-core blazor

【解决方案1】：

看起来您正在尝试将 Blazor 组件呈现到 MVC 视图中。据我所知，没那么简单。

您可能希望使用 component 标签助手在 cshtml 视图中呈现 Blazor 组件。

不幸的是，MVC 视图会在服务器上呈现一次，因此您不能像使用常规 Blazor 应用一样简单地输入组件名称。

您可以预渲染组件（它将保持静态），使用服务器端渲染或客户端渲染 (WebAssembly)。这可能有点棘手，因为您将多种渲染样式混合在一起。简而言之，使用

<component type="typeof(MyFirst)" render-mode="ServerPrerendered" />

而不是

<MyFirst />

在写入 cshtml 文件时（MVC 页面/视图）。

结帐render modes 或prerendering

【讨论】：