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 applicationData
folder contains a model, which is output type of the weather forecast APIPages
andShared
folder contains razor pages.- Then there is
Program.cs
file which contains main method andappsettings.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
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.
Thank you for the article.
I try to reproduce. My VS 2022 has only 3 Blazor templates:
Blazor Server App Empty
Blazor WebAssembly App Empty
NETMAUI Blazor App
But no Blazor Server App as you wrote. What can be the reason of the problem?
Not really sure what is missing. Maybe you can check the installed components of Visual Studio 2022 and check if everything related to web development is selected.