---
sidebar_position: 4
title: Création page éditer
---

## Création de la page

Comme précédemment, créer une nouvelle page qui se nommera `Edit.razor` ansi que la classe partiel `Edit.razor.cs`.

## Code source final

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

```

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

## Définir l'url de la page

Nous allons définir l'url de notre page en spécifiant que nous souhaitons notre identifiant.

Ouvrer le fichier `Pages/Edit.razor` et ajouter les modification en surbrillance commme suite :

```cshtml title="Pages/Edit.razor"
// highlight-next-line
@page "/edit/{Id:int}"

<h3>Edit</h3>

```

## Passer un paramètre

Nous avons passer dans l'url l'id de notre item à editer, maintenant nous allons le récupérer dans un `Parameter` afin de pouvoir l'utiliser dans notre code.

Ouvrer le fichier `Pages/Edit.razor.cs` et ajouter les modification en surbrillance commme suite :

```cshtml title="Pages/Edit.razor.cs"
public partial class Edit
{
// highlight-start
	[Parameter]
	public int Id { get; set; }
// highlight-end
}
```

## Afficher le paramètre

Afin de verifier le passage de notre identifiant nous allons l'afficher.

Ouvrer le fichier `Pages/Edit.razor` et ajouter les modification en surbrillance commme suite :

```cshtml title="Pages/Edit.razor"
@page "/edit/{Id:int}"

<h3>Edit</h3>

// highlight-next-line
<div>Mon paramètre: @Id</div>

```

## Notion : Paramètres d'URL

### Paramètres d’itinéraire

Le routeur utilise des paramètres de routage pour remplir les paramètres de composant correspondants portant le même nom. 
Les noms de paramètres d’itinéraire ne respectent pas la casse. Dans l’exemple suivant, le paramètre `text` assigne la valeur du segment de route à la propriété du composant `Text`. 
Quand une demande est effectuée pour `/RouteParameter/amazing`, le `<h1>` contenu de la balise est restitué sous la forme `Blazor is amazing!`.

```cshtml title="Pages/RouteParameter.razor"
@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }
}
```

Les paramètres facultatifs sont pris en charge. 
Dans l’exemple suivant, le paramètre facultatif `text` assigne la valeur du segment de routage à la propriété du composant `Text`. Si le segment n’est pas présent, la valeur de `Text` est définie sur `fantastic`.

```cshtml title="Pages/RouteParameter.razor"
@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}
```

Utilisez `OnParametersSet OnInitialized{Async}` à la place pour autoriser la navigation vers le même composant avec une valeur de paramètre facultative différente. 
En fonction de l’exemple précédent, utilisez `OnParametersSet` lorsque l’utilisateur doit naviguer de `/RouteParameter` vers `/RouteParameter/amazing` ou de `/RouteParameter/amazing` vers `/RouteParameter` :

```cshtml
protected override void OnParametersSet()
{
    Text = Text ?? "fantastic";
}
```

### Contraintes d’itinéraire

Une contrainte d’itinéraire applique la correspondance de type sur un segment de routage à un composant.

Dans l’exemple suivant, l’itinéraire vers le composant `User` correspond uniquement si :
* Un segment `Id` de routage est présent dans l’URL de la demande.
* Le segment `Id` est un type entier ( `int` ).

```cshtml title="Pages/User.razor"
@page "/user/{Id:int}"

