Pages

Introduction

Blazor allows you to assign a route directly to a component in your application. These are called Blazor pages.

To assign a route to a component, use the @page attribute at the top of your .razor file.

@page "/developers"

<div>
...
</div>

Creating Blazor Pages

You can create a new Blazor page by hand or by running the following Spark CLI command:

spark make page Developers/Index

Just like a normal component, after running this command Spark will create a new file in your application at Pages/Developers/Index.razor.

@page "/developers/index"
@code {
    protected override void OnInitialized()
    {

    }
}

<h1>My Page</h1>

Organizing Pages

It is advised to create your Blazor pages in a subdirectory of the Pages folder and not the root of the Pages folder.

For example, lets say our app has a list of developers and open source work they’ve done.

We would want the following pages in the Pages/Developers directory:

• Pages/Developers/Index.razor Show a list of developers
• Pages/Developers/Show.razor Show 1 developer
• Pages/Developers/Create.razor Create developer
• Pages/Developers/Edit.razor Edit developer
• Pages/Developers/Delete.razor Delete developer

Component Naming Conventions

Blazer pages and components should always use PascalCase naming.

<MyComponent />

Routes

Route Parameters

Parameters can be passed into a Blazor page through the url. For example, lets say you have a page to show the details about a developer.

You can setup a route parameter in your URL to pass in the Id. Then setup a public property in your Blazor page with the same name.

Route parameter names are case insensitive.

@page "/developers/{Id:int}"

@if (developer != null) {
    <h1>@developer.Name</h1>
}

@code {
    [Parameter]
    public int Id { get; set; }
	private Developer developer { get; set; }

	protected override async Task OnInitializedAsync()
	{
		developer = await _developerService.Get(Id);
	}
}

Page title and metadata

You can set a Blazor pages <title> element by using the PageTitle component.

@page "/developers"

<PageTitle>This is the developers page</PageTitle>

To set metadata, like the pages description, use the HeadContent component.

@page "/developers"

<PageTitle>This is the developers page</PageTitle>
<HeadContent>
    <meta name="description" content="This is a page that shows all the developers.">
</HeadContent>

SEO

Because Spark uses Server-side Rendered Blazor, all pages are rendered on the server and the HTML is then sent to the clients browser.

This means search engines can easily index your sites content.

Navigation

Blazor pages use standard html anchor elements to navigate to other Blazor pages.

@page "/developers"

<a href="/">Go to home page</a>

HTMX will intercept the navigation and use an AJAX fetch request. The response will then be evaluated by HTMX and replace the content on the page without having to do a full page reload.

Authentication

To read about how to authenticate and access User data from your Razor components and pages, check out Spark’s Authentication guide.