Components in Blazor

Blazor is a component-based framework. In that component is defined as a block of the UI, consisting of both HTML and the corresponding business logic. The HTML helps to render the component on the web page, and the logic handles the database operations or the event handling. A Blazor component is lightweight, flexible, and shareable across different projects.

The bottom line is that all UI fragments can be termed components in Blazor.

Creating a component in Blazor

We will now discuss the following two methods for creating components in Blazor:

• Using a single file
• Using a code-behind file

Let’s examine both of them in detail in this section.

Using a single file

We will use a single file with the .cshtml extension to create our component. To create a component file, right-click on the Pages folder of your BlazorDemo project and select New File. Type in the filename as CompDemo.cshtml and press Enter to create the file.

Put the following lines of code inside this file:

@page "/singlepagecomp"

<h1>@PageTitle</h1>
<hr/>
<p>This component is created using a single .cshtml page.</p>

@functions {
string PageTitle = "Component Demo";
}

Both the HTML and the @functions section are defined in only one file, that is, CompDemo.cshtml. Here, we have defined a PageTitleproperty to set the title on the page. On execution, this page will show a heading and a sample message, as defined in this property. But before running this application, we need to add the navigation link to this page to the \Shared\NavMenu.cshtml file. Open the \Shared\NavMenu.cshtml file and add the following code to it:

<li class="nav-item px-3">
  <NavLink class="nav-link" href="singlepagecomp">
    <span class="oi oi-list-rich" aria-hidden="true"></span> Comp Demo
  </NavLink>
</li>

This will add a Comp Demo navigation menu item, which will redirect to the CompDemo.cshtml page when clicked.

Type the dotnet run command into the VS Code console and press Enter. Open the URL in the browser, and you should see a page similar to one shown in the following screenshot:

You can observe that we have a Comp Demo link in the navigation menu on the left. Click on it to navigate to the CompDemo.cshtml component. It should open a page like the one shown in the following screenshot:

You can observe that the route URL of the page has /singlepagecomp attached to it, and that the message is being displayed on the page as we defined it in our component.

Using a code-behind file

In this method, we will be using two files to create our component—one file to hold the HTML part of the component and another to hold the logic part of the component.

To add the files, we will follow the same process that we employed earlier. Right-click on the Pages folder and select New File. Name the file CodeBehindComp.cshtml and press Enter to create the file. This file will contain the HTML section of our component. Similarly, add one more file, CodeBehindComp.cshtml.cs, to the Pages folder. This file will contain our logic section, which will define the members of the component class.

Open CodeBehindComp.cshtml.cs and put the following code into it:

using Microsoft.AspNetCore.Blazor.Components;

namespace BlazorDemo.Pages
{
    public class CodeBehindCompModel : BlazorComponent
    {
        public string PageTitle { get; set; } = "Component Demo";
    }
}

Here, we have defined a CodeBehindCompModel class that contains a PageTitle string property, which sets the title of the component once it is rendered as a web page in the browser.

Note that the Blazor compiler generates classes for all of the view pages with the same name as the page name; hence, we have suffixed the class name with the word “model” to distinguish it from the page name. If we use the same class name as page name (CodeBehindComp, in this case), then it will result in a compile time error.

Open CodeBehindComp.cshtml and put the following code into it:

@page "/codebehindcomp"
@inherits CodeBehindCompModel

<h1>@PageTitle</h1>

<p>This component is created using two files,.cshtml and.cshtml.cs</p>

This page will inherit the class defined in our code-behind page by using the @inherits directive. This allows us to use all of the properties and methods defined in the class from this page.

Add the navigation link for this page, as defined in the following snippet, inside the \Shared\NavMenu.cshtml file:

<li class="nav-item px-3">
  <NavLink class="nav-link" href="codebehindcomp">
    <span class="oi oi-list-rich" aria-hidden="true"></span> Code Behind Comp
  </NavLink>
</li>

Execute the application by running the dotnet run command, and click on the Code Behind Comp link in the navigation menu on the left. You should see a page similar to the one shown in the following screenshot:

Here, the title of the page is set to Component Demo because of the PageTitle variable defined in the code-behind file, whereas the messages is displayed using the HTML defined in the .cshtml file.

Using a component within another component

The Blazor framework also allows us to use a component within another component. This will work like a parent-child relationship, where the parent component can refer to the child component.

We will demonstrate this concept with the help of an example.

Create two files in the Pages folder, and name them ParentComp.cshtml and ChildComp.cshtml.

Open the ChildComp.cshtml page and put the following code into it:

<hr/>
<h3> Welcome to the Child Component</h3>

@ChildContent

@functions {

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

Here, we first defined some dummy messages to be displayed on the page. There is no route defined for this component, as it will act as a child component and will be referred to by another component. The parent component will pass the content to the child component so that it can be rendered in a <div> tag. We will use a RenderFragment property, ChildContent, to hold the message supplied by the parent component. ChildContent is a component parameter decorated by the [Parameter] attribute. RenderFragment is defined in the application metadata, and represents a segment of the UI content, implemented as a delegate that writes the content to an instance of Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder.

The component parameter must fulfill the following two criteria:

• It must be a non-public property
• The component parameter that will receive the RenderFragment content must be named ChildContent

Open ParentComp.cshtml and enter the following code:

@page "/ParentComponent"

<h1>Parent-child example</h1>

<ChildComp>
    This is parent component data.
</ChildComp>

We defined the route of this application at the top of the preceding snippet as /ParentComponent. To refer to the child component, we use a tag with the same name as the file name of the child component, which is <ChildComp>in this case. The RenderFragment parameter is provided between the tags of the child component. In this case, we provide a string message that will be rendered by the child component.

Before executing the code, we need to add the following navigation link of the parent component to the \Shared\NavMenu.cshtml file:

<li class="nav-item px-3">
  <NavLink class="nav-link" href="ParentComponent">
    <span class="oi oi-list-rich" aria-hidden="true"></span> Parent-Child
  </NavLink>
</li>

Run the application and click on the Parent-Child link in the navigation menu. You should see a page similar to the following screenshot:

You can see the content of the parent component, along with that of the child component, displayed on the page.

If you found this article interesting, you can explore Blazor Quick Start Guide to work with the fundamentals of Blazor to create rich and interactive web application. Blazor Quick Start Guide introduces you to the core concepts of Blazor, and how to apply these to a real-world web app with the help of Entity Framework Core and SQL Server.