---
sidebar_position: 6
title: Blazorise DataGrid
---

## Installer Blazorise DataGrid

Sélectionner votre projet, puis cliquer droit et choisir `Manage NuGet Pakages...` :

![Installer Blazorise DataGrid](/img/affichage-donnees/blazorise-01.png)

Sélectionner l'onglet `Browse` et rechercher `blazorise datagrid` :

![Installer Blazorise DataGrid](/img/affichage-donnees/blazorise-02.png)

Sélectionner le package puis cliquer à droite sur `Install` :

![Installer Blazorise DataGrid](/img/affichage-donnees/blazorise-03.png)

:::tip
Il est normal que la version que vous installez soit différente, les nugets de Blazorise évoluent, utilisez toujours la dernière version.
:::

Accepter les modifications en cliquant sur `OK` :

![Installer Blazorise DataGrid](/img/affichage-donnees/blazorise-04.png)

Blazorise Datagrid est désormais installer sur votre projet.

Faire de même pour le package `Blazorise.Bootstrap` & `Blazorise.Icons.FontAwesome`.

Il est aussi possible d'installer des packages directement avec la fenêtre `Package Manager Console` (Cliquer dans le menu `View => Other Windows => Package Manager Console` pour l'afficher).

Pour installer il suffit d'utiliser la commande `Install-Package`, exemple :

```shell
Install-Package Blazorise.Bootstrap
Install-Package Blazorise.Icons.FontAwesome
```

## Enregistrer Blasorize dans l'application

Ouvrez le fichier `Program.cs` et ajouter les modifications en surbrillance :

```csharp title="Program.cs"
...

builder.Services.AddHttpClient();

// highlight-start
builder.Services
   .AddBlazorise()
   .AddBootstrapProviders()
   .AddFontAwesomeIcons();
// highlight-end

var app = builder.Build();

...
```

## Ajouter les sources Blazorise

Ouvrez le fichier `Pages/_Layout.cshtml` et ajouter les modifications en surbrillance :

```cshtml title="Pages/_Layout.cshtml"
...

	<script src="_framework/blazor.server.js"></script>

// highlight-start
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

	<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
	<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
// highlight-end

</body>
</html>
```

## Importer Blazorise DataGrid

Afin que Blazor reconnaisse le nouveau composant il faut ajouter dans le fichier d'import global `_Imports.razor` l'import suivant à la fin du fichier :

```cshtml title="_Imports.razor"
@using Blazorise.DataGrid
```

## Déclarer la grille

Ouvrez le fichier `Pages/List.razor` et modifier le fichier suite :

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

<h3>List</h3>

