In previous article, we have discussed the difference between Blazor Server App vs Blazor WebAssembly project. In this article, let’s try to create the Blazor Server App project.

Create the project !

The steps involved in creating Blazor Server App using Visual Studio are exactly the same steps which are needed to create an ASP .NET Core Web App.

On first screen, we need to search for the project template. Once the appropriate template is selected, on next screen, you can specify the project name and solution name.

On the next screen in wizard, we can select the target framework. Let’s select .NET 7 in the dropdown. Then there are few other options in the form of check boxes (for enabling HTTPS and Docker in the project), let’s keep them to default.

And that’s it. It should create the project and Visual Studio should show the project in Solution Explorer.

Let’s try to understand the code from this default template.

Overview

Like any other ASP .NET Core Web App, there are some common folders like properties / dependencies ,etc. In addition, there are some additional folders. Below is a high level overview of what each folder contains:

• wwwroot, which is supposed to contain the static resources required for the web application
• Data folder contains a model, which is output type of the weather forecast API
• Pages and Shared folder contains razor pages.
• Then there is Program.cs file which contains main method and appsettings.json, the config file

Program.cs

Let’s quickly check the contents of this file. This file contains main method, because I have not opted for top level statements while creating the project.

The code snippet given below shows the contents of the file. If you have been working with ASP .NET Core web applications already, then you must have seen most of the middlewares / services from this default template.

There are three interesting services/middlewares configured in this file:

• AddServerSideBlazor
• MapBlazorHub
• MapFallbackToPage

AddServerSideBlazor

This registers a lot of services which are needed for Server Side Blazor application. You can find the source code here to better understand which all services and dependencies are added by this call.

On a high level, it adds few things related to accessing local storage. It also registers dependencies to run the JavaScript (RemoteJSRuntime). It also registers SignalR dependencies. And there are many other dependencies registered by this API.

MapBlazorHub and MapFallbackToPage

An ASP.NET Core app is configured to accept incoming connections for interactive components with MapBlazorHub in Program.cs.

The typical configuration is to route all requests to a Razor page, which acts as the host for the server-side part of the Blazor Server app. By convention, the host page is usually named _Host.cshtml in the Pages folder of the app.

Razor Pages

Navigation menu is defined in the Shared folder in NavMenu.razor. It defines multiple navigation elements NavLink.

This NavMenu.razor component is used in MainLayout.razor, which is also defined in Shared folder. Main layout defines the overall structure of the page.

This layout is then used in App.razor. App.razor is the root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.

The _Imports.razor contains all the common Razor directives to include in the app’s components (.razor), such as @using directives for namespaces.

Weather Forecast API Call

The @inject directive is used to inject the WeatherForecastService class in this razor page. This service is then used to make a call to the API from @code section. There is a method in @code section, which is named as OnInitializedAsync. It holds special importance.

The OnInitialized (the sync version) and OnInitializedAsync (the async version) are invoked when the component is initialized after having received its initial parameters in SetParametersAsync.

Bottomline, when the FetchData.razor component is initialized, the OnInitializedAsync  method is automatically invoked and it makes call to the API. The data is populated in the array, which is then used to generate the HTML.

Run and Verify

When we run the application, we can see that there are some requests for CSS files. Some fonts and JS files are also downloaded. And there are some calls to connect to the SignalR endpoint. This SignalR endpoint helps to refresh the components on UI when UI events are sent to the server.

Wrapping Up

So, at a high level glance, the project structure look similar to ASP .NET Core Web App. And the code written seems to be a bit different from other ASP .NET Core Web App templates. C# is used, along with HTML, on the Razor pages, reducing the amount of JavaScript needed for the application.

Note that WebAssembly App is completely different from Server App and we will try to understand it in some of the future articles.

I hope you find this information helpful. Let me know your thoughts.