Project Structure in Blazor

3 Projects Created

• MyApp.Client – wwwroot, Pages
• MyApp.Server – Controller
• MyApp.Shared – Shared Classes

Program.cs File

• Entry point
• Main()

Pages Folder

• xxxxx.razor

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

Startup.cs File

• ConfigureServices()
• Configure()

App.razor File

• Router component

_Imports.razor File

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using MyBlazorApp.Client
@using MyBlazorApp.Client.Shared

appsettings.json File

• Used to save application configuration settings.

wwwroot Folder

wwwroot/index.html File

• It is the root page in the Blazor WebAssembly project which is implemented as an HTML page.
• When the first request was made, this page was displayed in response.
• The page has standard HTML, HEAD, and BODY tags and specifies where the application’s root component, App.razor must be provided.
• The page loads the file_framework/blazor.webassembly.js . This file is responsible for:
  – downloading compiled applications, dependencies, and .NET runtimes,
  – initializing the runtime to run Blazor applications in the browser.

Shared Folder

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

• MainLayout.razor: main application layout components.
• NavMenu.razor: implements the sidebar navigation menu. Components NavLink create navigation links to other Razor components. The component NavLinkhighlights the selected navigation menu item, helping the user know which component is currently displayed.

Any content you intend to act as a layout template for pages must descend from the LayoutComponentBaseclass. To indicate where you want the content of your page to appear you simply output the contents of the Body property.

Note that this is not the entire HTML page. Blazor layouts work only within the part of the HTML that Blazor is defined within the wwwroot\index.html page, in a default Blazor application this is everything within the <app> element. It isn’t currently possible to alter attributes of HTML elements outside of this scope except by use of JavaScript Interop.

Sources:

Creating a Blazor layout