# Blazor Blazor apps are based on *components*. A **component** in Blazor is an element of UI, such as a page, dialog, or data entry form. Components are .NET C# classes built into .NET assemblies that: - Define flexible UI rendering logic. - Handle user events. - Can be nested and reused. - Can be shared and distributed as Razor class libraries or NuGet packages. ![Blazor Server Architecture](../../../img/dotnet_blazor-server.png) ![Blazor WASM Architecture](../../../img/dotnet_blazor-webassembly.png) The component class is usually written in the form of a Razor markup page with a `.razor` file extension. Components in Blazor are formally referred to as *Razor components*. ## Project Structure & Important Files ### Blazor Server Project Structure ```txt Project |-Properties | |- launchSettings.json | |-wwwroot --> static files | |-css | | |- site.css | | |- bootstrap | | | |- favicon.ico | |-Pages | |- _Host.cshtml --> fallback page | |- Component.razor | |- Index.razor | |- ... | |-Shared | |- MainLayout.razor | |- MainLayout.razor.css | |- ... | |- _Imports.razor --> @using imports |- App.razor --> component root of the app | |- appsettings.json --> application settings |- Program.cs --> App entry-point |- Startup.cs --> services and middleware configs ``` ### Blazor WASM Project Structure ```txt Project |-Properties | |- launchSettings.json | |-wwwroot --> static files | |-css | | |- site.css | | |- bootstrap | | | |- index.html | |- favicon.ico | |-Pages | |- Component.razor | |- Index.razor | |- ... | |-Shared | |- MainLayout.razor | |- MainLayout.razor.css | |- ... | |- _Imports.razor --> @using imports |- App.razor --> component root of the app | |- appsettings.json --> application settings |- Program.cs --> App entry-point ``` ### Blazor PWA Project Structure ```txt Project |-Properties | |- launchSettings.json | |-wwwroot --> static files | |-css | | |- site.css | | |- bootstrap | | | |- index.html | |- favicon.ico | |- manifest.json | |- service-worker.js | |- icon-512.png | |-Pages | |- Component.razor | |- Index.razor | |- ... | |-Shared | |- MainLayout.razor | |- MainLayout.razor.css | |- ... | |- _Imports.razor --> @using imports |- App.razor --> component root of the app | |- appsettings.json --> application settings |- Program.cs --> App entrypoint ``` ### `manifest.json`, `service-worker.js` (Blazor PWA) [PWA](https://web.dev/progressive-web-apps/) [PWA MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) [PWA Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) ```json // manifest.json { "name": "", "short_name": "", "start_url": "./", "display": "standalone", "background_color": "#ffffff", "theme_color": "#03173d", "icons": [ { "src": "icon-512.png", "type": "image/png", "sizes": "512x512" } ] } ``` ## Common Blazor Files ### `App.razor` ```cs

Sorry, there's nothing at this address.

 ``` ### `MainLayout.razor` (Blazor Server/WASM) ```cs @inherits LayoutComponentBase
// NavMenu Component
@Body
``` ### `_Host.cshtml` (Blazor Server) ```html @page "/" @namespace BlazorServerDemo.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = null; } BlazorServerDemo
An error has occurred. This application may no longer respond until reloaded. An unhandled exception has occurred. See browser dev tools for details. Reload đź—™
``` ## Components (`.razor`) [Blazor Components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/) ```cs @page "/route/{RouteParameter}" // make component accessible from a URL @page "/route/{RouteParameter?}" // specify route parameter as optional @page "/route/{RouteParameter:}" // specify route parameter type @namespace // set the component namespace @using // using statement @inherits BaseType // inheritance @attribute [Attribute] // apply an attribute @inject Type objectName // dependency injection // html of the page here // access component w/o @using // insert component into page, passing attributes @ChildContent // segment of UI content @code { // component model (Properties, Methods, ...) [Parameter] // capture attribute public Type Property { get; set; } = defaultValue; [Parameter] // capture route parameters public type RouteParameter { get; set;} [Parameter] // segment of UI content public RenderFragment ChildContent { get; set;} private void CallbackMethod() { } } ``` ## State Management ## Passing state with `NavigationManager` It's now possible to pass state when navigating in Blazor apps using the `NavigationManager`. ```cs navigationManager.NavigateTo("/", new NavigationOptions { HistoryEntryState = value }); ``` This mechanism allows for simple communication between different pages. The specified state is pushed onto the browser’s history stack so that it can be accessed later using either the `NavigationManager.HistoryEntryState` property or the `LocationChangedEventArgs.HistoryEntryState` property when listening for location changed events. ### Blazor WASM ```cs // setup state singleton builder.Services.AddSingleton(); ``` ```cs // StateContainer singleton using System; public class StateContainer { private int _counter; public string Property { get => _counter; set { _counter = value; NotifyStateChanged(); // will trigger StateHasChanged(), causing a render } } public event Action OnChange; private void NotifyStateChanged() => OnChange?.Invoke(); } ``` ```cs // component that changes the state @inject StateContainer State // Delegate event handlers automatically trigger a UI render @code { private void HandleClick() { State.Property += 1; // update state } } ``` ```cs // component that should be update on state change @implements IDisposable @inject StateContainer State

Property: @State.Property

@code { // StateHasChanged notifies the component that its state has changed. // When applicable, calling StateHasChanged causes the component to be rerendered. protected override void OnInitialized() { State.OnChange += StateHasChanged; } public void Dispose() { State.OnChange -= StateHasChanged; } } ``` ## Data Binding & Events ```cs