Search code examples
blazorblazor-server-side

Blazor Layout subfolder results in infinite loop


I've created a new blazor server app (default Microsoft example template in Visual studio for Mac). Then in the Page folder, I've created a new subfolder "Test". Within the subfolder "Test" I've created the following files:

_Imports.razor

@layout TestTemplate

TestTemplate.razor

@inherits LayoutComponentBase

<h1>Test layout</h1>

@Body

Index.razor

@page "/test"

<h3>Hello test layout</h3>

@code {

}

When I build the solution, no errors are found. But when I open a browser and go the the url http://localhost:portnr/test, my browser keeps on rendering/hangs (infinite loop I think).

According to this document from Microsoft https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0 The above steps should work (see section "Apply layout to a folder".

I've checked the _Imports.razor file at the root of the project to see if there is an other reference to @layout because according to the above link this would result in an infinite loop. And the App.razor contains a reference to the MainLayout:

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Solution

  • Found the solution. Although it seems like an old topic, it still applies to .net core 6: https://github.com/dotnet/aspnetcore/issues/11406

    So if you put the layout file in the same folder as the _Imports.razor file, it goes wrong. I've moved my TestLayout.razor to the Shared folder and it all started working.