Pages will extend one of the Page models available in the Client/Models/Pages/ directory. Once you know what type of user will be using the page add the .razor file in the Client/Pages/ directory. Be sure to place pages into appropriate subfolders.
For this tutorial we will be creating an Example.razor file in the base Pages/ directory.
@layout AppShell
@page "/example"
@inherits ExampleBase
<div>
<h1>Hello world!</h1>
</div>
To add logic to our view we will create an Example.razor.cs file alongside our Example.razor file.
using Client.Models.Pages;
namespace Client.Pages
{
public class ExampleBase : UserPage
{
// ...
}
}
If we need to fetch data we can override the UserPage main method. In the example below we asynchronously fetch an array of strings from the API.
using Client.Models.Pages;
namespace Client.Pages
{
public class ExampleBase : UserPage
{
string[] Data {get;set;}
protected override async Task Main()
{
Data = await JSRuntime.InvokeVoidAsync("ExampleFetchFunction");
}
}
}
Note: if you don’t know how to set up API Request functions read the API Requests how-to guide.
Let’s add interactive elements to our view. In the example below we will add a button that when clicked fetches another array of strings.
Update the code in the Example.razor file.
<div>
<h1>Hello world!</h1>
<button @onclick="FetchData">Fetch data</button>
</div>
Update the code in the Example.razor.cs file.
public async Task FetchData()
{
Data = await JSRuntime.InvokeVoidAsync("SecondExampleFetchFunction");
StateHasChanged();
}
Note: for additional information about Blazor event handling read the Blazor documentation.
That’s it! You now have a working page that can be accessed by navigating to the /example page. Your next step should be to create a new endpoint.