Blazor: Zero To Hero Real Time Implementation Part III

Introduction 

This is part three of the “Blazor: Zero to Hero” article series. Before getting into the Part III article series, let’s have a Glimpse at Part I and  Part II articles, 

Part I

  • Blazor is a framework to build Interactive Web UIs using C# and HTML. 
  • The initial release was in 2018 by Microsoft.   
  • We can use C# code in the Client-Side programming, and WebAssembly will handle browsers to understand the C# code. 
  • We need .NET CORE SDK 3.1 or latest 
  • Visual Studio 2017 or the latest can be used as the IDEs. 

Part II

  • Microsoft launched the first version of Blazor in 2019 along with .NET CORE 3.0
  • There are two hosting models as Client-Side and Server-Side. 
  • Client-Side is also known as Blazor WebAssembly, the application runs directly on the web browsers and all the required components are downloaded from Server to Client. 
  • In Server-Side, the application is run directly on the Server-Side.

Please visit for complete article, 

In this article, we will have a detailed look at the Project Structure

Project Structure 

Before looking at the default project structure, let’s check we have installed Blazor in our Visual Studio. If the Blazor option is not listed in the Visual Studio, by updating your environment setup you can install the required Blazor features. I am using Visual Studio 2019 as my environment. 

Creating Blazor Project (Server-Side App)

Click Visual Studio, and it shows options as Clone or Check out code, Open a new project or solution, Open a local folder,  Create a new project, as shown in the below. 

Picture 1

Choose to Create a new project option

Once the Create a new project option is chosen, another window will be opened with a list of project template options. In that window, Choose the Blazor App option. (Only if you have installed Blazor, this option will be suggested) 

Picture 2

After that, another window will be opened to configure the application, such as Project Name, and where the application will be saved in the machine. I am naming my Project as FinanceApp in the Project Name option and I create the application by selection Create button

Picture 3

As we saw in the previous article, we can create two types of Blazor app. The next window option is to choose the option as Client-Side or Server Side. At this moment, in my environment, I have only the Server Side (Blazor Server App) and I have chosen the .NET framework as 3.1

Picture 4

Once the Create button is selected, we have created our first basic level of Blazor Server Application and as shown in the below, this is our default project structure. 

Picture 5

Program.cs

This program.cs class is available only in the Blazor Server Application.  The main method in this class call CreateHostBuilder() method,  as the name implies, it creates the ASP .NET Core Host, to host this Blazor application, since the server-side application runs on the server. 

In the CreateHostBuilder() method, we can set up the default startup class file. 

Picture 6

Startup.cs

This Startup.cs class file is only present in the Blazor Server application, which also means the Blazor WebAssembly project does not have the Startup.cs class file. As the name implies this file contains the application’s startup logic. In this class file, there are two methods as ConfigureServices() and Configure(). 

ConfigureServices() 

The applications Dependency Injection (DI) is configured in this method. 

The IServiceCollection  Interface, there are several methods, which start with the word Add. These services add different services to the Blazor Application. We can also add our own services to the Dependency Injection container. 

Picture 7

Configure() 

Application’s Middleware components are handled in this method. We will have a detailed look at this later sometimes in this article series. If you have any experience with ASP.NET core, then you already know what middleware components are.

MapBlazorHub sets up the endpoint for the SignalR connection with the client browser as we know the Blazor Server application runs in the server and the SignalR connection is established between the server and client browser. This routing process we will discuss in the upcoming article series. 

The root page of the application is set by calling the method MapFallbackToPage(“/_Host”). The _Host file is present under the Pages folder 

Picture 8

Pages folder

_Host.cshtml –  When the first hit of the application, this page is initially served. If we look at this file, it has standard HTML, HEAD, BODY tags. The root application component, App component rendering location are also specified in this class. Components are the build blocks of the Blazor application. The App component is the root component of the application and the components have the razor extension(.cshtml). The root component are present in the App.razor file. In this Pages folder, you can also see many other .razor extension files, which are also Blazor Components. 

The SignalR connection between the server and client browser is loaded as javascript, blazor.server.js file. 

Picture 9
  • Index.razor – Rendered when we navigate to the root application URL.
  • Counter.razor – Rendered when we navigate to the path /counter.
  • FetchData.razor – Rendered when we navigate to the path /fetchdata.
  • Error.razor – Rendered when an unhandled exception occurs in the blazor app.

We will have a detailed look at the components in detail in upcoming articles. 

Picture 10

App.razor

This is the root component of the application. It uses the built-in Router component and sets up client-side routing. It is this Router component that intercepts browser navigation and renders the page that matches the requested address. The Router uses the Found property to display the content when a match is found. If a match is not found, the NotFound property is used to display the message – Sorry, there’s nothing at this address.

Both the Found and NotFound property uses a layout called MainLayout and this file is present in the Shared Folder. 

Shared Folder 

As the name implies, this folder contains the shared components.  The following are the files under this folder, 

MainLayout.razor –  This is the application’s main layout component 

NavMenu.razor-  Implements the navigation menu on the sidebar. NavLink component renders navigation links to other Razor components like the index, counter, and fetchdata components. This NavLink component is intelligent enough to highlight the navigation menu item if it’s component is currently displayed.

Picture 11

wwwroot

For both the project types, this folder contains static files like images, stylesheets, etc. 

_Imports.razor

This is like _ViewImports.cshtml file in an asp.net core MVC project. This file contains the common namespaces so we do not have to include them in every razor component.

Picture 12

appsettings.json

Just like an asp.net core MVC project, a blazor project also uses this file to store the configuration settings.

Picture 13

Conclusion

In this article, we had a look at the project structure of a Blazor Server Application. I hope, you all found useful. We will see more in detail about the files mentioned in our upcoming articles. Please feel free share your feedbacks in the comment section.

One thought on “Blazor: Zero To Hero Real Time Implementation Part III

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

WordPress.com.

Up ↑

%d bloggers like this: