C#•3mo ago

Blazor Problems with Layouts

Hello! I've been spending a few days trying to figure out what is going on here, I think I've boiled it down to how the Layouts are working. I'm new to Blazor and I don't fully understand what's going on with Layouts, but I've read the docs and I think I sorta understand what they are and do. I know I asked for this to happen when I took all of the account-related pages from the Blazor template and spliced it into my project here. I go to log in and everything works fine as the stand alone page, creating a user works, logging in works, but the rest of my website seems to be "frozen" when I'm on these account related pages. I can't click on my app drawer, or toggle dark mode, and it seems like my theme is reverted. I'm using MudBlazor if that matters here. I think it has something to do with Layouts because the Login page uses the AccountLayout.razor layout, as well as all the other account related pages, through the _Imports.razor file. The AccountLayout.razor file also has @layout TrustyPortfolio.Components.Layout.MainLayout which should mean that it still uses my MainLayout.razor right? I havent' changed anything in my Routes.razor so I'm still using DefaultLayout="typeof(Layout.MainLayout)". At this point I'm stuck. AccountLayout.razor looks like this

@inherits LayoutComponentBase
@layout TrustyPortfolio.Components.Layout.MainLayout
@inject NavigationManager NavigationManager

@if (HttpContext is null)
{
    <p>Loading...</p>
}
else
{
    @Body
}

@code {
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }

    protected override void OnParametersSet()
    {
        if (HttpContext is null)
        {
            // If this code runs, we're currently rendering in interactive mode, so there is no HttpContext.
            // The identity pages need to set cookies, so they require an HttpContext. To achieve this we
            // must transition back from interactive mode to a server-rendered page.
            NavigationManager.Refresh(forceReload: true);
        }
    }
}

@inherits LayoutComponentBase
@layout TrustyPortfolio.Components.Layout.MainLayout
@inject NavigationManager NavigationManager

@if (HttpContext is null)
{
    <p>Loading...</p>
}
else
{
    @Body
}

@code {
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }

    protected override void OnParametersSet()
    {
        if (HttpContext is null)
        {
            // If this code runs, we're currently rendering in interactive mode, so there is no HttpContext.
            // The identity pages need to set cookies, so they require an HttpContext. To achieve this we
            // must transition back from interactive mode to a server-rendered page.
            NavigationManager.Refresh(forceReload: true);
        }
    }
}

And I think it has something to do with the Layouts because I can see this page and its "loading" text in my theme and with buttons working, right before it goes to the login page. Any help or direction would be greatly appreciated 🙂

2 Replies

Anu6is•3mo ago

this isn't related to Layouts. It has to do with Blazor render modes. The account pages are Static Server Side Rendered pages... static meaning, non-interactive. That's why your dark mode toggle/button and app drawer don't work, because they require interactivity

TrustyTea•3mo ago

Ahh okay, thanks! I’ll read up more on that

Gaming

Programming

Blazor Problems with Layouts