---
sidebar_position: 4
title: Ajouter bouton
---

Afin d'accèder à notre page d'ajout, nous allons ajouter un bouton au dessus de notre grille.

Ouvrez le fichier `Pages/List.razor` et ajouter les modification en surbrillance :

```cshtml title="Pages/List.razor"
@page "/list"
@using MyBeautifulAdmin.Models

<h3>List</h3>

// highlight-start
<div>
    <NavLink class="btn btn-primary" href="Add" Match="NavLinkMatch.All">
        <i class="fa fa-plus"></i> Ajouter
    </NavLink>
</div>
// highlight-end

<DataGrid TItem="Data"
          Data="@data"
          ReadData="@OnReadData"
          TotalItems="@totalData"
          PageSize="10"
          ShowPager
          Responsive>
    <DataGridColumn TItem="Data" Field="@nameof(Data.Id)" Caption="#" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.FirstName)" Caption="First Name" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.LastName)" Caption="Last Name" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.DateOfBirth)" Caption="Date Of Birth" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.Roles)" Caption="Roles">
        <DisplayTemplate>
            @(string.Join(", ", ((Data)context).Roles))
        </DisplayTemplate>
    </DataGridColumn>
</DataGrid>
```

## Notion : Routage

### Modèles de routage

Le composant `Router` permet le routage vers des composants Razor dans une application Blazor. Le composant `Router` est utilisé dans le composant `App` des applications Blazor.

```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>
```

Quand un composant Razor (`.razor`) avec une directive `@page` est compilé, la classe de composant générée est fournie en RouteAttribute spécifiant le modèle de routage du composant.

Lorsque l’application démarre, l’assembly spécifié en tant que routeur `AppAssembly` est analysé pour collecter des informations de routage pour les composants de l’application qui ont un RouteAttribute .

Au moment de l’exécution, le RouteView composant :
* Reçoit du avec RouteData Router tous les paramètres d’itinéraire.
* Restitue le composant spécifié avec sa disposition, y compris les dispositions imbriquées supplémentaires.

Les composants prennent en charge plusieurs modèles de routage à l’aide de plusieurs directives `@page`. 

L’exemple de composant suivant se charge sur les demandes pour `/BlazorRoute` et `/DifferentBlazorRoute`.

```cshtml title="Pages/BlazorRoute.razor"
// highlight-start
@page "/BlazorRoute"
@page "/DifferentBlazorRoute"
// highlight-end

<h1>Blazor routing</h1>
```

:::info

Pour que les URL soient correctement résolues, l’application doit inclure une balise &lt;base&gt; dans son fichier `wwwroot/index.html` ( Blazor WebAssembly ) ou fichier `Pages/_Layout.cshtml` ( Blazor Server ) avec le chemin d’accès de base de l’application spécifié dans l'attribut `href`.

:::
