对于登录、注册页面,我正在使用MVC .cshtml视图。我有一个Blazor组件作为我的Blazor页面布局,并希望将其应用于mvc页面,避免重复布局。
这是否可能?如果不行,有什么解决方案呢?
非常感谢您的帮助和解决方案。
对于登录、注册页面,我正在使用MVC .cshtml视图。我有一个Blazor组件作为我的Blazor页面布局,并希望将其应用于mvc页面,避免重复布局。
这是否可能?如果不行,有什么解决方案呢?
非常感谢您的帮助和解决方案。
这在与MVC一起使用Razor组件的文档中有详细介绍。简单来说,您不需要使用Blazor样式的布局,而是通过_Host.cshtml
利用您的MVC布局,并在其中加载可路由的Razor组件。
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>
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>
获取:
请注意:LayoutTest_Body.razor
,其第一行包含@page
指令,后跟唯一的路由字符串。app.MapBlazorHub();
,模板:app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); });
)。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格式传递它,可以是各种布局的集中管理的一种解决方案。