---
sidebar_position: 2
title: Création page
---

## Création d'une nouvelle page

Afin d'afficher vos données, nous allons créer une nouvelle page.

Pour cela rien de plus simple, sélectionner le dossier `Pages` puis cliquer droit et sélectionner `Add > Razor Component...`

![Création d'une nouvelle page](/img/affichage-donnees/creation-page-01.png)

Nous allons nommer notre page `List.razor` puis cliquer sur `Add`

![Création d'une nouvelle page](/img/affichage-donnees/creation-page-02.png)

## Séparation Vue & Model

Afin de séparer la partie Vue et Model, nous allons donc créer une classe partiel pour notre vue.

Sélectionner le dossier `Pages` puis cliquer droit et sélectionner `Add > Class...`

![Création d'une nouvelle page](/img/affichage-donnees/creation-page-03.png)

Nous allons nommer notre class `List.razor.cs` puis cliquer sur `Add`

![Création d'une nouvelle page](/img/affichage-donnees/creation-page-04.png)

N'oubliez pas de rendre votre classe partiel avec le mot clé `partial` comme suite :

```csharp title="Pages/List.razor.cs"
public partial class List
{
}
```

Vous pouvez maintenant retirer le code de votre vue, pour cela supprimer la partie suivante :

```cshtml title="Pages/List.razor"
<h3>List</h3>

// highlight-start
@code {

}
// highlight-end
```

## Déclarer l'url de notre nouvelle page

Afin de pouvoir rendre notre page accessible, déclarons l'url de notre page comme suite :

```cshtml title="Pages/List.razor"
// highlight-next-line
@page "/list"

<h3>List</h3>
```

Désormais notre page sera disponible à partir de l'adresse `/list` de notre site.

## Ajouter notre nouvelle page au menu

Ouvrer le fichier `Shared/NavMenu.razor` et ajouter les lignes en surbrillances :

```cshtml title="Shared/NavMenu.razor"
<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">TO_DELETE_BlazorApp30000</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
// highlight-start
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="list" Match="NavLinkMatch.All">
                <span class="oi oi-list-rich" aria-hidden="true"></span> List
            </NavLink>
        </div>
// highlight-end
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}
```

Vous pouvez désormais naviguer sur votre nouvelle page.

## Notion : Layout

Certains éléments de l’application, tels que les menus, les messages de copyright et les logos de l’entreprise, font généralement partie de la présentation générale de l’application. 
Le fait de placer une copie du balisage pour ces éléments dans tous les composants d’une application n’est pas efficace. 
Chaque fois que l’un de ces éléments est mis à jour, chaque composant qui utilise l’élément doit être mis à jour. 
Cette approche est coûteuse à gérer et peut entraîner un contenu incohérent si une mise à jour est manquée. 

Les Layout résolvent ces problèmes.

### Créer un layout

Pour créer un layout :

* Créez un nouveau composant Razor. Les layout utilisent l'extension `.razor` comme les composants Razor ordinaires. Étant donné que les layout sont partagés entre les composants d’une application, ils sont généralement placés dans le dossier de l’application `Shared`. Toutefois, les layout peuvent être placées à n’importe quel emplacement accessible aux composants qui l’utilisent.
* Hérite du composant de `LayoutComponentBase`, il définit une propriété `Body` (type `RenderFragment`) pour que le contenu soit rendu à l’intérieur du layout.
* Utilisez la syntaxe Razor `@Body` pour spécifier l’emplacement dans la balise de mise en page où le contenu est affiché.
* Le layout `DoctorWhoLayout` suivant montre un modèle de layout. La disposition hérite de `LayoutComponentBase` et définit la `@Body` entre la barre de navigation ( &lt;nav&gt;...&lt;/nav&gt; ) et le pied de page ( &lt;footer&gt;...&lt;/footer&gt; ).

```cshtml title="Shared/DoctorWhoLayout.razor"
// highlight-next-line
@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

// highlight-next-line
@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}
```

### Appliquer un layout

Utilisez la directive Razor `@layout` pour appliquer un layout à un composant routable Razor qui a une directive `@page`. 
Le compilateur convertit `@layout` en un `LayoutAttribute` et applique l’attribut à la classe de composant.

Le contenu de la page suivante `Episodes` est inséré dans le `DoctorWhoLayout` à la position de `@Body`.

```cshtml title="Pages/Episodes.razor"
@page "/episodes"
// highlight-next-line
@layout DoctorWhoLayout

<h2>Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>
```

Le balisage HTML rendu suivant est produit par le layout `DoctorWhoLayout` et la page `Episodes`. Le balisage superflu n’apparaît pas afin de se concentrer sur le contenu fourni par les deux composants impliqués :

* L’en-tête de base de données Doctor Who ™ épisode ( &lt;h1&gt;...&lt;/h1&gt; ) de l’en-tête ( &lt;header&gt;...&lt;/header&gt; ), de la barre de navigation ( &lt;nav&gt;...&lt;/nav&gt; ) et de l’élément d’information sur les marques ( &lt;div&gt;...&lt;/div&gt; ) du pied de page ( &lt;footer&gt;...&lt;/footer&gt; ) provient du `DoctorWhoLayout` composant.
* L’en-tête épisodes ( &lt;h2&gt;...&lt;/h2&gt; ) et la liste épisode ( &lt;ul&gt;...&lt;/ul&gt; ) proviennent de la page `Episodes`.

```cshtml
<body>
    <div id="app">
        <header>
            <h1>Doctor Who&trade; Episode Database</h1>
        </header>

        <nav>
            <a href="main-list">Main Episode List</a>
            <a href="search">Search</a>
            <a href="new">Add Episode</a>
        </nav>

        <h2>Episodes</h2>

        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>

        <footer>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </footer>
    </div>
</body>
```

### Appliquer une disposition à un dossier de composants

Chaque dossier d’une application peut éventuellement contenir un fichier de modèle nommé `_Imports.razor`. 
Le compilateur comprend les directives spécifiées dans le fichier `Imports` dans tous les modèles Razor du même dossier et de manière récursive dans tous ses sous-dossiers. 
Par conséquent, un fichier `_Imports.razor` contenant `@layout DoctorWhoLayout` s’assure que tous les composants d’un dossier utilisent le layout `DoctorWhoLayout`. 
Il n’est pas nécessaire d’ajouter à plusieurs reprises `@layout DoctorWhoLayout` à tous les composants Razor ( .razor ) dans le dossier et les sous-dossiers.

:::caution

N’ajoutez pas de directive Razor `@layout` au fichier racine `_Imports.razor`, ce qui se traduit par une boucle infinie de layout. 
Pour contrôler le layout de l’application par défaut, spécifiez la disposition dans le composant `Router`.

:::

:::note

La directive Razor `@layout` applique uniquement un layout aux composants routables avec une directive `@page`.

:::

Exemple :

Mon application contient ses pages dans le dossier `Pages`, je souhaite ajouter une partie administration à mon application je vais donc créer un répertoire `Admin` dans le dossier `Pages`:

![Appliquer une disposition à un dossier de composants](/img/affichage-donnees/layout-01.png)

J'ai créé un layout pour ma partie administration se trouvant `Shared/AdminLayout.razor` et je souhaite que mes pages d'administration l'utilisent, deux choix:
* Ajouter en haut de chaque page `@layout AdminLayout`
	* Ce choix n'est pas des plus pertinant car en cas de changement de layout, il faudra repasser sur l'ensemble des pages
* Créer un fichier `_Imports.razor` et spécifier `@layout AdminLayout`, toutes les pages de mon dossier `Admin` utiliserons désormais ce layout.


### Appliquer une disposition par défaut à une application

Spécifiez le layout de l’application par défaut dans le composant `App` du composant `Router`. 
L’exemple suivant à partir d’une application basée sur un modèle de projet Blazor définit le layout par défaut sur le layout `MainLayout`.

```cshtml title="App.razor"
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>
```

### Dispositions imbriquées

Un composant peut faire référence à un layout qui, à son tour, fait référence à un autre layout. Par exemple, les layout imbriquées sont utilisées pour créer des structures de menus à plusieurs niveaux.

