在布局页面中加载 Razor 组件答案

【问题标题】：Load Razor Component in Layout Page在布局页面中加载 Razor 组件
【发布时间】：2020-12-04 18:06:15
【问题描述】：

我有一个 Blazor WebAssembly 托管应用程序。我的意图是对一些站点使用 Server，对其余部分使用 WebAssembly 页面，以便它们可以离线运行。

我有一个关于服务器端的简单问题。

我有以下：
Pages/_Layout.cshtml
页面/索引.cshtml
页面/组件\MyComponent.razor

/Pages/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <base href="~/" />  
</head>
<body>
    <div>
        The Layout Header
        WHAT MAGIC GOES HERE TO INSERT MyComponent.razor
    </div>
    <div class="m-2">
        @RenderBody()
    </div>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

/Pages/Index.cshtml

@page
@model MyApp.Server.Pages.IndexModel
@{
}

<h1>Index Page</h1>

/Pages/Components/MyComponent.razor

<h3>My Component</h3>

我的输出是：

布局标题

索引页

我想要：

布局标题

我的组件

索引页

如何将 razor 组件添加到我的 _Layout.cshtml 页面？

【问题讨论】：

标签： razor blazor

【解决方案1】：

您的 _Layout.cshtml page 是 Razor Pages 页面，对吗？因此，您可以使用组件 Html 标记在 Razor Pages 页面中呈现 Blzor 组件，如下所示：

<div>
        The Layout Header
        WHAT MAGIC GOES HERE TO INSERT MyComponent.razor
        <component type="typeof(MyComponent)" render- 
             mode="ServerPrerendered" />
</div>

请注意，以上要求您设置一些配置才能使其工作。

【讨论】：

哦，天哪！使用的是 mode="Server"，而不是 mode="ServerPrerendered"。谢谢！！！