<h1>User Id: @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}
```

Les contraintes de routage indiquées dans le tableau suivant sont disponibles. 
Pour plus d’informations sur les contraintes d’itinéraire qui correspondent à la culture dite indifférente, consultez l’avertissement sous le tableau.

| Contrainte | Exemple | Exemples de correspondances | Invariant culture correspondance
| ---- | ---- | ---- | ----
| `bool` | `{active:bool}` | `true`, FALSE | Non
| `datetime` | `{dob:datetime}` | `2016-12-31`, `2016-12-31 7:32pm` | Oui
| `decimal` | `{price:decimal}` | `49.99`, `-1,000.01` | Oui
| `double` | `{weight:double}` | `1.234`, `-1,001.01e8` | Oui
| `float` | `{weight:float}` | `1.234, -1`,`001.01e8` | Oui
| `guid` | `{id:guid}` | `CD2C1638-1638-72D5-1638-DEADBEEF1638`, `{CD2C1638-1638-72D5-1638-DEADBEEF1638}` | Non
| `int` | `{id:int}` | `123456789`, `-123456789` | Oui
| `long` | `{ticks:long}` | `123456789`, `-123456789` | Oui

:::caution

Les contraintes de routage qui vérifient que l’URL peut être convertie en type CLR (comme `int` ou `DateTime`) utilisent toujours la culture invariant. ces contraintes partent du principe que l’URL n’est pas localisable.

:::

Les contraintes de route fonctionnent également avec les paramètres facultatifs. Dans l’exemple suivant, `Id` est obligatoire, mais `Option` est un paramètre d’itinéraire booléen facultatif.

```cshtml title="Pages/User.razor"
@page "/user/{Id:int}/{Option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

@code {
    [Parameter]
    public int Id { get; set; }

    [Parameter]
    public bool Option { get; set; }
}
```

## Notion : Paramètres de composant

Les paramètres de composant passent des données aux composants et sont définis à l’aide de Propriétés C# publiques sur la classe de composant avec l'attribut `[Parameter]`. 

Dans l’exemple suivant, un type de référence intégré ( `System.String` ) et un type référence défini par l’utilisateur ( `PanelBody` ) sont passés en tant que paramètres de composant.

```csharp title="PanelBody.cs"
public class PanelBody
{
    public string? Text { get; set; }
    public string? Style { get; set; }
}
```

```cshtml title="Shared/ParameterChild.razor"
<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">@Title</div>
    <div class="card-body" style="font-style:@Body.Style">
        @Body.Text
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Set By Child";

    [Parameter]
    public PanelBody Body { get; set; } =
        new()
        {
            Text = "Set by child.",
            Style = "normal"
        };
}
```

:::caution

Le fait de fournir des valeurs initiales pour les paramètres de composant est pris en charge, mais ne crée pas un composant qui écrit dans ses propres paramètres une fois que le composant est rendu pour la première fois.

:::


Les paramètres `Title` & `Body` de composant et du composant `ParameterChild` sont définis par des arguments dans la balise HTML qui restitue l’instance du composant. 
Le composant `ParameterParent` suivant restitue deux composants `ParameterChild`:
* Le premier composant `ParameterChild` est rendu sans fournir d’arguments de paramètre.
* Le deuxième composant `ParameterChild` reçoit des valeurs pour `Title` et `Body` à partir du composant `ParameterParent`, qui utilise une expression C# explicite pour définir les valeurs des propriétés de `PanelBody`.

```cshtml title="Pages/ParameterParent.razor"
@page "/parameter-parent"

<h1>Child component (without attribute values)</h1>

<ParameterChild />

<h1>Child component (with attribute values)</h1>

<ParameterChild Title="Set by Parent" Body="@(new PanelBody() { Text = "Set by parent.", Style = "italic" })" />
```

Le balisage HTML de rendu suivant du composant `ParameterParent` montre les valeurs `ParameterChild` par défaut des composants lorsque le composant `ParameterParent` ne fournit pas de valeurs de paramètre de composant. 
Lorsque le composant `ParameterParent` fournit des valeurs de paramètre de composant, elles remplacent les valeurs `ParameterChild` par défaut du composant.

:::note

Par souci de clarté, les classes de style CSS rendues ne sont pas affichées dans le balisage HTML rendu suivant.

:::

```html
<h1>Child component (without attribute values)</h1>

<div>
    <div>Set By Child</div>
    <div>Set by child.</div>
</div>

<h1>Child component (with attribute values)</h1>

<div>
    <div>Set by Parent</div>
    <div>Set by parent.</div>
