Introduction to ASP.NET Core Blazor

Introduction to ASP.NET Core Blazor

Blazor is a framework for building interactive client-side web UI with . NET: Create rich interactive UIs using C# instead of JavaScript. The Blazor framework uses WebAssembly-based . NET runtime (client-side Blazor) and server-side ASP.NET Core (server-side Blazor). Blazor WebAssembly is a single-page app framework for building interactive client-side web apps with .NET. Blazor Server: Blazor decouples component rendering logic from how UI updates are applied. Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a SignalR connection.

Welcome to Blazor!

Blazor is a framework for building interactive client-side web UI with .NET:

  • Create rich interactive UIs using C# instead of JavaScript.
  • Share server-side and client-side app logic written in .NET.
  • Render the UI as HTML and CSS for wide browser support, including mobile browsers.

Using .NET for client-side web development offers the following advantages:

  • Write code in C# instead of JavaScript.
  • Leverage the existing .NET ecosystem of .NET libraries.
  • Share app logic across server and client.
  • Benefit from .NET's performance, reliability, and security.
  • Stay productive with Visual Studio on Windows, Linux, and macOS.
  • Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

Components

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 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

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. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with IntelliSense support. Razor Pages and MVC also use Razor. Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

The following Razor markup demonstrates a component (Dialog.razor), which can be nested within another component:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

The dialog's body content (ChildContent) and title (Title) are provided by the component that uses this component in its UI. OnYes is a C# method triggered by the button's onclick event.

Blazor uses natural HTML tags for UI composition. HTML elements specify components, and a tag's attributes pass values to a component's properties.

In the following example, the Index component uses the Dialog component. ChildContent and Title are set by the attributes and content of the <Dialog> element.

Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

The dialog is rendered when the parent (Index.razor) is accessed in a browser:

Dialog component rendered in the browser

When this component is used in the app, IntelliSense in Visual Studio and Visual Studio Code speeds development with syntax and parameter completion.

Components render into an in-memory representation of the browser's Document Object Model (DOM) called a _render tree_, which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly

Blazor WebAssembly is a single-page app framework for building interactive client-side web apps with .NET. Blazor WebAssembly uses open web standards without plugins or code transpilation and works in all modern web browsers, including mobile browsers.

Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly is an open web standard and supported in web browsers without plugins.

WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript interop). .NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor WebAssembly runs .NET code in the browser with WebAssembly.

When a Blazor WebAssembly 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 WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

The size of the published app, its _payload size_, is a critical performance factor for an app's useability. A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimizes payload size to reduce download times:

  • Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • HTTP responses are compressed.
  • The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor decouples component rendering logic from how UI updates are applied. Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a SignalR connection.

The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

JavaScript interop

For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can call into JavaScript code, and JavaScript code can call into C# code.

Code sharing and .NET Standard

Blazor implements .NET Standard 2.0. .NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException

blazor dotnet webassembly web-development

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Blazor vs. React for Web Developers

A comparison of Blazor and React when it comes to modern web development—a review of the pros and cons. Does Blazor stack up? Blazor WebAssembly or Blazor Wasm, which runs in the browser using WebAssembly. Getting started, Building the UI, Passing data between components, Handling Forms, Routing, Fetching data from an API, Pros and cons of each

Learn Blazor WebAssembly - Build Your First Web Application

Learn Blazor WebAssembly - Build Your First Web Application. How to build your first application that runs IN the browser with C# and Blazor. Learn how to build a next-generation SPA (single-page application) using HTML, CSS, JavaScript interop, and Blazor. Blazor is a new framework that allows you to write .NET code that runs on WebAssembly technology inside the browser. What is Blazor? Learn how to build client-side Web apps using Blazor and how to secure them with Auth0.

Create CRUD App with ASP.NET Core, Blazor WebAssembly, Web API, VScode

In this Blazor WebAssembly tutorial, we will see how to create a simple CRUD application for ASP.NET Core Blazor using Visual Studio, .NET Core 3, Entity Framework and Web API. Blazor is a new framework introduced by Microsoft. How to build CRUD (CREATE, READ, UPDATE & DELETE) App using the Blazor SPA Framework, Entity Framework and SQL server. How to create a web application using Blazor with the help of Entity Framework Core. CRUD Using Blazor And Entity Framework Core in ASP.NET Core 3.0.

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Blazor Tutorial For Beginners - Getting Started with Blazor

Blazor For Beginners - Getting Started with Blazor, we will discuss the basics of Blazor and the tools required for Blazor Application Development. We will go in-depth with the concept of Blazor, the problem it solves, how to set up the development environment, talk about Server and WebAssembly, fire up your first Blazor Application, and a small comparison of various types of Blazor Projects.