How to convert a Blazor version 7 Server to version 8 InteractiveServer #54580

DavidThielen · 2024-03-17T23:46:11Z

DavidThielen
Mar 17, 2024

Hi all;

I just went through this and the painful part was figuring out what to do. Once I had that, actually doing it is pretty fast and easy. So for those of you facing the same thing, here it is. And this includes

Getting the [CascadingParameter] Task<AuthenticationState>
Enabling the anti-forgery token

Take the contents of App.razor, remove the outer <CascadingAuthenticationState> and paste that as the contents of the newly created Routes.razor. Then change AppAssembly="@typeof(App).Assembly" to AppAssembly="@typeof(Program).Assembly".

Old App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <div class="message--401">
                        <h1 role="alert">Sorry, you're not authorized to view this page.</h1>
                        <p>You must have an Admin claim and be set to use 2FA when logging in.</p>
                    </div>
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <div class="message--404">
                    <h1 role="alert">Sorry, there's nothing at this address.</h1>
                </div>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

New Routes.razor

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                <div class="message--401">
                    <h1 role="alert">Sorry, you're not authorized to view this page.</h1>
                    <p>You must have an Admin claim and be set to use 2FA when logging in.</p>
                </div>
            </NotAuthorized>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <div class="message--404">
                <h1 role="alert">Sorry, there's nothing at this address.</h1>
            </div>
        </LayoutView>
    </NotFound>
</Router>

In Program.cs, replace:

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor(options => { options.DetailedErrors = debugMode; });

with:

builder.Services.AddRazorComponents().AddInteractiveServerComponents(options => { options.DetailedErrors = debugMode; });
builder.Services.AddCascadingAuthenticationState();

and replace (after UseAuthentication(); UseAuthorization();):

app.MapControllers();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

with:

app.UseAntiforgery();
app.MapRazorPages();
app.MapRazorComponents<App>().AddInteractiveServerRenderMode();

Finally, you copy _Host.cshtml to App.razor, and then delete _Host.cshtml. When doing this, delete the code around xsrf in App.razor.cs and _Host.cshtml - this is all now handled by the call app.UseAntiforgery().

I am not going to list everything below because the few changes will got lost in the stuff that didn't change. So the below is what changed.Pay close attention to as it's a subtle but critical change!

Change source in _Host.cshtml:

<head>
    <base href="~/" />
    <component type="typeof(HeadOutlet)" render-mode="Server" />
</head>
<body>
    <component type="typeof(App)" render-mode="Server" param-InitialState="initialTokenState" />
</body>

to the new (overwrite old content) App.razor:

<head>
    <base href="/" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
    <Routes @rendermode="InteractiveServer" />
</body>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to convert a Blazor version 7 Server to version 8 InteractiveServer #54580

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

How to convert a Blazor version 7 Server to version 8 InteractiveServer #54580

Uh oh!

DavidThielen Mar 17, 2024

Replies: 0 comments

DavidThielen
Mar 17, 2024