</div>
```

Assigner un champ, une propriété ou un résultat C# d’une méthode à un paramètre de composant en tant que valeur d’attribut HTML à l’aide symbole `@`. 
Le composant `ParameterParent2` suivant affiche quatre instances du composant précédent `ParameterChild` et définit leurs valeurs `Title` de paramètre sur :
* Valeur du champ `title`.
* Résultat de la méthode `GetTitle` C#.
* Date locale actuelle au format long avec `ToLongDateString`, qui utilise une expression C# implicite.
* `panelData` Propriété de l’objet `Title`.

```cshtml title="Pages/ParameterParent2.razor"
@page "/parameter-parent-2"

<ParameterChild Title="@title" />

<ParameterChild Title="@GetTitle()" />

<ParameterChild Title="@DateTime.Now.ToLongDateString()" />

<ParameterChild Title="@panelData.Title" />

@code {
    private string title = "From Parent field";
    private PanelData panelData = new();

    private string GetTitle()
    {
        return "From Parent method";
    }

    private class PanelData
    {
        public string Title { get; set; } = "From Parent object";
    }
}
```

:::info

Quand vous assignez un membre C# à un paramètre de composant, préfixez le membre avec le symbole `@` et ne faites jamais précéder l’attribut HTML du paramètre.

Utilisation correcte :
```html
<ParameterChild Title="@title" />
```

Incorrect :
```html
<ParameterChild @Title="title" />
```

:::

L’utilisation d’une expression Razor explicite pour concaténer du texte avec un résultat d’expression en vue d’une assignation à un paramètre n’est pas prise en charge. 

L’exemple suivant cherche à concaténer le texte « Set by » avec la valeur de propriété d’un objet. La syntaxe Razor suivante n’est pas prise en charge :

```html
<ParameterChild Title="Set by @(panelData.Title)" />
```

Le code de l’exemple précédent génère une Erreur du compilateur lors de la génération de l’application :

```
Les attributs de composant ne prennent pas en charge le contenu complexe (mixte C# et balisage).
```

Pour prendre en charge l’assignation d’une valeur composée, utilisez une méthode, un champ ou une propriété. L’exemple suivant effectue la concaténation de « `Set by` » et de la valeur de propriété d’un objet dans la méthode C# `GetTitle`:

```cshtml title="Pages/ParameterParent3.razor"
@page "/parameter-parent-3"

<ParameterChild Title="@GetTitle()" />

@code {
    private PanelData panelData = new();

    private string GetTitle() => $"Set by {panelData.Title}";

    private class PanelData
    {
        public string Title { get; set; } = "Parent";
    }
}
```

Les paramètres de composant doivent être déclarés en tant que Propriétés automatiques, ce qui signifie qu’ils ne doivent pas contenir de logique personnalisée dans leurs accesseurs `get` ou `set`. 
Par exemple, la `StartData` propriété suivante est une propriété automatique :

```csharp
[Parameter]
public DateTime StartData { get; set; }
```

Ne placez pas de logique personnalisée dans l'accesseur `get` ou `set`, car les paramètres de composant sont purement destinés à une utilisation en tant que canal d’un composant parent pour transmettre des informations à un composant enfant. 
Si un accesseur `set` d’une propriété de composant enfant contient une logique qui provoque le rerendu du composant parent, les résultats d’une boucle de rendu infinie.

Pour transformer une valeur de paramètre reçue :

* Laissez la propriété de paramètre en tant que propriété automatique pour représenter les données brutes fournies.
* Créez une autre propriété ou méthode pour fournir les données transformées en fonction de la propriété du paramètre.

Remplacez `OnParametersSetAsync` pour transformer un paramètre reçu chaque fois que de nouvelles données sont reçues.

L’écriture d’une valeur initiale dans un paramètre de composant est prise en charge, car les assignations de valeur initiales n’interfèrent pas avec le rendu Blazor de composant automatique. 
L’assignation suivante de la locale actuelle `DateTime` avec `DateTime.Now` à `StartData` est une syntaxe valide dans un composant :

```csharp
[Parameter]
public DateTime StartData { get; set; } = DateTime.Now;
```

Après l’assignation initiale de `DateTime.Now`, n’assignez pas de valeur à `StartData` dans le code.
