正文以外的Blazor页面元素

问题描述

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

I have a Blazor server-side app, trying to understand the structure. Inside the MainLayout.razor page, I see the tag @Body, and this is where each page's content is rendered.

我想知道，是否可以向mainLayout页面添加其他渲染元素?例如，@ Header节.而且，我也希望在每个单独的页面中定义此部分.

I am wondering, is it possible to add additional render element to the mainLayout page? For example, a @Header section. And I would prefer to define this section inside each individual page as well.

换句话说，对于每个页面，除了主要内容之外，还需要定义Header，Footer或我在MainLayout中定义的任何渲染元素.这样，我可以为每个页面定制个性化的Header/Footer元素.

In other words, for each page, besides the main content, it also needs to define Header, Footer, or whatever render element I define in the MainLayout. This way, I can have customize Header/Footer elements that are unique for each page.

感谢您的帮助.

推荐答案

MainLayout.razor

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

Note: The use of a method to update the render fragment fields I deliberately made private which then calls StateHasChanged(). Other methods could easily be created to clear or set other fields.

@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>

这篇关于正文以外的Blazor页面元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！