CODEWITHSUNDEEP
c#blazorblazor-server-sideblazor-webassemblyblazorise
Brett JB
Brett JB

Reputation: 866

Blazor WASM app adding some Interactive Server Pages. Blazorize Menu Inactive

I have a Blazor Web App that started life under .NET 6 as a WASM only app. Last year, with the new flexibilities offered using .NET 8, I decided to upgrade it and try to migrate some of my heavier admin pages to the server to try to reduce the download size. This has been an ongoing task, and added some pages on the server project in a new folder (/Pages) with the intended path of /Pages.

My MainLayout is in the client project as is required for a WebAssembly app.

In MainLayout, I am using the Blazorise 'Layout' components. They work really well in WASM, but the sider flyout doesn't work if the page being rendered is using InteractiveServer render mode. (If that is indeed the mode it is using).

At the time, searching on here, I came across this post:

Which seems to describe a similar problem to my own.

However, when I tried to apply his proposed solution:

<!DOCTYPE html>
<html lang="it">
    <head>
        ...   
        <HeadOutlet @rendermode="@InteractiveServer" />
    </head>

    <body>
        <Routes @rendermode="@InteractiveServer" />
        ...
    </body>
</html>

The pages load, but then some kind of route control takes over and it displays "Not Found".

I initially had the same issue no matter what I did, till I changed the App.razor code. I am using the built in accounts and emulated the way it works, which stopped it being 'Not Found' after I added my own paths:

        private IComponentRenderMode? RenderModeForPage =>
        (HttpContext.Request.Path.StartsWithSegments("/Account")
        || HttpContext.Request.Path.StartsWithSegments("/Pages")
        || HttpContext.Request.Path.StartsWithSegments("/Win")
        )
            ? null
            : RenderMode.InteractiveWebAssembly;

So my paths starting with 'Pages' or 'Win' now get found, but the rendermode for the Layout seems to be rendering statically.

I needed to get on and worked around it by providing a further sub-layout for the admin pages on the Server side. This was a bit of a kludge and I need to fix it now. Also for further info, I have recently updated to .NET 9.

I apologise in advance for not understanding the routing issue, but I haven't found anyewhere that explains it relating to my situation yet.

I have tried not to overload this with lumps of code but here is my Routes.razor for further info:

<Blazorise.ThemeProvider Theme="@theme">
    <Router AppAssembly="typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="routeData" Selector="h1" />
        </Found>
    </Router>
</Blazorise.ThemeProvider>

If there is any other code elements you need to see let me know, but it is very similar to the post I mentioned above.

I need to get the Interactive render mode working for the Layout (or WASM - If you can mix a WASM layout with Interactive server ?)

EDIT I remembered that .NET 9 has added some facilites to guage the render modes in the page. To that end, I have added this to the Layout Header section which is pretty static anyway:

        <div Style="color:white">
            <ul>
                <li>Name: @RendererInfo.Name</li>
                <li>Is Interactive: @RendererInfo.IsInteractive</li>
                <li>Assigned Render Mode: @AssignedRenderMode</li>
            </ul>
        </div>

When it starts up, and is working in WASM, it shows this: Screen Grab at startup

After clicking a Server based link: enter image description here

Just to add some context.

Edit 2 I won't post my whole 'App.razor' as it is too big, but this is how I currently have the HeadOutlet and Routes set up:

    <HeadOutlet @rendermode="RenderModeForPage" />
</head>

<body>
    <Routes @rendermode="RenderModeForPage" />

If I change these for the setup as proposed in the solution above I get the Not found error.

ALso I tried modifying my /Pages rendermode by modifying the App.razor code above to the following:

        private IComponentRenderMode? RenderModeForPage
        {
            get
            {
                if (HttpContext.Request.Path.StartsWithSegments("/Account")) return null;
                if (HttpContext.Request.Path.StartsWithSegments("/Pages")) return RenderMode.InteractiveServer;
                if (HttpContext.Request.Path.StartsWithSegments("/Win")) return RenderMode.InteractiveServer;
                return RenderMode.InteractiveWebAssembly; ;
            }
        }

In answer to jdweng's point below, I don't think it is a security issue (not dismissing it) but it is a no content error (204) that it comes back with. The background image to my site is still there so I think this points to some kind of routing issue? If I reeturn null for the 'Rendermode for page' then the page works fine, and because on each page I have set

@rendermode InteractiveServer

... it also works interactively. Just that the flyout menu wont work because it is being statically rendered...

Upvotes: 0

Views: 50

Answers (0)

Related Questions