Blazor布局组件作为MVC Razor页面布局

Question

对于登录、注册页面，我正在使用MVC .cshtml视图。我有一个Blazor组件作为我的Blazor页面布局，并希望将其应用于mvc页面，避免重复布局。

这是否可能？如果不行，有什么解决方案呢？

非常感谢您的帮助和解决方案。

- farhang67

Answer 1

这在与MVC一起使用Razor组件的文档中有详细介绍。简单来说，您不需要使用Blazor样式的布局，而是通过_Host.cshtml利用您的MVC布局，并在其中加载可路由的Razor组件。

- Chris Pratt

---

我有一个类似的问题。无论我使用哪个选项，将一个新的Scaffolded Razor Page（CRUD）添加到我的Blazor应用程序中，数据表都是可见的，但页面完全没有格式。想知道如何从Blazor应用程序继承Scaffolded Razor Page（CRUD）的布局，就像为一个新的Razor组件那样。 - undefined

Answer 2

Chris指导我们参考文档（谢谢你，Chris！）。对于那些仍然希望在MVC或Razor页面项目中尝试使用Blazor样式布局的人，请按照Chris指出的文档中的所有说明操作，您可以获得如下视图：

以上内容是使用 Blazor 布局组件 (CustomLayout1.razor) 渲染的：

@inherits LayoutComponentBase

<div class="container-fluid border border-primary p-3">
    <p>CustomLayout1</p>
    <div class="container-fluid border border-danger p-3">
        @Body
    </div>
</div>

以及一个可路由的 Blazor 组件，该组件使用自定义布局 (LayoutTest_Body.razor)：

@page "/test"
@layout Views.Shared.CustomLayout1

<p>LayoutTest_Body</p>

作为嵌套布局的样例，我添加了另一个 Blazor 布局组件 (CustomLayout2.razor)，它被嵌入到 CustomLayout1 中：

@inherits LayoutComponentBase
@layout Views.Shared.CustomLayout1

<div class="container-fluid border border-warning p-3">
    <p>CustomLayout2</p>
    <div class="container-fluid border border-info p-3">
        @Body
    </div>
</div>

并将LayoutTest_Body.razor的@layout从CustomLayout1更改为CustomLayout2：

@page "/test"
@layout Views.Shared.CustomLayout2

<p>LayoutTest_Body</p>

获取：

请注意：

1. Blazor布局只能应用于可路由组件（参见doc），例如LayoutTest_Body.razor，其第一行包含@page指令，后跟唯一的路由字符串。
2. 以上示例基于AspNetCore5.0。
3. 仅显示MVC图像，但与Razor页面相同，除了在Chris指出的文档中描述的配置和设置方面存在一些差异。请注意遵循所有说明。
4. 通常情况下，Visual Studio提供的模板不一定遵循Microsoft文档所示的方式（例如文档：app.MapBlazorHub();，模板：app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); });）。
5. 通过App.razor可以传递参数到布局。对于MVC项目，（i）创建参数数据，并让public IActionResult Blazor()通过ViewBag将其传递给_Host.cshtml，（ii）让_Host.cshtml通过设置param-[paramname]="@ViewBag.xxxx"将参数数据传递给App.razor，（iii）在App.razor接收参数，然后作为传递给子代，最后（iv）让任何子代将其作为使用。在本文发布时，不允许将非可序列化参数传递给Blazor组件，但创建一个字典以进行布局设置，并以JSON格式传递它，可以是各种布局的集中管理的一种解决方案。

- Ryo