Tuesday, March 19, 2024

Blazor Components

In this article, we’ll dive into the world of Razor components in Blazor applications, covering everything from the basics of Razor syntax to component naming, namespaces, and parameter usage.

Blazor applications rely heavily on Razor components, which are essentially self-contained UI portions with associated processing logic that facilitate dynamic behavior. By understanding how to create and use Razor components effectively in your Blazor apps, you’ll be able to build more modular and scalable web applications.

• Blazor is a component-driven framework, meaning components are the fundamental building blocks of a Blazor application.
• They can be nested, reused, and if implemented properly, can even be shared across multiple projects.
• Component files have the extension. razor

Components can be placed anywhere within a blazor project.
It’s a good practice to place components that produce webpages in the Pages folder and reusable non-page components in the Shared folder.
Alternatively, we can use a custom folder.

Split razor component

Two approaches used to separate the HTML and C# code of a component into separate files.

One is Partial class and other is Base class approach.
In Normal way the Razor components are in following structure.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

	@code {
	    private int currentCount = 0;

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

Both design and corresponding c# codes are in same file but Keep design and code separate for easier unit testing purpose

Using Partial class

The HTML markup remains in PartialCounter.razor file

	@page "/counter"

	<PageTitle>Counter</PageTitle>

	<h1>Counter</h1>

	<p role="status">Current count: @currentCount</p>

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

In addition to the component file, a class with the same name will be generated while compilation. So to avoid conflict create a new class named PartialCounter.razor.cs and paste all code section into that file.

	public partial class Counter
	{
	    private int currentCount = 0;

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

Using Base Class

The html content remain same (as the above).For c# content create separate file and move all content into that file.
You have the freedom to choose a different name for the class, But the common convention use same as the component file, followed by the word ‘Base’.

Example

Html markup file name : PartialCounter.Blazor

C# file name : PartialCounterBase.cs

The created class must be  inherit from inbuilt ComponentBase class. This class is in Microsoft.AspNetCore.Components namespace.
For accessing class methods from HTML, the access modifier must be set to at least ‘protected’.

 using Microsoft.AspNetCore.Components;
 
 namespace BlazorApp002
 {
     public  class BaseTypeCounter:ComponentBase
     {
         protected int currentCount = 0;
         protected void IncrementCount()
         {
 	            currentCount++;
 	        }
 
 	    }
 	}