In this article we will create a default Blazor project and explore the components and features.

To get started creating applications using Microsoft Blazor, the following are required:

• Microsoft Windows 7 Service Pac 1 (or higher) or Microsoft Widows Server 2012 R2 Service Pac 1 (or higher)
• Visual Studio 2019 Version 16.3 (or higher) (Free download from: https://visualstudio.microsoft.com/free-developer-offers/)
• .NET Core 3.0.0 SDK (or higher) (Free download from: https://dotnet.microsoft.com/download/dotnet-core/3.0)

Note: It is possible to develop Blazor applications using other methods. See this link for more information: https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started.

Create The Default Project

Open Visual Studio.

Select Create a new Project.

Select Blazor App and click Next.

Give it a name and click Create.

Select Blazor Server App.

Click Create.

This will create the default project, and the application will open in Visual Studio.

Explore The Default Application

Select Debug, then Start Debugging to run the application.

Your web browser will open, and the application will load.

1. You can click on the Counter link to navigate to the Counter page
2. You will see that the url in your web browser changes to the /counter address
3. You can click the Click me button
4. The number next to the Current Count label will increase

1. You can click on the Fetch data link to navigate to the Weather forecast page
2. You will see that the url in your web browser changes to the /fetchdata address
3. A table of random weather forecasts will display

Return to Visual Studio, and select Debug then Stop Debugging.

Examine The Project Files

The Solution Explorer in Visual Studio allows us to see all the project files of the application.

The preceding diagram shows the order that the code is executed in (starting with the Program.cs file), to display the first page of the application (the default page of the application, that is contained in the Index.razor file).

The initial code that is loaded in the user’s web browser is contained in the _Host.cshtml file. This creates a HTML document that loads the initial .css style sheets and JavaScript files, including the Blazor.server.js file that sets up the SignalR communication with the server.

This loads the application root inside the <app></app> tags.

The application root, is contained in the App.razor control. This control sets up the cascading parameters used for security (covered in Blazor Binding, Events and Parameters) and the routing.

Routing and Layouts

Every routable Blazor control must have a @page Razor directive with a unique route.

In this example, the Counter control, contained in the Counter.razor file, is configured by the @page directive to have the /counter route.

When the user navigates to the /counter route in their web browser, the Counter control is loaded, however, the RouteView in the App.razor file defines a layout control called MainLayout. This layout will be the layout for that RouteView.

This MainLayout control is a template that defines the overall structure of the page that is returned.

It contains a @Body Razor directive that indicates where the content will go, in this case the Counter control.

The MainLayout control also loads other controls such as the NavMenu control (contained in the NavMenu.razor file), that contains the navigation menu that displays on the left-hand side of the resulting page.

Dependency Injection

Services contained in classes, can be registered in the Startup.cs file so that they are available to be consumed in Blazor components and classes using Dependency Injection.

For example, the WeatherForecastService class, contained in the WeatherForecastService.cs code file, is registered in the ConfigureServices section of the Startup.cs code file. 

In this example, the service is registered as a Singleton (using AddSingleton - all requests use the same instance), however, in many cases, such as services that provide data for a single user, you will want to register your services as Scoped (using AddScoped - an instance of the service is created once per connection or client request).

Also note that we are securely calling the GetForecastAsync method directly because we are using a server side Blazor application.

If we instead created a Blazor WebAssembly App that is ASP.NET Core hosted…

…we would have a different project structure that separates the code that runs in the client web browser (the BlazorClientApp.Client project), from the code that runs on the server (in the BlazorClientApp.Server project).

Because the client code is no longer running on the server, that version of the FetchData.razor page has to make a http request, using the GetJasonAsync method of the HttpClient (that was registered as a service in the startup.cs file), to the method running on the server, that then returns the weather forecast data.