除 Body 之外的 Blazor 页面元素

Question

我有一个 Blazor 服务器端应用程序，试图了解其结构。在 MainLayout.razor 页面中，我看到了标签 @Body，这是每个页面内容的呈现位置。

我想知道，是否可以向 mainLayout 页面添加额外的渲染元素？例如，@Header 部分。而且我更愿意在每个单独的页面中定义这个部分。

换句话说，对于每个页面，除了主要内容之外，还需要定义Header、Footer，或者我在MainLayout中定义的任何渲染元素。这样，我可以自定义每个页面唯一的页眉/页脚元素。

谢谢你的帮助。

Answer 1

MainLayout.razor

注意：使用一种方法来更新渲染片段字段，我特意将其设为私有，然后调用StateHasChanged(). 可以轻松创建其他方法来清除或设置其他字段。

@inherits LayoutComponentBase

<CascadingValue Value="this">
    <div class="page">
        <div class="sidebar">
            <NavMenu />
        </div>
        <div class="main">
            <div class="top-row px-4">
                @header
            </div>

            <div class="content px-4">
                @Body
                @footer
            </div>
        </div>
    </div>
</CascadingValue>

@code {
    private RenderFragment header;
    private RenderFragment footer;

    public void SetHeaderAndFooter(RenderFragment header, RenderFragment footer)
    {
        this.header = header;
        this.footer = footer;
        StateHasChanged();
    }
}

LayoutSetter.cs

public class LayoutSetter : ComponentBase
{
    [CascadingParameter]
    public MainLayout Layout { get; set; }

    [Parameter]
    public RenderFragment Header { get; set; }

    [Parameter]
    public RenderFragment Footer { get; set; }

    protected override void OnInitialized()
    {
        Layout.SetHeaderAndFooter(Header, Footer);
    }
}

在任何页面...

@page "/"

<h1>Hello, world!</h1>

<LayoutSetter>
    <Header>
        Hello
    </Header>
    <Footer>
        Goodbye
    </Footer>
</LayoutSetter>