Author : HASSAN MD TAREQ | Updated : 2020/05/15

Building blocks

  • Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS (both client and server code is written in C#, allowing you to share code and libraries)
  • Razor view engine
    • .razor files (C# + HTML)
    • Razor syntax
  • Blazor server
    • ASP.Net core app (same Program.cs & Startup.cs)
    • Uses SignalR (WebSocket) for two way communication
    • _Host.cshtml Razor page host the blazor app
      • App.razor configures routing and Layout (MainLayout)
      • .razor files in ‘Pages’ folder are razor/blazor components (page components, normal components)
      • Blazor page components will be rendered accorting to routing in App.razor inside MainLayout
      • The whole Blazor app will be embedded into _Host.cshtml
      • Pages/index.razor is blazor app index which will be inside MainLayout (MainLayout will be embedded into _Host.cshtml)
  • Blazor WebAssembly:
    • mono.wasm : mono runtime as WebAssembly that can run on browser
    • BlazorApp.dll + NetStandard.dll, Xxx.dll : will be downloaded by browser (<script src="_framework/blazor.webassembly.js"></script> in index.html) and run on top of mono.wasm

How Blazor Works

How does blazor work Step 1

How does blazor work Step 2

Server side blazor

Client side blazor

Client side blazor

Client side blazor

Blazor Server vs Blazor WebAssembly

Which one to use when?

Blazor Server vs Blazor WebAssembly