---
sidebar_position: 2
title: Page creation
---
## Creation of a new page
In order to display your data, we will create a new page.
To do this, nothing could be simpler, select the `Pages` folder then right click and select `Add > Razor Component...`
We will name our page `List.razor` then click on `Add`
## Separation View & Model
In order to separate the View and Model part, we will therefore create a partial class for our view.
Select the `Pages` folder then right click and select `Add > Class...`
We will name our class `List.razor.cs` then click on `Add`
Remember to make your class partial with the `partial` keyword as follows:
```csharp title="Pages/List.razor.cs"
public partial class List
{
}
```
You can now remove the code from your view, for that remove the following part:
```cshtml title="Pages/List.razor"
List
// highlight-start
@code {
}
// highlight-end
```
## Declare the url of our new page
In order to make our page accessible, let's declare the url of our page as follows:
```cshtml title="Pages/List.razor"
// highlight-next-line
@page "/list"
List
```
From now on our page will be available from the `/list` address of our site.
## Add our new page to the menu
Open the `Shared/NavMenu.razor` file and add the highlighted lines:
```cshtml title="Shared/NavMenu.razor"
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
```
You can now navigate to your new page.
## Concept: Layout
Some app elements, such as menus, copyright messages, and company logos, are usually part of the overall app layout.
Placing a copy of the markup for these elements in all components of an application is not efficient.
Whenever one of these elements is updated, every component that uses the element must be updated.
This approach is expensive to maintain and can lead to inconsistent content if an update is missed.
Layouts solve these problems.
### Create a layout
To create a layout:
* Create a new Razor component. Layouts use the `.razor` extension like regular Razor components. Since layouts are shared between components of an application, they are usually placed in the `Shared` application folder. However, layouts can be placed anywhere accessible to components that use it.
* Inherits the component from `LayoutComponentBase`, it defines a `Body` property (type `RenderFragment`) so that the content is rendered inside the layout.
* Use the Razor `@Body` syntax to specify the location in the layout tag where the content is displayed.
* The following `DoctorWhoLayout` layout shows a sample layout. The layout inherits from `LayoutComponentBase` and defines the `@Body` between the navbar ( <nav>...</nav> ) and the footer ( <footer>...</footer> ; ).
```cshtml title="Shared/DoctorWhoLayout.razor"
// highlight-next-line
@inherits LayoutComponentBase
Doctor Who™ Episode Database
// highlight-next-line
@Body
@code {
public string TrademarkMessage { get; set; } =
"Doctor Who is a registered trademark of the BBC. " +
"https://www.doctorwho.tv/";
}
```
### Apply a layout
Use the Razor `@layout` directive to apply a layout to a Razor routable component that has an `@page` directive.
The compiler converts `@layout` to a `LayoutAttribute` and applies the attribute to the component class.
The content of the next `Episodes` page is inserted into the `DoctorWhoLayout` at the position of `@Body`.
```cshtml title="Pages/Episodes.razor"
@page "/episodes"
// highlight-next-line
@layout DoctorWhoLayout
```
The following rendered HTML markup is produced by the `DoctorWhoLayout` layout and the `Episodes` page. Superfluous markup does not appear in order to focus on the content provided by the two components involved:
* The Doctor Who episode database ™ header ( <h1>...</h1> ) of the header ( <header>...</header> ), of the navigation bar ( <nav>...</nav> ) and the trademark information element ( <div>...</div> ) of the footer ( < footer>...</footer> ) comes from the `DoctorWhoLayout` component.
* The episodes header ( <h2>...</h2> ) and episode list ( <ul>...</ul> ) come from the `Episodes` page.
```cshtml
Doctor Who™ Episode Database
Episodes
...
...
...
```
### Apply a layout to a component folder
Each application folder can optionally contain a template file named `_Imports.razor`.
The compiler includes the directives specified in the `Imports` file in all Razor templates in the same folder and recursively in all its subfolders.
Therefore, a `_Imports.razor` file containing `@layout DoctorWhoLayout` ensures that all components in a folder use the `DoctorWhoLayout` layout.
There is no need to repeatedly add `@layout DoctorWhoLayout` to all Razor Components ( .razor ) in the folder and subfolders.
:::caution
Do not add a Razor `@layout` directive to the root `_Imports.razor` file, which results in an infinite layout loop.
To control the default application layout, specify the layout in the `Router` component.
:::
:::note
The Razor `@layout` directive only applies a layout to routable components with a `@page` directive.
:::
Example :
My application contains its pages in the `Pages` folder, I want to add an administration part to my application so I will create an `Admin` directory in the `Pages` folder:
I created a layout for my admin part located `Shared/AdminLayout.razor` and I want my admin pages to use it, two choices:
* Add at the top of each page `@layout AdminLayout`
* This choice is not the most relevant because in the event of a change of layout, you will have to go back to all the pages
* Create a `_Imports.razor` file and specify `@layout AdminLayout`, all pages in my `Admin` folder will now use this layout.
### Apply a default layout to an app
Specify the default application layout in the `App` component of the `Router` component.
The following example from an app based on a Blazor project template sets the default layout to the `MainLayout` layout.
```cshtml title="App.razor"
Sorry, there's nothing at this address.
```
### Nested Layouts
A component can refer to a layout which, in turn, refers to another layout. For example, nested layouts are used to create multilevel menu structures.