Load page inside Body element inside page which was loaded in other Body element?

Question

I have 3 pages. 1. A blank page, where is having only a @Body. I am keeping this as a spaceholder where the other pages is shown. 2. A second page which having controls and a @Body as well and it's loaded inside the 1st - blank page. 3. A third page which is supposed to be placed inside the @Body of the second page without destroying it's content.

anyway when I try to load with NavigationManager.NavigateTo( "/page3" ); from the second page - the content of the second page is destroyed and replaced with the content of page3.

• How can I load contend into the secondary page without destroying it ?!

Answer 1

You can have a default @Body spaceholder only on layout component, inheriting from LayoutComponentBase. You first blank page surely does so, otherwise the page2 won't be displayed. But to have a @Body placeholder on page2 and to use routing to navigate to page3 you need to have page2 also be a layout. So what you actually need to do is to make page2 also a layout, set it's layout to page1, and set page3 layout to page2. And if you want to display at some route just page2 with blank @Body you should set to this route a completely blank page and set it's layout to page2. Something like:

BlankPageLayout.razor

@inherits LayoutComponentBase

@Body

Page2Layout.razor

@inherits LayoutComponentBase
@layout BlankPageLayout

<some html>
    @Body
</some html>

Page2.razor

@page "/page2"
@layout Page2Layout

Page3.razor

@page "/page3"
@layout Page2Layout

<some html></some html>

now navigating to page2 you'll get just a Page2Layout and navigating to page3 you'll get a Page2Layout with page3 content inside.