在 ASP.NET Core 站点中实现 Blazor - 组件不在视图中呈现
Posted
技术标签:
【中文标题】在 ASP.NET Core 站点中实现 Blazor - 组件不在视图中呈现【英文标题】：implementing Blazor in an ASP.NET Core site - components don't render in views 【发布时间】：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>
标签没有改变。
【问题讨论】：
【参考方案1】：看起来您正在尝试将 Blazor 组件呈现到 MVC 视图中。据我所知，没那么简单。
您可能希望使用 component 标签助手在 cshtml 视图中呈现 Blazor 组件。
不幸的是，MVC 视图会在服务器上呈现一次，因此您不能像使用常规 Blazor 应用一样简单地输入组件名称。
您可以预渲染组件（它将保持静态），使用服务器端渲染或客户端渲染 (WebAssembly)。这可能有点棘手，因为您将多种渲染样式混合在一起。简而言之，使用
<component type="typeof(MyFirst)" render-mode="ServerPrerendered" />
而不是
<MyFirst />
在写入 cshtml 文件时（MVC 页面/视图）。
结帐render modes 或prerendering
【讨论】：
以上是关于在 ASP.NET Core 站点中实现 Blazor - 组件不在视图中呈现的主要内容，如果未能解决你的问题，请参考以下文章
用"hosting.json"配置ASP.NET Core站点的Hosting环境
用"hosting.json"配置ASP.NET Core站点的Hosting环境
使用 HttpClient 压缩对 asp.net core 2 站点的请求的最佳方法是啥？