Blazor - How to set a base component for all Razor components

When building a Blazor application, you may want a custom base component for all your Razor components. This is useful for sharing common functionality like cancellation tokens, logging, or state management across all components. Instead of adding @inherits YourBaseComponent to every Razor file, you can use the _ViewStart.razor file to set it globally.

#Using _ViewStart.razor to set a default base component

Create a file named _ViewStart.razor in the folder where you want to apply the base component. Place it at the root of your Razor components or in a specific folder such as Pages or Components. All Razor files in that folder and its subfolders will inherit from the specified base component.

@inherits YourNamespace.CustomComponentBase

The _ViewStart.razor file is processed before any Razor component in the same directory or its subdirectories. All components will then automatically inherit from CustomComponentBase without declaring it in each file.

#Example: CustomComponentBase with CancellationToken

Here's a practical example of a base component that provides a CancellationToken to all derived components. This is useful for canceling asynchronous operations when the component is disposed:

@implements IDisposable

@code {
    private readonly CancellationTokenSource _cts = new CancellationTokenSource();

    public CancellationToken CancellationToken => _cts.Token;

    public void Dispose()
    {
        _cts.Cancel();
        _cts.Dispose();
    }
}

With this base component, all your Razor components can access the CancellationToken property without any additional setup:

@* No need for @inherits since _ViewStart.razor handles it *@

<h3>My Component</h3>

@code {
    protected override async Task OnInitializedAsync()
    {
        // Use the CancellationToken from the base component
        await LoadDataAsync(CancellationToken);
    }

    private async Task LoadDataAsync(CancellationToken cancellationToken)
    {
        // Your async code here
        await Task.Delay(1000, cancellationToken);
    }
}

#Overriding the base component for specific components

If a specific component needs a different base component, or none at all, you can declare @inherits directly in that component file. The explicit declaration takes precedence over _ViewStart.razor:

@inherits ComponentBase

@* This component will use ComponentBase instead of CustomComponentBase *@

#Organizing _ViewStart.razor files

You can have multiple _ViewStart.razor files in different folders to apply different base components across sections of your application. The closest _ViewStart.razor file in the directory hierarchy takes precedence.

For example:

• /Components/_ViewStart.razor applies to all components in that folder
• /Components/Admin/_ViewStart.razor applies specifically to admin components

This hierarchical approach gives you fine-grained control over which components inherit from which base classes.

Do you have a question or a suggestion about this post? Contact me!