All about ASP.net core razor components | Nesting Razor Components

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

ASP.NET core razor components

Razor Pages can make coding page-centered situations simpler and more gainful than utilizing controllers and perspectives.  Blazor is a part determined structure, which means components are the principal building squares of a Blazor application.

They can be settled, reused, and whenever actualized appropriately, can even be shared over numerous activities.

Segment documents have the extension .razor

Coming up next is the Counterpart that we get when we make another Blazor venture.

@page "/counter"

<h1>Counter</h1>

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

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

@code

{
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }

}

It is a blend of two things

HTML markup that characterizes the UI of the part i.e the look and feels.

C# code which characterizes the handling rationale

In this model, the c# code increases the currentCount variable incentive by 1 each time the catch is clicked. At the point when the catch is clicked IncrementCount() work must be called. This is wired up utilizing the "onclick" property.

In the HTML, to get to the private variable currentCount esteem, use @ character.  C# code is in @code square. It's additionally conceivable to have more than one @code squares.

At the point when the application is aggregated, the HTML and C# code changed over into a partial class. The name of the created class coordinates the name of the part record. A segment record name must be beginning with a capitalized character. On the off chance that you include a part record that begins with a lower case character, the code will neglect to aggregate and you get the accompanying compiler blunder. Part names can't begin with a lowercase character. Keep in mind, blazor venture runs on the server.Component names can't begin with a lowercase character. Keep in mind, blazor worker venture runs on the worker.

A SignalR association is set up between the worker and the customer program. After the counter component is at first delivered and when the client taps the catch. The data about the snap occasion is sent to the worker over the SignalR association. Because of the occasion, the component is recovered, yet the whole HTML isn't sent back to the customer. It's just the diff, i.e the distinction in the render tree, for this situation, the new counter worth that is sent to the customer program. Since just the changed piece of the page is refreshed as opposed to reloading and refreshing the whole page, the application feels quicker and increasingly receptive to the client.

Nesting razor components

One approach to have the Counter component delivered is by exploring to/counter in the program. This way is indicated by the @page order at the head of the component.

@page "/counter"

A component can likewise be settled inside another component utilizing HTML language structure. For instance, use <Counter/> to settle the Counter component in the Index component.

Where to put components

Components can be put anyplace inside a blazor venture. It's a decent practice to put components that produce pages in the Pages envelope and reusable non-page components in the Shared organizer. In the event that you need to, you can likewise put them in a totally extraordinary custom organizer inside your task.

Split component HTML and C# code

In this model, both the HTML and C# are in a solitary record. This is fine for a straightforward component like this counter, yet it is generally a decent practice to isolate HTML and C# code into their own documents. It isn't just acceptable from a support point of view, yet it is likewise simple to unit tests. There are 2 methodologies, to part component HTML and C# code into their own different documents. There are 2 methodologies, to part component HTML and C# code into their own different files.

Incomplete files approach

Base class approach

Single record or Mixed document approach

// Counter.razor
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }

}

Both the HTML markup and C# code are in a solitary record.

Partial files approach

The HTML markup stays in Counter.razor document.

// Counter.razor

@page "/counter"

<h1>Counter</h1>

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

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

Keep in mind, when the component has accumulated a class with a similar name as the component record is produced. Make another class record with the name Counter.razor.cs and remember the accompanying code for it. Notice the class in this document is executed as a halfway class. You can flip document nesting, utilizing the File nesting button on the Solution Explorer.

// Counter.razor.cs

public partial class Counter
{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Base class approach

Much the same as the incomplete class approach, even with the base class approach, the HTML markup stays in Counter.razor document.

// Counter.razor

@page "/counter"

<h1>Counter</h1>

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

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

Move the C# code to a different class. I named it CounterBase. You can name the class anything you need, however it is a typical show to have a similar name as the component yet suffixed with the word Base. In this model, the component name is Counter. So the class that contains the c# code is named CounterBase. The class needs to acquire from the implicit ComponentBase class. This class is on Microsoft.AspNetCore.Components namespace. The entrance modifier must be at any rate ensured on the off chance that you wish to get to the class part from the HTML.

// CounterBase.cs

public class CounterBase : ComponentBase

{
    protected int currentCount = 0;

    protected void IncrementCount()
    {
        currentCount++;
    }
}

At long last, in Counter.razor document remembers to incorporate the accompanying acquires mandate.