What Is Blazor?

Blazor applications are composed of components that are constructed using C#, HTML-based Razor syntax, and CSS.

Blazor has two different runtime modes: server-side Blazor and client-side Blazor, also known as Blazor WebAssembly. Both modes run in all modern web browsers, including web browsers on mobile phones.

Server-side Blazor

Figure 2: Server-Side Blazor
© BlazorHelpWebsite.com, used with permission

Server-side Blazor renders the Razor components on the server and updates the webpage using a SignalR connection. The Blazor framework sends events from the web browser, such as button clicks and mouse movements, to the server. The Blazor runtime computes changes to the components on the server and sends a diff-based webpage back to the browser.

Client-side Blazor (WebAssembly)

Figure 3: Client-Side Blazor (WebAssembly)
© BlazorHelpWebsite.com, used with permission

Client-side Blazor is composed of the same code as server-side Blazor; however, it runs entirely in the web browser using a technology known as WebAssembly.

The primary difference in Blazor applications that are created in server-side Blazor versus client-side Blazor is that the client-side Blazor applications need to make web calls to access server data, whereas the server-side Blazor applications can omit this step, as all their code is executed on the server.

One way to think of Blazor is that Blazor is a framework for creating SPA webpages using one of two architectures (client side or server side), using Razor technology written with the C# language.

Because client-side Blazor with WebAssembly executes entirely on a user's browser, it is very fast for many applications.

The Syncfusion Help Desk sample application covered in this book will be built using client-side Blazor.

Core Blazor features

Components and routing

A Blazor application is composed of components. A component is a chunk of code consisting of a user interface and processing logic. A Blazor component is also called a Razor component.

Blazor features routing, where you can provide navigation to your controls using the @page directive followed by a unique route in quotes preceded by a slash.

The following is an example of a simple Razor component called ComponentExample.razor.

Code Listing 1: ComponentExample.razor

The following shows what the component looks like in a running application.

Figure 4: A Simple Component

A Razor component is contained in a .razor file and can be nested inside of other components.

For example, we can create a component named ComponentOne.razor using the following code.

Code Listing 2: ComponentOne.razor

We can alter ComponentExample.razor to contain ComponentOne.razor.

Code Listing 3: ComponentExample.razor

The following shows what ComponentExample.razor now looks like when running in the application.

Figure 5: Nested Component

Note: A component's name must start with an uppercase letter.

Parameters

Razor components can pass values to other components using parameters. Component parameters are defined using the [Parameter] attribute, which must be declared as public.

For example, we can create a Razor component called ParameterExampleComponent.razor that contains a parameter called Title.

Code Listing 4: ParameterExampleComponent.razor

We create another Razor component called ParameterExample.razor that consumes the ParameterExampleComponent.razor control and passes a value (“Passed from Parent”) to the Title parameter in the ParameterExampleComponent.razor control.

Code Listing 5: ParameterExample.razor

When we run the application, we get the following result.

Figure 6: Parameter Example

Data binding

Simple, one-way binding in Blazor is achieved by declaring a parameter and referencing it using the @ symbol. An example of this is shown in the following code.

Code Listing 6: One-Way Binding

This displays the following when rendered.

Figure 7: One-Way Binding

Two-way, dynamic data binding in Razor components is implemented using the @bind attribute.

The following example demonstrates this.

Code Listing 7: Two-Way Binding

When we run the code, it displays the value entered into the text input box as text is typed in.

Figure 8: Two-Way Binding

Events

Raising events in Razor components is straightforward. The following example demonstrates using the @onclick event handler to execute the method IncrementCount when the button is clicked.

Code Listing 8: Simple Event

When the control is rendered and the button is clicked six times, the UI looks like this.

Figure 9: Simple Event