Blazor Component

• A component in Blazor is an a self-contained chunk of user interface (UI), such as a page, dialog, or data entry form
• component class is usually written in the form of a Razor markup page with a .razor file extension (components in Blazor are formally referred to as Razor components)
• Components are .NET classes built into .NET assemblies that:
  • Define flexible UI rendering logic
  • Handle user events
  • Can be nested and reused
  • Can be shared and distributed as Razor class libraries or NuGet packages
• Razor allows you to switch between HTML markup and C# in the same file with IntelliSense support
• Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition
• Links
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/components
  • https://www.telerik.com/blogs/using-a-code-behind-approach-to-blazor-components

Single File Approach

• Markup and logic (C# + HTML) in the same file
• C# code in @code { ... } block
• It will eventually become tedious to maintain due to constant scrolling between between markup and logic
• While a single file approach provides benefits in its simplicity, and is great for small components, it simply doesn’t scale well
• Avoid for complex component

Pages/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++;
    }
}

Code-Behind Approach

Once our component requires complex markup or logic it’s easy to get lost in the large file and/or confused by two different ways of expressing code. Keeping the code and UI separate supports all sorts of best practices

Why Code-Behind?

• Keep code and presentation separated
• Use dependency injection
• Avoid repeating code
• Loose coupling
• Scalability

Naming convention:

• razor file: Foo.razor
• code behind C# class file: Foo.razor.cs
• C# class name: class FooBase {...}
• we are using [componentName]Base for class name because razor markup will be parsed into a component class and we are gonna inherit from code behind class (so, code behind class is base class)

Code behind class is a standard .NET class and inherited by (parsed) razor. Imagine as following

• .razor is parsed into partial class
• code behind .cs is partial class
• resulting class is combination of both and therfore .razor has access to properties in .cs

Pages/Counter.razor

@page "/counter"
@inherits CounterBase

<h1>Counter</h1>

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

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

Pages/Counter.razor.cs

public class CounterBase: ComponentBase
{
	protected int CurrentCount { get; set; }

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

Note: Code behind class properties should be protected or public so that razor markup can access them