---
sidebar_position: 4
title: Utiliser les données
---

## Récupérer les données

Afin d'utiliser les données dans le fichier `fake-data.json`, nous allons utiliser la méthode `GetFromJsonAsync` de l'objet `HttpClient`.

Cette méthode permet d'obtenir et de convertir (Déserialization) les données du fichier dans une liste contenant nos données.

## Ajouter le client http par défaut

Ouvrir le fichier `Program.cs` et ajouter la ligne en surbrillance.

```csharp title="Program.cs"
builder.Services.AddSingleton<WeatherForecastService>();

// highlight-next-line
builder.Services.AddHttpClient();

var app = builder.Build();
```

Cette ajout permet de définir un `HttpClient` pour l'application Blazor.

## Code de la page

Ouvrir la classe `List.razor.cs` et la remplir comme suite :

```csharp title="Pages/List.razor.cs"
public partial class List
{
// highlight-start
	private Item[] items;

	[Inject]
	public HttpClient Http { get; set; }

	[Inject]
	public NavigationManager NavigationManager { get; set; }

	protected override async Task OnInitializedAsync()
	{
		items = await Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json");
	}
// highlight-end
}
```

La méthode `OnInitializedAsync` se déclenche lors de l'affichage de la page, voir la notion "Événements de cycle de vie" plus bas dans cette page.

## Afficher les données

Dans un premier temps nous allons éffectuer un affichage simple de nos données.

Pour cela ouvrer le fichier `List.razor` et la remplir comme suite :

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

<h3>List</h3>

// highlight-start
@if (items != null)
{
    foreach (var item in items)
    {
        <div>@item.Id</div>
    }
}
// highlight-end
```

Vous avez désormais afficher la liste de la valeur du champ `Id` dans votre page.


:::caution
Attention, pensez bien à vérifier si votre liste n'est pas nulle avant de faire votre `foreach`. Sinon une erreur sera levée.
:::

## Notion : Événements de cycle de vie

Les diagrammes suivants illustrent les Razor événements de cycle de vie des composants.

Événements de cycle de vie des composants :

* Si le composant est rendu pour la première fois sur une demande :
	* Créez l’instance du composant.
	* Effectuez l’injection de propriété. Exécutez `SetParametersAsync`.
	* Appelez OnInitialized{Async} . Si une Incomplete Task est retournée, le Task est attendu, puis le composant est rerendu.
* Appelez OnParametersSet{Async} . Si une Incomplete Task est retournée, le Task est attendu, puis le composant est rerendu.
* Rendu pour tous les travaux synchrones et toutes les Tasks.

![Événements de cycle de vie](/img/affichage-donnees/lifecycle1.png)

Traitement des événements Document Object Model (DOM) :

* Le gestionnaire d’événements est exécuté.
* Si une Incomplete Task est retournée, le Task est attendu, puis le composant est rerendu.
* Rendu pour tous les travaux synchrones et toutes les Tasks.

![Événements de cycle de vie](/img/affichage-donnees/lifecycle2.png)

Le cycle de vie du rendu :

* Évitez les opérations de rendu supplémentaires sur le composant :
	* Après le premier rendu.
	* Lorsque ShouldRender est false .
	
* Générez l’arborescence de rendu (différence) et le rendu du composant.
* Attendez le DOM à mettre à jour.
* Appelez OnAfterRender{Async} .

![Événements de cycle de vie](/img/affichage-donnees/lifecycle3.png)
