In this blog, we are going to discuss the files and folders in ASP.Net Core Blazor project. Please refer to my previous article to grab the Blazor overview.
For this blog I have used the below tools,
- Microsoft Visual Studio Community (64-bit) - Version 17.0.5
- .NET 6.0
Let us start with the file Program.cs.
Program.cs
This file contains the method called Main() – which is the entry point for both project types – Blazor WebAssembly and Blazor Server.
Blazor Server Project
Here the Main() method calls WebApplication.CreateBuilder(args), which sets up the ASP.NET Core host
Blazor WebAssembly Project
The Main() method calls WebAssemblyHostBuilder.CreateDefault(args), which create the host.
Since Startup.cs has been removed from .NET 6.0, Dependency Injection, middleware components etc will be configured in this file.
Wwwroot
In both project types, this folder contains the static files like images, stylesheets, etc
App.razor
This is the root component of the application. It sets up client-side routing using the built-in component called Router. This component intercepts browser navigation and renders the page that matches the request address. This component uses two properties – Found and NotFound
- Found – to display the content when a match is found
- NotFound – to display the message – “Sorry, there’s nothing at this address”, when there no matching found.
Pages Folder
Contains _Host razor page and the routable components that make up Blazor app.
- _Host.cshtml - this is the root page. When any page of the app is initially requested, this page is rendered and returned in response.
- _layout.cshtml – the layout page for the root page _host.cshtml
- Counter.razor – Implements the Counter page.
- Error.razor – Rendered when an unhandled exception occurs.
- FetchData.razor – Implements the fetch data page.
- Index.razor – implements the home page.
The route for each page is specified using the directive - @page
Shared
This folder contains the following shared components and stylesheets.
- MainLayout.razor – this is application’s main component.
- NavMenu.razor – using this component, sider navigation will be implemented. NavLink component, renders navigation links to other razor components such as Index, Counter and FetchData components. This NavLink helps users to recognize which page currently displayed.
- NavMenu.razor.css – this page contains stylesheets for the navigation menu.
- SurveyPrompt.razor – this is the blazor survey component.
_Imports.razor
This file contains the common namespaces, so we do not need to include them in each razor components. This can be achieved using the directive @using. This is one of the features in .NET 6.0 called global using directive.
Wwwroot/index.html
This is the root page in Blazor WebAssembly and is implemented as html page. When a first request hits the application, this is the page which is initially requested and rendered in the response. This page contains a section <div id="app">Loading...</div> where the app component is rendered.
This page has the below JavaScript reference -
<scriptsrc="_framework/blazor.webassembly.js"></script>
This file has the below responsibilities
- Download compiled blazor application, its dependencies and .NET runtime
- Initialize the runtime to run the blazor app in the browser.
Data
This folder exists only in Blazor server project. Contains code files related to the sample WeatherForecast service.
Appsettings.json
This file contains Configuration settings like an asp.net core mvc projects.
For more details regarding the project structure. Please refer the Microsoft documentation.
Blazor Server Blazor WebAssembly are two different ways we can host a Blazor application. Everything in Blazor application is razor components.
Thank you for reading my article. Please leave your comments in the below comment section.