在 ASP.NET 核心网站中实现 Blazor - 组件不会在视图中呈现



我已经完成了本文中的每一步:https://waelkdouh.medium.com/integrating-blazor-components-into-existing-asp-net-core-mvc-applications-b1a2aec4ac1f

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

组件。Pages/MyFirst.rarzor

@page "/my-first"
<h3>Current count: @count</h3>
@code {
private int count = 0;
private void HandleClick()
{
count++;
}
}

视图/主页/索引.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>

标签没有改变。

看起来您正试图将Blazor组件呈现到MVC视图中。据我所知,事情并没有那么简单。

您可能希望使用component标记辅助对象在cshtml视图中呈现Blazor组件。

不幸的是,MVC视图在服务器上只呈现一次,所以你不能像普通的Blazor应用程序那样简单地输入一个组件名称。

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

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

而不是

<MyFirst />

在cshtml文件(MVC页面/视图(中进行编写时。

签出渲染模式或预渲染

最新更新