How-To: Create New Page in Blazor

In Blazor, a page is the basic unit of navigation. It is the top-level component that can be reached via a URL So, when we want a new view in your Blazor app, we will need to create a new page. In all other aspects, a page and a component have equivalent functionality.

First, we must have a Blazor project. Either open an existing Blazor project, or please follow the steps in the How-To: Create Blazor WASM Project article to create a new one. For this article, we called the project: Blazor.HowTo.

Create a New Page

To create a new page from scratch:

1. Find the Pages folder in the Blazor-HowTo project. It will likely have an Index.razor file in it.
2. Right-click on the Pages folder.
3. Select the ‘Add > Razor Component’ menu item.

4. Name the item ‘NewPage.razor’. This name can be whatever name we want to use for our page.
5. The page markup generates a C# class, so the page naming convention must follow a class’s naming convention and must also be unique within a namespace.
6. Note: Blazor and Razor components and files are the same, so we will use them interchangeably when talking about the page files in these how-to articles.
7. Notice that the ‘Razor Component’ item is selected in the main listview.
8. Click the ‘Add’ button.

This will produce our new page files and open it in the code editor. Let’s update the page with this simple code:

@page "/new-page"

<h3>New Page</h3>
<p>Welcome to my new page</p>

@code {
}

First, we will see that a Blazor page is a mix of raw HTML, Razor markup (with directives like @page), and C# methods that will appear in the @code section.

We have an @page directive at the top of the file. This identifies the relative URL that is mapped to this page. When that URL is used this page is rendered within the site layout. This URL can be anything you would like to address your page. We will cover more complex routing scenarios in other articles.

Our page starts with only some basic HTML to display a page title and welcome message. And for this introductory page, there is no C# in the @code section.

Running New Page

That’s all the code we need to define a page. Let’s build our project and run it:

• Build by selecting ‘Build > Build Solution’ (Ctrl-Shift-B) item in the main menu.
• The project should build successfully.
• Then, run the Blazor app locally, by selecting ‘Debug > Start Without Debugging’ (Ctrl + F5) item in the main menu.

This will launch the Blazor app to the home page. We can then navigate to our new page by appending the page’s relative URL (/new-page) to the browser address bar. For example, it would look like: https://localhost:44381/new-page (where the host port number will be different in your instance of the project).

There we have it, a new page! We will create many new pages for our Blazor apps, so it’s important to get used to these steps. Our pages will obviously have more complex layout, interactivity, and code, but in this lesson, we’ve learned how to create the starting point for our future pages.