Blazor
Blazor looks like razor pages (.cshtml, the MVC without controllers/models), but .razor files are components, not pages, and work like a SPA (Angular, React, Vue). The razor components are similar to webforms controls, for older devs... learn.microsoft.com
The first release was in 2020 (.net Core 3.1) with major updates in .net 6 (2022) and net 8 (2023)
- Blazor WASM/Web Assembly - compiles into browser byte-code which are downloaded and executed in the browser (basically, like javascript but in C#). The static dll files are big (the entire Net framework + your app).
- Blazor Server - executes on the server and the razor turns into html (like mvc)- but the trick is to use SignalR (websockets) to update page fragments
- Blazor Hybrid - for WPF/Winforms/Maui apps, running in a native app and render html (not webassembly) into a webview.
- Blazor SSR (net 8+) - server side rendering, renders html (like server, but more like MVC). There is no signalR, but blazor.web.js intercepts form posts with fetches, allowing partial page updates (hello again, webforms UpdatePanel). With renderMode Auto, the first page can initialize fast as SSR, an continue to download until it switches to WASM
WASM Project Structure
The standard visual studio template...
- /Pages - routable pages (.razor with @page directive)
- /Shared (or /Components) - components (.razor, includes MainLayout.razor)
- /wwwroot - static website. Up to .net7 included index.html (blazor is rendered into div id="app")
- _Imports.razor - common using statements
- App.razor - does the main routing (Router Found/NotFound). From .net8:
- includes the html index content with a <Routes /> component.
- There is a separate Routes.razor
- Program.cs - static Main with a builder (WebAssemblyHostBuilder.CreateDefault) and adds services.
Which type of blazor? Check the script reference in the index.html/App.razor
- <script src="_framework/blazor.webassembly.js"></script> Blazor WASM/Web Assembly
- <script src="_framework/blazor.server.js"></script> Blazor Server (SignalR websockets)
- <script src="_framework/blazor.web.js"></script> .net8+ Blazor webapp (static server rendering which this script enhances)
The key types of components (=razor files = classes):
- Components - general
- Routable pages - components with a @page="/" address (which the Router in app.razor will find)
- A page can have more than one @page directives
- The RouteView has a DefaultLayout="@typeof(MainLayout)"
- Pages can override the layout
- <Router AppAssembly="@typeof(App).Assembly">- the router (App.razor) looks in the current assembly. You will probably need to specify AdditionalAssemblies="new[] { typeof(Component1).Assembly }"
Hosting WASM in a standard Asp.net core project
- See webassembly#hosted-deployment-with-aspnet-core
- Publish the WASM project into the asp.net wwwroot publish folder (it's just static files- app.UseStaticFiles();)
- In the asp project, stop asp serving the static wasm:
- Nuget install Microsoft.AspNetCore.Components.WebAssembly.Server
- Add a project reference from asp.net project to the WASM project
- In program.cs add app.UseBlazorFrameworkFiles(); BEFORE app.UseStaticFiles();
Nuget packages
- Microsoft.AspNetCore.Components.WebAssembly.Authentication - auth
- Microsoft.Extensions.Http - for HttpClient to connect to webapi
- Microsoft.Extensions.Localization - if you do any localization
Company proxies can stop Blazor debugging. Control Panel-User Accounts-Change my environment variables add NO_PROXY with value localhost,127.0.0.1 (docs)