Blazor Server如何在特定页面而非全站隐藏侧边栏与顶部栏

步骤1：创建导航隐藏控制特性 #

新建HideNavigationAttribute.cs类文件，代码如下：

[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
public class HideNavigationAttribute : Attribute
{
}

步骤2：修改MainLayout.razor全局布局文件 #

修改默认的MainLayout.razor文件，根据当前页面是否标记了上述特性，动态控制导航元素的渲染和内容区域样式：

@inherits LayoutComponentBase
@using System.Reflection

<!-- 仅在不需要隐藏时渲染侧边栏 -->
@if (!_hideNavigationElements)
{
    <div class="sidebar">
        <NavMenu />
    </div>
}

<div class="main">
    <!-- 仅在不需要隐藏时渲染顶部栏 -->
    @if (!_hideNavigationElements)
    {
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
    }

    <!-- 内容区域动态切换样式 -->
    <div class="@(_hideNavigationElements ? "full-screen-content" : "content px-4")">
        @Body
    </div>
</div>

@code {
    [CascadingParameter]
    public RouteData RouteData { get; set; }

    private bool _hideNavigationElements = false;

    protected override void OnParametersSet()
    {
        // 判断当前页面是否标记了HideNavigation特性
        _hideNavigationElements = RouteData.PageType
            .GetCustomAttribute<HideNavigationAttribute>() != null;
        base.OnParametersSet();
    }
}

步骤3：添加全屏内容样式 #

在wwwroot/css/site.css中添加全屏内容的配套样式，覆盖默认布局的边距限制：

.full-screen-content {
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto;
}
/* 适配桌面端侧边栏隐藏后的偏移问题 */
@media (min-width: 768px) {
    .full-screen-content {
        margin-left: 0 !important;
    }
}

步骤4：在目标页面启用隐藏逻辑 #

在需要隐藏侧边栏和顶部栏的页面顶部，添加对应的特性标记即可：

@page "/fullscreen-page"
@attribute [HideNavigation]

<!-- 你的页面内容 -->
<h1>全屏内容页面</h1>

注意：如果你的页面使用了Bootstrap固定宽度的container类，替换为container-fluid即可实现内容横向占满全屏。

内容的提问来源于stack exchange，提问作者Ronakßе