<DataGrid TItem="Item"
          Data="@items"
          PageSize="int.MaxValue"
          Responsive>
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).EnchantCategories))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).RepairWith))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
</DataGrid>
```

Votre page affiche désormais une grille dynamique avec l'ensemble de vos données.

## Blazorise Documentation

Vous trouverez à cette adresse la documentation de [Blazorise DataGrid](https://blazorise.com/docs/extensions/datagrid/getting-started).

## Notion : NuGet

Il est essentiel pour toute plateforme de développement moderne de proposer un mécanisme permettant aux développeurs de créer, de partager et d’exploiter le code qui leur est utile. Souvent, ce code est groupé en « packages » contenant le code compilé (sous forme de DLL) ainsi que tout le contenu nécessaire aux projets qui les utilisent.

Dans le cas de .NET (y compris .NET Core), le mécanisme de partage de code pris en charge par Microsoft est NuGet. Il définit la façon dont les packages .NET sont créés, hébergés et utilisés, et fournit des outils pour chacun de ces rôles.

Pour faire simple, un package NuGet est un fichier ZIP avec l’extension .nupkg, qui contient du code compilé (des DLL), d’autres fichiers liés à ce code et un manifeste descriptif qui inclut des informations comme le numéro de version du package. Les développeurs qui ont du code à partager créent des packages et les publient sur un hôte public ou privé. Les consommateurs récupèrent ces packages auprès des hôtes correspondants, les ajoutent à leurs projets, puis appellent leurs fonctionnalités dans le code de leur projet. NuGet gère ensuite lui-même tous les détails intermédiaires.

NuGet prenant en charge à la fois les hôtes privés et l’hôte nuget.org public, il est possible d’utiliser des packages NuGet pour partager du code dont une organisation ou un groupe de travail a l’exclusivité. Ils représentent également un moyen pratique d’intégrer son propre code pour l’utiliser uniquement dans ses propres projets. En bref, un package NuGet est une unité de code partageable, qui ne nécessite ni n’implique aucun mode de partage en particulier.

### Flux des packages entre les créateurs, les hôtes et les consommateurs

Dans son rôle d’hôte public, NuGet gère lui-même le référentiel central de plus de 100 000 packages uniques sur [nuget.org](https://www.nuget.org/). 
Ces packages sont utilisés par des millions de développeurs .NET/.NET Core tous les jours. 
NuGet vous permet également d’héberger des packages à titre privé dans le cloud (par exemple sur Azure DevOps), sur un réseau privé ou même seulement sur votre système de fichiers local.
Ces packages sont ainsi réservés aux développeurs qui ont accès à l’hôte, ce qui permet de les mettre à la disposition d’un groupe spécifique de consommateurs.

Quelle que soit sa nature, un hôte sert de point de connexion entre les créateurs et les consommateurs de packages. 
Les créateurs produisent des packages NuGet pratiques et les publient sur un hôte. 
Les consommateurs recherchent des packages pratiques et compatibles sur les hôtes accessibles, les téléchargent et incluent ces packages dans leurs projets. 
Une fois installés dans un projet, les API des packages sont disponibles pour le reste du code du projet.

![Flux des packages](/img/affichage-donnees/nuget-roles.png)

### Compatibilité du ciblage de packages

Un package « compatible » est un package qui contient des assemblies créés pour au moins une version cible de .NET Framework / Core compatible avec celle du projet qui utilise le package. 
Les développeurs peuvent soit créer des packages propres à une version, comme avec les contrôles UWP, soit prendre en charge un éventail plus large de versions cibles. 
Pour optimiser la compatibilité d’un package, ils ciblent .NET Standard, que tous les projets .NET et .NET Core peuvent exploiter. 
C’est le moyen le plus efficace tant pour les créateurs que pour les consommateurs, car un package unique (qui contient généralement un seul assembly) fonctionne pour tous les projets.

Les développeurs de packages qui ont besoin d’API extérieures à .NET Standard, quant à eux, créent un assembly distinct pour chacune des versions cibles de .NET Framework qu’ils souhaitent prendre en charge, et les intègrent tous dans le même package (« ciblage multiple »). 
Lorsque un consommateur installe un package de ce type, NuGet extrait seulement les assemblies nécessaires au projet. 
Ceci réduit l’encombrement du package dans l’application finale et/ou dans les assemblys produits par ce projet. 
Un package à ciblage multiple est, bien sûr, plus difficile à gérer pour son créateur.

### Gestion des dépendances

La facilité à s’appuyer sur le travail des autres est l’un des aspects les plus puissants d’un système de gestion des packages. 
En conséquence, la plus grande partie du travail effectué par NuGet consiste à gérer cette arborescence ou ce « graphique » de dépendance pour chaque projet. 
Autrement dit, vous devez vous préoccuper seulement des packages que vous utilisez directement dans un projet. 
Si l’un d’entre eux utilise lui-même d’autres packages (et ainsi de suite), NuGet se charge de toutes ces dépendances des niveaux inférieurs.

L’illustration suivante montre un projet qui dépend de cinq packages, qui à leur tour dépendent de plusieurs autres.

![Gestion des dépendances](/img/affichage-donnees/dependency-graph.png)