C# Full Stack Development with Blazor (Part 2)

In the previous blog post, we discovered what Blazor is and what it can do. Today we will focus on the Blazor’s components, Layouts, dependency injection and routing systems.

Blazor components

Blazor apps are based on components. A component is a piece of UI such as pages, forms, etc. It includes both the HTML tags to render and the required logic behind to display data or respond to user events. Components can be nested, reused in different components and even shared between projects.

Components are C# classes that can be written in standalone files (.cs) or injected in a razor file (.cshtml) within an @functions block.

The following code snippet defines a component that displays “Hello World !” in an H1 tag

<h1>@text</h1>
@functions {
 private string text = “Hello World !”;
}

To call this component in another one, we simply use an HTML tag with its name. Assuming we defined the previous component in HelloWorld.cshtml, we use it as follows :

<HelloWorld />

The component can also accept parameters to be customized. To do this, we just need to decorate a private property with a [Parameter] attribute. For our sample, if we want to dynamically change the text color, our code will be as follows :

<h1 style=”color:@Color”>@text</h1>
@functions {
 private string text = “Hello World !”;
 [Parameter]
 private string Color {get; set; }
}

and we call the component like this :

<HelloWorld Color=”black”/>

Layouts

Layouts are, like components, pieces of UI that can be defined either in a razor or a C# file but with two differences :

• They must inherit from BlazorLayoutComponent
• They must define a Body property that will contain the content to be rendered.

Here is a definition of a layout :

@inherits BlazorLayoutComponent
<header>
 <h1>Page Header</h1>
</header>
@Body
<footer>
 Page footer
</footer>

And to use this layout, we can just call it in our component using the @layout directive

@layout MasterLayout
@page “/home”
<h2>Home Page</h2>

In some cases, for example, a page that contains a menu, we need to use a layout within another one. That’s what we call nested layouts. Nesting layouts can be done by referencing the first one (using the @layout directive) within the second one (which inherits BlazorLayoutComponent)

SecondLayout.cshtml

@layout FirstLayout
@inherits BlazorLayoutComponent
<nav>
 <! — we put here our menu →
</nav>
@Body

FirstLayout.cshtml

@inherits BlazorLayoutComponent
<header>First Layout</header>
@Body

Dependency Injection

A Blazor app has dependency injection (DI) built in. Defining and injecting services in a Blazor app is made in the same way as an ASP.NET Core one.

In the ConfigureServices method of Startup file, we add services by providing their descriptors to the service collection and using one of the following lifetimes :

• Singleton : a single instance of the service is created and used by all components.
• Transient : a new instance of the service is created every time it is called by components.
• Scoped : Since Blazor’s DI system is based on ASP.NET Core, this scope is available but not used in Blazor Apps.

Here is how we define a service in ConfigureServices method :

services.AddSingleton<IDataAccess, DataAccess>();

And to inject it into components, we use @inject directive like this :

@inject IDataAccess DataRepository

Routing

Routing in Blazor apps is made using a component called Router. This component appears in the App.cshtml file. For each component that is accessible by the application, a route template is provided.

This template is specified for every cshtml file with @page directive at compilation time through a generated RouteAttribute.

At runtime, the Router component scans all the components with the RouterAttribute searching for a template that matches the requested URL.

We can customize routes in several ways:

Add parameters

To add parameters to a route we use the following syntax

@page “/RouteParameter/{text}”

And we define the parameter like this :

@functions {
 [Parameter]
 private string Text { get; set; } = “satoripop”;
}

Add constraints to parameters

To enforce type matching on a route, we can add contraints to the parameters with the following syntax :

@page “/RouteParameter/{id:int}”

This forces the router to use this route only if the id is an int

This was an overview of Blazor which is the new Microsoft framework for building client-side web applications using a .Net framework. Now you have basic elements to start creating Blazor apps and testing the framework. With the new version of ASP.NET Core (3.0 preview at the time of writing this article), Blazor is now named Razor components and you can find more documentation and advanced topics in the official ASP.NET Core documentation by clicking on this link.