Blazor — Full stack web development: Get started

In this article, we’ll explore what all need to start development with Blazor. Initial setup, project templates, components, data binding, events etc. You can visit here to get basic understanding about Blazor.

Setup

Install the following:

1. .NET Core 2.1 SDK (2.1.402 or later).
2. Visual Studio 2017 (15.8 or later) with the ASP.NET and web development workload selected.
3. The latest Blazor Language Services extension from the Visual Studio Marketplace.
4. The Blazor templates on the command-line:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

It will add three templates: Blazor, Blazor (ASP.NET Core hosted), and Blazor (Server-side in ASP.NET Core). We’ll see details in next section.

Set Blazor to run

Now that we installed our dependencies let’s open Visual Studio and create a new Blazor project from the provided template.

To create the project in Visual Studio:

1. Select File > New > Project. Select Web > .NET Core > ASP.NET Core Web Application. Name the project “BlazorFullStack” in the Name field. Select OK.

Blazor: Select Project Type

2. The New ASP.NET Core Web Application dialog appears. Make sure .NET Core and ASP.NET Core 2.1 is selected at top. Three Blazor related project types will appear:

a. Blazor:

Blazor: Solution explorer for Client-side template

Is a client-side template having a set of static resources. Projects built with this template can be hosted on virtually any resource that can serve static files like static website hosting, GitHub, Azure storage etc.

b. Blazor (ASP.NET Core hosted):

Blazor: Solution explorer for Full-stack template

Is a full-stack template encompasses the same project structure as the client-side template with few additions like ASP.NET Core hosting, a Web API, and a shared project for common application logic. The template includes three projects: a Client-Side Blazor application, Blazor.Client, an ASP.NET Core server application, Blazor.Server, and a shared .NET Standard project for common application logic, Blazor.Shared.

c. Blazor (Server-side in ASP.NET Core):

Blazor: Solution explorer for Server-side template

Is a server-side project template. Using the server-side configuration, Blazor utilizes the browser as a “thin-client” by deploying a SignalR JavaScript application to the client. On the server, Blazor implements a SignalR hub communicating with the client via web sockets. In the server-side hosting model, Blazor is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over the SignalR connection. In this configuration, there is no need for WebAssembly and Blazor is executed on the ASP.NET Core runtime at the server. All UI updates are sent as diffs, bidirectionally as binary packets over web sockets.

With the Client-Side, Full-Stack, and Server-Side project templates developers can choose the starting point that best fits their application’s requirements. The Client-Side template focuses on running static files completely in the browser, while the Full-Stack template includes ASP.NET Core hosting and Web API. Using the Server-Side template utilizes the Blazor framework on the server and relies on SignalR in place of WebAssembly thus trading performance for a dependency on always being connected. All views in client-side and full stack templates are rendered on client side although application is hosted on .NET server.

Let’s choose the Blazor (ASP.NET Core hosted) template and select OK.

3. Once project is created, press F5 to run the app. The Blazor app runs in the browser:

If you look at the output of a compiled Blazor application, you’ll see the mono.wasm module along with the mono.js loader plus the Blazor JavaScript runtime that loads the runtime and mediates between .NET and JavaScript.

Blazor: Build output

Note that there are no .cshtml template files sent to the browser. All Razor pages, as well as any loose C# files you create to reference support classes and logic, are compiled and shipped as code to the client in the BlazorFullStack.Client.dll file.

Blazor: Browser download

Let’s see if we can understand how Blazor is using Mono and WebAssembly to run this project.

Open the index.html file of your project and you will see it is surprisingly simple.

The header loads the styles while the body contains an <app> element where the application will later be mounted, plus a script reference for blazor.webassembly.js which is the one starting the bootstrap process of the app in the browser.

index.html

The script blazor.webassembly.js is quite important as it is the one in charge of starting the application, including downloading and starting the Mono WebAssembly runtime. If you open the network tab of your browser, you will see the following sequence:

• The blazor.webassembly.js is downloaded
• The blazor.boot.json is downloaded by blazor.webassembly.js
• The mono.js script is downloaded by blazor.webassembly.js
• The mono.wasm WebAssembly module is downloaded by mono.js
• All the dlls needed for the project are downloaded by blazor.webassembly.js

The information contained in blazor.boot.json is generated at compile time and basically describes the assemblies needed by your application, your main assembly and the entrypoint function:

blazor.boot.json

Blazor Features

Components

Blazor apps are built using components. A component is a self-contained chunk of user interface (UI), such as a page, dialog, or form. A component includes both the HTML markup to render along with the processing logic needed to inject data or respond to UI events. Components are flexible and lightweight, and they can be nested, reused, and shared between projects.

Blazor leverages the Razor templating engine extensively. If you are already familiar with Razor, you can easily write Blazor components. Below are different types of components we can create:

• @Page: is a component that acts as a top-level component that is View or Page and is typically associated with a route. Example:

• Layout: a Layout page into which @Body content is loaded. Example:

• Component: an embeddable component. Can also be used like a Partial. Example:

Reactivity and data binding

Blazor components are reactive, means any change in associated property will trigger the component to re-render. It works similar to client-side frameworks like Angular, React or Vue. bind attribute is used to bind/associate property with html elements.

Let’s update index page to add an input box. User can enter his/her name and the same will be displayed:

Once you run the updated code following updated index page should be rendered. Type your name in the input box, page will re-render (only <p> element of index and <strong> element of SurveyPrompt).

Event Handling

Blazor provides event handling features. For an HTML element attribute named on<event> (for example, onclick, onsubmit, onchange) with a delegate-typed value, Blazor treats the attribute’s value as an event handler. For example:

I’ll cover more topics like Dependency Injection, JavaScript Interop, HTTP request and others in next article. For now, enjoy reading :)