Dans cet article, nous allons apprendre à ajouter une fonctionnalité de tri dans une liste d'éléments dans une application Blazor.

Supposons que vous ayez déjà développé un système simple de gestion de bibliothèque avec Blazor. Nous allons ajouter une fonctionnalité de tri sur la page de liste des livres.

Fonction de tri

1. Ouvrez Visual Studio 2022 et démarrez le débogage en utilisant l'option "Déboguer -> Démarrer le débogage" ou en appuyant sur F5. Cela générera l'application BlazorAppDemo et l'ouvrira dans un navigateur. Accédez à la page "Liste des livres" en cliquant sur le menu correspondant.
2. Ouvrez le fichier Pages/BookIndex.razor dans l'Explorateur de solutions. Ajoutez les variables suivantes dans la section @code pour gérer le tri:

public string TitreTri { get; set; }
public string DateTri { get; set; }
public string PrixTri { get; set; }

3. Ajoutez également une méthode de tri Trier(MouseEventArgs e, string ordreTri) dans la section @code:

public void Trier(MouseEventArgs e, string ordreTri)
{
    var requeteLivres = from livre in _context.Livre
                        select livre;

    TitreTri = string.IsNullOrEmpty(ordreTri) ? "titre_desc" : "";
    DateTri = ordreTri == "Date" ? "date_desc" : "Date";
    PrixTri = ordreTri == "prix" ? "prix_desc" : "prix";

    switch (ordreTri)
    {
        case "titre_desc":
            requeteLivres = requeteLivres.OrderByDescending(l => l.Titre);
            break;
        case "Date":
            requeteLivres = requeteLivres.OrderBy(l => l.DatePublication);
            break;
        case "date_desc":
            requeteLivres = requeteLivres.OrderByDescending(l => l.DatePublication);
            break;
        case "prix_desc":
            requeteLivres = requeteLivres.OrderByDescending(l => l.Prix);
            break;
        case "prix":
            requeteLivres = requeteLivres.OrderBy(l => l.Prix);
            break;
        default:
            requeteLivres = requeteLivres.OrderBy(l => l.Titre);
            break;
    }

    livres = requeteLivres.ToList();
}

Cette méthode reçoit un paramètre ordreTri qui détermine la colonne et l'ordre du tri. Les options disponibles sont "Titre", "Date", et "Prix". Le tri est alterné entre ascendant et descendant chaque fois que la méthode est appelée.

4. Configurez les liens des titres de colonnes pour appeler la méthode de tri lorsqu'ils sont cliqués:

<table class="table-responsive" width="90%">
    <tr>
        <th><a aria-pressed="true" class="nav-link active" role="button"> Trier(e, @TitreTri))">Titre</a></th>
        <th>Auteur</th>
        <th><a aria-pressed="true" class="nav-link active" role="button"> Trier(e, @PrixTri))">Prix</a></th>
        <th><a aria-pressed="true" class="nav-link active" role="button"> Trier(e, @DateTri))">Date de publication</a></th>
        <th>Stock</th>
        <th>Quantité louée</th>
        <th>Actions</th>
    </tr>
    @foreach (var livre in livres)
    {
        <tr>
            <td>@livre.Titre</td>
            <td>@livre.Auteur</td>
            <td>@livre.Prix</td>
            <td>@livre.DatePublication.ToShortDateString()</td>
            <td>@livre.QuantiteStock</td>
            <td>@livre.QuantiteLouee</td>
            <td>
                <a href="/AjouterLivre?Id=@livre.ID">Éditer</a>
                <button class="btn btn-primary" id="editer"> ModifierLivre(e, @livre.ID))">Modifier</button>
            </td>
        </tr>
    }
</table>

Cette modification ajoute des liens aux titres de colonnes qui appellent la méthode de tri lorsqu'ils sont cliqués, passant le bon paramètre pour spécifier la colonne et l'ordre de tri.