Documentation Menu
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>
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 2 new files in your application.
The first will be a code behind file: Pages/Developers/Index.cs
namespace MyApp.Pages.Developers;
public partial class Index
{
protected override void OnInitialized()
{
}
}
The second will be the Razor file: Pages/Developers/Index.razor
@page "/developers/index"
<div>
</div>
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 developersPages/Developers/Show.razor
Show 1 developerPages/Developers/Create.razor
Create developerPages/Developers/Edit.razor
Edit developerPages/Developers/Delete.razor
Delete developerBlazer pages and components should always use PascalCase naming.
<MyComponent />
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.
@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);
}
}
Route parameter names are case insensitive.
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>
By default, Spark apps use the render-mode
of server
. This means any code in your razor pages and components isn’t ran until the SignalR connection is setup by the browser.
This has 1 downside, search engines will not be able to index your content. If SEO is important in your app, you will want to update the render-mode
to ServerPrerendered
.
You can do this by updating the render mode in Pages/_Layout.cshtml
to:
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
and updating the render mode in Pages/_Host.cshtml
to:
<component type="typeof(App)" render-mode="ServerPrerendered" />
Using the render mode of
ServerPrerendered
has 1 side effect.Any code in your razor pages or components will be ran twice. Once on the server and once when the page is loaded in the browser.
Blazor pages use standard html anchor elements to navigate to other Blazor pages.
@page "/developers"
<a href="/">Go to home page</a>
To read about how to authenticate and access User data from your Razor components and pages, check out Spark’s Authentication guide.
Stay up to date with Spark on Twitter or our Newsletter
Looking for .NET jobs? Check out Dotnet Jobs for weekly job postings.