Project Structure Of Blazor In ASP.NET Core

Introduction

In this article, I am going to explain to you, the default folder structure of Blazor Server App in ASP.NET Core 7.0 web application and describe the purpose of each folder.

Read my previous articles, using the below links.

• Getting Started With Blazor In ASP.NET Core 7.0
• How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

In my previous 2 articles, we created “Blazor Server App” and “Blazor WebAssembly App” projects in ASP.NET Core 7.0, and saw the structure of the Blazor Server App project as shown in the following image.

Let’s start exploring each folder and file that exists in the Project Structure for easy understanding.

Project Folder Structure Description

The details of the default project structure can be seen in the solution explorer, it displays all the projects related to a single solution.

.csproj File

Double-click on the project name in Solution Explorer to open .csproj file in the editor or Right-click on the project and then click on Edit Project File in order to edit the .csproj file. As shown in the following image.

Once clicked on Edit Project File, .csproj file will be opened in Visual Studio as shown below. Where you can see the target Framework net7.0, by default Nullanle and ImplicitUsings are enabled.

Connected Services

It contains details about all the service references added to the project. A new service can be added here, for example, if you want to add access to Cloud Storage of Azure Storage you can add the service here. As shown in the following image

Dependencies

The Dependencies node contains all the references of the NuGet packages used in the project. Here the Frameworks node contains a reference to the two most important dotnet core runtime and asp.net core runtime libraries. The project contains all the installed server-side NuGet packages, as shown below.

Properties

The properties folder contains a launchSettings.json file, which contains all the information required to lunch the application. Configuration details about what action to perform when the application is executed and contains details like IIS settings, application URLs, authentication, SSL port details, etc.

WWWroot Folder

This is the webroot folder and it contains all the static files required by the project that are stored and served from here. The webroot folder contains a sub-folder to categorize the static file types, like all the Cascading Stylesheet files are stored in the CSS folder, and the external libraries like bootstrap, images, etc. wwwroot folder is shown below.

Data Folder

The data folder only exists in the Blazor Server App project. It contains classes and implementations related to data.

The data folder contains the WeatherForecast class and implementation of WeatherForecastService that provides weather data to the application FetchData component.

Pages Folder

The Pages folder contains the components/pages that can be routed from the Blazor application. The route for each page is determined using the @page directive. The component has a .razor extension.

Blazor Server app project has three files, those are Index.razor, Counter.razor, and FetchData.razor, and will be executed when selecting a menu Home, Counter, and Fetch data. The other two files, _Host.cshtml and Error.cshtml, are only owned by Blazor Server App.

_Host.cshtml

• It is the root page in the Blazor Server project, which is implemented as a razor page.
• When the first request is made, this page is displayed in response.
• The host page as HTML, HEAD, and BODY tags specifies where the application’s root component App.razor must be provided.
• The page loads the _framework/blazor.server.js file. This file is responsible for managing the real-time SignalR connection between the browser and the server. This connection is used to exchange information between clients and servers.

Error.razor 

The file is run when an unhandled exception occurs in the application.

Counter.razor

It Implements the counter page.

FetchData.razor

It Implements the fetch data page.

Index.razor

It Implements the Home page.

Shared Folder

It contains other UI components in the form of .razor files that are used together in applications.

• MainLayout.razor: Application Main layout components.
• MainLayout.razor.css: Stylesheet for the applications main layout.
• NavMenu.razor: It implements the sidebar navigation menu. Components NavLink creates navigation links to other Razor components. The component NavLink highlights the selected navigation menu item; it helps the user to know which component is currently displayed.
• NavMenu.razor.css: Stylesheet for the application navigation menu.
• SurveyPrompt.razor: It is the Blazor Survey components.

_Imports.razor

• This file contains the list of common namespaces that use @using directives so that it doesn't have to include it in every razor component.
• The following are the contents of the file_Imports.razor in the Blazor Server project.

App.razor

• This file is the application’s root component that manages client-side routing using the Router component.
• The contents are the same for the Blazor Server and Blazor WebAssembly projects.

• The Router component renders pages that match the requested address.
• The router uses the Found property to display 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.

appsettings.json

• This file only exists in the Blazor Server project. Used to save application configuration settings.

This file contains the application settings, for example, configuration details like logging details, database connection details.

Program.cs

This class is the entry point of the Blazor Server application. It contains Main() method.  It contains the application startup logic, including service registrations and request processing pipeline configuration.

Conclusion

In this article we explained, the project structure of Blazor in ASP.NET Core 7.0. I hope this article is easy to understand.