# 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](https://docs.microsoft.com/en-us/aspnet/core/blazor/index/_static/blazor-server.png) ![Blazor WASM Architecture](https://docs.microsoft.com/en-us/aspnet/core/blazor/index/_static/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 Stucture ```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 entrypoint |- 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 entrypoint ``` ### `App.razor` ```cs // for component routing

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 (optional) @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() { } } ``` ## Javascript/.NET Interop [Call Javascript from .NET](https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet) [Call .NET from Javascript](https://docs.microsoft.com/en-us/aspnet/core/blazor/call-dotnet-from-javascript)