What are Blazor Components? | Blazor Tutorial

Before getting into this article, we would suggest you please read all our other Blazor articles for more and sequential information about ASP .NET Core Blazor with the links below:

1. Chapter 1: Blazor Interview Questions and Answers
2. Chapter 2: What is ASP.NET Core Blazor?
3. Chapter 3: Blazor Vs Angular
4. Chapter 4: Blazor hosting models
5. Chapter 5: Project Structure in Blazor
6. Chapter 6: What are Blazor Components
7. Chapter 7: net core razor components in details | Nesting Razor Components
8. Chapter 8: Blazor Model Classes
9. Chapter 9: Data Bindings in Blazor
10. Chapter 10: Data access technique in blazor

Blazor Component

A component is an independent part of the (UI, for example, a page, discourse, or structure. Blazor applications are made utilizing parts that are adaptable, lightweight, and can be settled, reused, and shared between ventures. A component is the base component of the Blazor application, i.e., each page is considered as a segment in Blazor.

It utilizes the mix of Razor, HTML, and C# code as a part.

Component Class

A component in Blazor winds up as a class including both the HTML markup to deliver alongside the preparing rationale expected to infuse information or react to UI occasions.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

Blazor segments are executed in *.cshtml records utilizing a mix of C# and HTML markup. The UI for a segment is characterized utilizing HTML while dynamic delivering rationale like circles, conditionals, articulations are included utilizing an installed C# language structure called Razor.

In the work square, we can characterize all the properties that are utilized in see markup, and the techniques are bound with control as an occasion.

At the point when a Blazor application is assembled, the HTML markup and C# delivering rationale are changed over into a part class, and the name of the produced class coordinates the name of the record.

Component Members

Individuals from the segment class are characterized in a @functions square, and you can utilize more than one @functions obstruct in a part. In the @functions square, segment states, for example, properties and fields are determined alongside strategies for occasion taking care of or for characterizing other part rationales. Segment individuals would then be able to be utilized as a major aspect of the part's delivering rationale utilizing C# articulations that start with @.

Make Component from Code Behind

You can make see markup and C# code rationale in discrete records while making a Blazor component.

Utilizing @inherits order to advise the Blazor compiler to get the class produced from the Razor see from the class indicated with this mandate.

The class indicated with @inherits mandate must be acquired from BlazorComponent class and it gives all base usefulness to the component.

We should move the C# code rationale from Counter.cshtml document to a different code-behind class.

using Microsoft.AspNetCore.Blazor.Components;

namespace BlazorApplication
{
    public class CounterClass : BlazorComponent
    {
        public int CurrentCount { get; set; }

        public void IncrementCount()
        {
            CurrentCount += 5;
        }
    }
}

The Counter.cshtml record will utilize the properties and strategies from the code-behind class just by addingâ @inherits CounterClass.

@page "/counter"
@inherits CounterClass

<h1>Counter</h1>

<p>Current count: @CurrentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

Blazor compiler produces a class for all the view pages with a similar class name as the page name, so here, a predefined base class can't have a similar name as Razor View, else, it would cause an assemble time blunder.

Component Parameters

In Blazor, you can add boundaries to any component which are characterized utilizing non-open properties on the component class by brightening that property with [Parameter] quality.

public class CounterClass : BlazorComponent
{
    public int CurrentCount { get; set; }

    [Parameter]
    protected string SubTitle { get; set; }

    public void IncrementCount()
    {
        CurrentCount += 5;
    }
}

In markup, you can indicate contentions (boundaries) for a component utilizing traits. In the accompanying model, the Home Component (Index.cshtml) sets the estimation of the SubTitle property of the Counter Component (Counter.cshtml):

<Counter SubTitle="Subtitle from Index (Home) page"/>

How about we add this markup to the Home (index.cshtml) component. Presently, you can see the caption of a counter component on a landing page.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter SubTitle="Subtitle from Index (Home) page"/>

Component Reusability

In Blazor, you can without much of a stretch include and reuse any component in different components by proclaiming them utilizing HTML component grammar. The markup for utilizing a component seems as though an HTML label where the name of the tag is the component type. The accompanying markup delivers a Counter (counter.cshtml) occasion.

<Counter />

How about we add this markup to the Home (index.cshtml) component. Presently you can see the counter component on the landing page.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter />