Blazor is an experimental .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly. Blazor provides all of the benefits of a client-side web UI framework using .NET on the client and optionally on the server.
Why use .NET in the browser?
Web development has improved in many ways over the years, but building modern web apps still poses challenges. Using .NET in the browser offers many advantages that can help make web development easier and more productive:
Stability and consistency: .NET provides standardized programming frameworks across platforms that are stable, feature-rich, and easy to use.
Modern innovative languages: .NET languages are constantly improving with innovative new language features.
Industry-leading tools: The Visual Studio product family provides a fantastic .NET development experience across platforms on Windows, Linux, and macOS.
Speed and scalability: .NET has a strong history of performance, reliability, and security for app development. Using .NET as a full-stack solution makes it easier to build fast, reliable, and secure apps.
Full-stack development that leverages existing skills: C#/Razor developers use their existing C#/Razor skills to write client-side code and share server and client-side logic among apps.
Wide browser support: Blazor runs on .NET using open web standards in the browser with no plugins and no code transpilation. It works in all modern web browsers, including mobile browsers.
How Blazor runs .NET in the browser
Running .NET code inside web browsers is made possible by a relatively new technology, WebAssembly (abbreviated wasm). WebAssembly is an open web standard and is supported in web browsers without plugins. WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed.
WebAssembly code can access the full functionality of the browser via JavaScript interop. At the same time, WebAssembly code runs in the same trusted sandbox as JavaScript to prevent malicious actions on the client machine.
When a Blazor app is built and run in a browser:
C# code files and Razor files are compiled into .NET assemblies.
The assemblies and the .NET runtime are downloaded to the browser.
Blazor uses JavaScript to bootstrap the .NET runtime and configures the runtime to load required assembly references. Document object model (DOM) manipulation and browser API calls are handled by the Blazor runtime via JavaScript interoperability.
To support older browsers that don't support WebAssembly, Blazor falls back to using an asm.js-based .NET runtime.
Blazor components
Blazor apps are built with components. A component is a piece of UI, such as a page, dialog, or data entry form. Components can be nested, reused, and shared between projects.
In Blazor, a component is a .NET class. The class can either be written directly, as a C# class (.cs), or more commonly in the form of a Razor markup page (.cshtml).
Razor is a syntax for combining HTML markup with C# code. Razor is designed for developer productivity, allowing the developer to switch between markup and C# in the same file with IntelliSense support. The following markup is an example of a basic custom dialog component in a Razor file (DialogComponent.cshtml):
