Understand the new Blazor project template in ASP.NET Core 8

Recently Microsoft released .NET 8 that also included a good amount of enhancements to ASP.NET Core. As a part of the improvements Blazor got a new project template -- Blazor Web App. The new project template supports the newly added features including render modes and authentication. In this article we will look at the new project template and template options in Visual Studio 2022.

To follow the examples presented in this article you need to have Visual Studio 2022 version 17.8 and .NET 8 SDK installed on your machine. So, make sure to update your Visual Studio to grab the latest bits.

Before we move ahead and look at the new Blazor project template it will be helpful to familiarize yourself with the following concepts :

• Hosting Models
• Static components
• Interactive components
• Render Modes
• Prerendering

A Blazor app consists of one or more Razor Components that reside in .razor files. These components are processed or handled using what is known as hosting models. First, you can use Blazor Server hosting model that processes the components on the server through a SignalR connection. Second, you can use Blazor WebAssembly (also called Blazor WASM) that processes the components on the client making use of WebAssembly specifications. Third, there is also Blazor Hybrid approach that uses Web View control embedded in a native application (such as a desktop app or a mobile app). Till .NET 7 Blazor apps used one of the above hosting models for processing the components. In .NET 8, certain Render Modes (discussed shortly) are available for your components that use one of these hosting models.

A component is a static component if it contains only HTML content without any controls or user interactivity features. A component is an interactive component if it provides some sort of user interactivity, typically through controls such as editable grids, textboxes, dropdowns, and buttons.

A Blazor component can specify its hosting model and interactivity indicator through what is known as the component's Render Mode. There are four Render Modes available -- Static, Interactive Server, Interactive WebAssembly, and Interactive Auto. The Static render mode indicates that a component is a static component and does only static server-side rendering. The Interactive Server render mode indicates that a component is an interactive component that will be processed using Server hosting model. The Interactive WebAssembly render mode indicates that a component is an interactive component that is processed using WebAssembly hosting model. The Interactive Auto render mode indicates that a component is an interactive component that uses Server hosting model initially but switches to WebAssembly hosting model automatically once the files necessary for WebAssembly based processing are downloaded by the browser. A single Blazor app can have components with different render modes. For example, there might be a few components with render mode of Interactive Server and a few with Static or Interactive WebAssembly. A render mode is typically specified at the component level but if all the components of an application are using the same render mode it can be specified globally at the application level.

In order to make Blazor apps more responsive to the end users components enable what is known as Prerendering. Prerendering initially renders a component's content on the server without wiring control level event handlers (for example, a button's click event handler). Prerendering also comes handy for SEO purposes. By default, interactive components have Prerendering enabled.

Now that you have some understanding of Blazor concepts, let's see how the new Blazor Web App project template puts these pieces together.

Begin by opening Visual Studio 2022 and click on the Create a new project option.

Then search for "Blazor" to reveal all the Blazor project templates available in VS2022.

Depending on your installation you might see older Blazor project templates and also the new one. In the above figure Blazor Web App is the new project template and all the others are from the .NET 7 installation.

So, select Blazor Web App template and hit the Next button.

In this dialog you can specify a project name (BlazorServerAppDemo in this case) and its physical location. Enter the desired details and click on Next.

This is an important step because this is where render mode and a few other details are specified. Make sure that you pick .NET 8 in the Framework dropdown list because this new template applies only to .NET 8.

The Authentication type dropdown list contains two options -- None and Individual Accounts.

By default the Authentication type is None indicating that the app doesn't use any authentication features. You can, of course, wire an authentication scheme at a later stage if required. The Individual Accounts option indicates the app will use ASP.NET Core Identity based authentication scheme. Selecting this option will add the necessary support in terms of NuGet packages, configuration, and UI elements to the newly created application. For this example keep this selection to None.

Next, take a look at the Interactive render mode dropdown list:

As you can see, the dropdown list contains four render mode options discussed earlier -- None, Server, WebAssembly, and Auto. Of course, you can change a component's render mode after the project is created but in many cases you are clear about the target render mode that you want to use in your app and that choice can be set for your components here. For this example, let's keep this to Server.

A component's render mode can be set at an individual component level or globally for all the components in the application. This is decided by the Interactivity location dropdown list. If you are certain that all the components of your app are going to have a particular render mode you can set it globally; otherwise go for per page or per component level assignment of the render mode. For this example, let's pick Global option.

The Include sample pages checkbox indicates whether the project should include sample pages and CSS files. Keep this checkbox checked.

So, our project options for this example look like this :

Once you click on the Create button this is how your Solution Explorer should look like:

We are not going to enumerate through the list of project files here. You can read more about the Blazor project structure in the official documentation here.

Recollect that we have set Interactivity location to Global. This sets the following setting in App.razor file.

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

As you can see, Blazor framework file blazor.web.js is also referenced there.

Run the application to see its output.

Try running the Counter and Weather components.

Now, create another project with Interactivity render mode Server but Interactivity location of Per page / component.

Since we set Interactivity location to Per page / component, the App.razor has just this:

<Routes />
<script src="_framework/blazor.web.js"></script>

And the Counter.razor component has this :

@rendermode InteractiveServer

If you run the app, the output will be similar to the previous run.

Next, we will create another app with WebAssembly render mode. So, go ahead and create a project with the following settings :

This time the Solution Explorer shows this:

As you can see, now there are two projects -- BlazorWebAssemblyAppDemo and BlazorWebAssemblyAppDemo.Client. The BlazorWebAssemblyAppDemo project is a "server" project in that it serves the .Client project to the browser. If you worked with Blazor in .NET 7, you will find this project quite similar to the .Server project. The BlazorWebAssemblyAppDemo project references the .Client project. The .Client project contains all the client side WebAssembly components. Note that the BlazorWebAssemblyAppDemo project is set as the startup project.

These two projects are stored in a physical location like this :

As you can see, BlazorWebAssemblyAppDemo (project name) folder contains two sub-folders -- BlazorWebAssemblyAppDemo (server project) and BlazorWebAssemblyAppDemo.Client (client project).

The App.razor is located in the BlazorWebAssemblyAppDemo project and contains the render mode as shown in the following markup:

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

The following figure shows a sample run of this project.

You may try creating a WebAssembly "Per page/component" project following the process discussed earlier. You can also create projects for Auto and None Interactivity render modes.

In the projects created so far we didn't use any authentication scheme. Let's conclude this article by looking at a project that has ASP.NET Core Identity based Individual Accounts wired into the system.

Create yet another project with the following settings.

This time we selected Individual Accounts in the Authentication type dropdown. The resuultant project looks like this :

As you can see, there is Accounts folder containing various authentication and user management related components. There is also Data folder containing migrations, user class, and a DbContext class.

There is Auth.razor component under Pages folder that enforces user authentication as follows:

@attribute [Authorize]

Run the application and click on the Auth Required link pointing to the Auth component from the left side menu. You will be taken to a login page as shown below:

We won't discuss the actual code responsible for authentication in this article. You can read official documentation to know more.

Repeat the same process to create a WebAssembly app with Individual Accounts.

The following figure shows the project in the Solution Explorer.

Notice that the Account and Data folders are created inside the "server" project.

Run and test the Auth Required component as before.

I hope this article must have given you a quick tour of the new Blazor project template in ASP.NET Core 8. You can play with None and Auto project templates in the similar manner to discover their project content and project organization.

That's it for now! Keep coding!!