【问题标题】:Blazor - Multiples area - custom _Hostm.cshtmlBlazor - 倍数区域 - 自定义 _Hostm.cshtml
【发布时间】:2020-08-12 21:39:30
【问题描述】:

我有一个 Blazor 应用程序,其中包含这样的区域:

  • 页数
    • _Host.cshtml
    • index.razor
  • 区域
    • 产品
    • 页数
      • _HostAdmin.cshtml
      • admin.razor

我需要为每个区域自定义 _Host.cshtml,包含自定义 javascript、css 等...

我尝试使用多个 MapFallbackToPage 和 MapFallbackToAreaPage,但没有一个工作! 而且我在任何地方都找不到这样的样本!

任何解决这个问题的想法,我有几个问题:

1) 我应该使用 MapFallbackToPage 还是 MapFallbackToAreaPage 以及如何使用? 2) 在 _HostAdmin.cshtml 我应该有

PS:我曾尝试请求 MS 帮助,但没有机会: https://github.com/dotnet/aspnetcore/issues/21574

【问题讨论】:

  • 在您的项目中,您有 2 种不同类型的代码,1:.cshtml,您可以使用嵌套布局,并且在每个布局中您可以引用自定义脚本和样式,2:.razor 文件,您可以使用嵌套布局,但遗憾的是您不能在 .razor 中引用脚本,但考虑到对于 .rzaor 文件,您只有一个 _Host.cshtml 是根布局。
  • 是的,问题是我只有一个_Host.cshtml,我不能在_Host.cshtml里面嵌套布局,对吧?
  • 您可以在 _Host.cshtml 中嵌套布局,因为它是一个 .cshtml 文件,例如您可以创建一个布局树 _Host.cshtml(parent) > _Host1.cshtml(child1) , _Host2.cshtml (child2)然后在你的剃刀布局中,你可以从你想要的每个 .cshtml 布局继承
  • 谢谢,但是 .razor 布局如何从 _Host1.cshtml 或 _Host2.cstml 继承? @layout 指令请求一个类,而不是一个 cshtml !
  • 在 startup.cs 我们路由到所需的 .cshtml 布局,如 endpoints.MapFallbackToPage("/_Host2");您可以添加其他路线

标签: asp.net-core blazor area


【解决方案1】:

文件结构解决方案

  • 页数
    • _Host.cshtml
    • index.razor
  • 区域
    • 管理员
      • 页数
        • _HostAdmin.cshtml
        • admin.razor

页面 /admin/admin 和 /admin/admin/123 - 其他使用默认方案

endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToAreaPage("/Admin/admin", "/_HostAdmin", "Admin");
endpoints.MapFallbackToAreaPage("/Admin/admin/{Id:long}", "/_HostAdmin", "Admin");
endpoints.MapFallbackToPage("/_Host");

或对于 /Admin/ 中的所有页面

endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToAreaPage("/Admin/{*clientroutes:nonfile}", "/_HostAdmin", "Admin");
endpoints.MapFallbackToPage("/_Host");

_hostAdmin.cshtml

@page "/admin/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_layoutAdministration";
}
<component type="typeof(AdminApp)" render-mode="ServerPrerendered" />

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">?</a>
</div>

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2015-11-09
  • 2013-03-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-06
相关资源
最近更新 更多