Components

Introduction

Blazor projects utilize Razor components as the bulding blocks of the application. These components also have the ability to contain logic specific to themselves, creating reusable pieces of UI for your fronend.

Spark uses Blazor Server under the hood, so understanding how Razor components work is crucial.

Creating Components

You can create a new Razor component by hand or by running the following Spark CLI command:

spark make component DeveloperDetails

After running this command, Spark will create 2 new files in your application.

The first will be a code behind file: Pages/Shared/DeveloperDetails.cs.

namespace MyApp.Pages.Shared;

public partial class DeveloperDetails
{
    protected override void OnInitialized()
    {
        
    }
}

The second will be the Razor file: Pages/Shared/DeveloperDetails.razor

<div>

</div>

You can create components in subdirectories as well. For example, the following commands will create a DeveloperDetails component in the Pages/Shared/Developers subdirectory.

spark make component Developers/DeveloperDetails

Inline Components

If your component is fairly small, you can create an inline component. Inline components are a single .razor file that have an @code block to contain it’s logic, rather than a seperate code behind file.

<div>

</div>

@code {
    protected override void OnInitialized()
    {
        
    }
}

To create an inline component, run the Spark make component command and pass the --inline flag.

spark make component DeveloperDetails --inline

Component Properties

Razor components have properties that can store data and be accessed from within your code behind class or razor component markup.

To add a property to a razor component, declare a property in your code behind file. For example, we can create a string name property in the DeveloperDetails component:

namespace MyApp.Pages.Shared;

public partial class DeveloperDetails
{
    private string name = 'Art Vandelay';

    protected override void OnInitialized()
    {
        
    }
}

Accessing Properties in Markup

Component properties can referenced in the components markup using Microsofts razor syntax. Here we can display the value of the name property:

<div>
    <p>Name: @name</p>
</div>

The resulting output of this component would be:

<div>
    <p>Name: Art Vandelay</p>
</div>

Passing Data Into Components

Component properties tagged as a parameter allow you to pass data into components.

They are defined as a property in your Razor component with the [Parameter] attribute and must be declared as public.

namespace MyApp.Pages.Shared;

public partial class DeveloperDetails
{
    [Parameter] public string Name { get; set; }

    protected override void OnInitialized()
    {
        
    }
}

When rendering a component, you can pass the parameter value as an argument in the HTML tag of the component.

<DeveloperDetails Name="Art Vandelay" />

Tip!

You can add the attribute EditorRequired to a parameter.

[Parameter, EditorRequired] public string Name { get; set; }

This will alert you in your editor that the components property is required when referencing it.

Dependency Injection in Components

You can take advantage of ASP.NET’s dependency injection system by adding the [Inject] attribute to a property in your code behind class.

.NET will automatically resolve the dependency for you provided it has been registered in the apps service container.

namespace MyApp.Pages.Shared;

public partial class DeveloperDetails
{
    [Inject] public IConfiguration Config { get; set; }
    private string name = '';

    protected override void OnInitialized()
    {
        name = Config.GetValue<string>("Developer:Name");
    }
}

Inline Components

You can also take advantage of dependency injection in inline components by using the @inject attribute followed by the service to inject.

@inject IConfiguration Config

<div>
</div>

@code {
    private string name = '';

    protected override void OnInitialized()
    {
        name = Config.GetValue<string>("Developer:Name");
    }
}

Rendering Components

To display a component, you can use a Razor component tag within another Razor component or page. Razor component tags are just the name of it’s source file.

<DeveloperDetails />

As mentioned above, if you can also pass data into components if they have properties tagged with the [Parameter] attribute.

<DeveloperDetails Name="Art Vandelay" />

Child Content

You will often need to pass additional content to your razor components via a RenderFragment. RenderFragments can be HTML markup or even other Razor Components.

For example, the below ChildComponent.razor component has a ChildContent parameter of type RenderFragment. This represents a segment of UI to render.

<h1>
    @ChildContent
</h1>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

In a parent Razor component, you can render the child component while passing content between it’s opening and closing tags.

<ChildComponent>
    Spark is <span class="text-yellow-600">Awesome!</span>
</ChildComponent>

The following markup would be rendered to the browser.

<h1>
    Spark is <span class="text-yellow-600">Awesome!</span>
</h1>

Render Modes

Blazor comes with a couple different ways to render your components.

Currently, Spark uses the Blazor Server render mode. You can read more about Blazor Server here

In .NET 8, Blazor introduces Server Side Rendering and the ability to change render modes on a per component basis. Spark will take advantage of both of these.

Spark does not support the WASM render mode. If you’d like to hear me rant about why, feel free to DM me on Twitter.