blazor_dotnet8

Blazor .NET 8 Migrating app from .NET 6 or .NET 7 to .NET 8

Migrating your Blazor app from .NET 6 or .NET 7 to .NET 8 can bring several benefits, including improved performance, enhanced features, and bug fixes. Here are the steps you can follow to migrate your app successfully.

(Old) Request Flow Request → _Host → App → Component

(New) Request Flow Request → App → Routes → Component

Update your project file .csproj

Open your Blazor app’s project file (.csproj) and change the TargetFramework to .NET 8.0. This ensures that your app targets the latest version of .NET.

(OLD) .csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
	<TargetFramework>net6.0</TargetFramework>
	<Nullable>enable</Nullable>
	<ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
</Project>

(NEW) .csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
	<TargetFramework>net8.0</TargetFramework>
	<Nullable>enable</Nullable>
	<ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
</Project>
(Optional) Update NuGet packages

Use the NuGet Package Manager or the .NET CLI to update the NuGet packages used in your project to their latest versions compatible with .NET 8. This ensures that you have the most up-to-date dependencies.

(OLD) .csproj

<ItemGroup>
	<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="6.0.22" />
	<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="6.0.22" />
	<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="6.0.22" />
	<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="6.0.22">
		<PrivateAssets>all</PrivateAssets>
		<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
	</PackageReference>
	<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="6.0.16" />
</ItemGroup>

(NEW) .csproj

<ItemGroup>
	<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.0" />
	<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.0" />
	<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.0" />
	<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.0">
		<PrivateAssets>all</PrivateAssets>
		<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
	</PackageReference>
	<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="8.0.0" />
</ItemGroup>
Update Program.cs

To migrate your Blazor app to .NET 8, you need to update the Program.cs file. Specifically, you need to make changes to the services configuration and the app routing.

(OLD) Program.cs

...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
...
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
...

(NEW) Program.cs

...
// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
...
app.UseAntiforgery();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
...

In the old code, the services were added using the AddRazorPages() and AddServerSideBlazor() methods. However, in the new code, we use the AddRazorComponents() method to add the services required for Interactive Server Components.

The UseRouting() method is replaced with the UseAntiforgery() method, which adds anti-forgery protection to the app. This is necessary to prevent cross-site request forgery attacks.

The MapBlazorHub() method is replaced with the MapRazorComponents<App>() method, which maps the Blazor components to the app and sets the root component to App. Additionally, the AddInteractiveServerRenderMode() method is used to enable interactive server rendering.

from _Host.cshtml to App.razor

By migrating the App.razor file to the new Routes.razor file, you can ensure compatibility with the latest version of .NET and take advantage of any new features or improvements. Remember to make the necessary changes to the AppAssembly and DefaultLayout parameters, and handle not found routes if required.

In the old App.razor file, the routing configuration was defined. In the new Routes.razor file, the routing configuration is moved. Here’s an example of the old and new code

(OLD) App.razor

<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>

(NEW) Routes.razor

<Router AppAssembly="typeof(Program).Assembly">
	<Found Context="routeData">
		<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
		<FocusOnNavigate RouteData="routeData" Selector="h1" />
	</Found>
</Router>

In the old _Host.cshtml file, the Blazor component was rendered. In the new App.razor file, the rendering logic is moved. Here’s an example of the old and new code:

(OLD) _Host.cshtml

				@page "/"
				@namespace BlazorApp.Pages
				@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
				@{
					Layout = "_Layout";
				}

				<component type="typeof(App)" render-mode="ServerPrerendered" />

(NEW) App.razor

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<base href="/" />
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
	<link rel="stylesheet" href="app.css" />
	<link rel="stylesheet" href="BlazorApp4.styles.css" />
	<link rel="icon" type="image/png" href="favicon.png" />
	<HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
	<Routes @rendermode="InteractiveServer" />
	<script src="_framework/blazor.web.js"></script>
</body>

</html>

Information

  • Remove @page directives
  • Update base links: from "~/" to "/"
  • Update render-mode to "<HeadOutlet/>"
  • Update script name from "<script src="_framework/blazor.server.js"></script>" to "<script src="_framework/blazor.web.js"></script>"
  • Add Routes "<Routes/>"
  • (Optional) Update render-mode (global render-mode)
<HeadOutlet @rendermode="InteractiveServer" />
<Routes @rendermode="InteractiveServer" />
  • (Optional) Update forms in the project

Project Structure

  • OLD
    • Data
    • Pages
    • Properties
    • Shared
    • wwwroot
  • NEW
    • Components
      • Layout
      • Pages
    • Properties
    • wwwroot

Remember to back up your code and project files before starting the migration process. This allows you to revert to the previous version if any issues arise during the migration.

By following these steps, you can successfully migrate your Blazor app from .NET 6 or .NET 7 to .NET 8 and take advantage of the latest features and improvements offered by the framework.