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.
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
Datafolder contains a model, which is output type of the weather forecast API
Sharedfolder contains razor pages.
- Then there is
Program.csfile which contains main method and
appsettings.json, the config file
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:
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.
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
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.
Navigation menu is defined in the
Shared folder in
NavMenu.razor. It defines multiple navigation elements
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 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.
_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
@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.
So, at a high level glance, the project structure look similar to
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.
This Post Has 2 Comments
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.