Exercice - Réutiliser des composants en créant un modèle

5 minutes

La société de pizza souhaite que la page Mes commandes affiche les clients plus de détails sur leurs commandes passées, telles que les pizzas qui étaient dans l’ordre et l’heure à laquelle le client a passé la commande.

Un modèle peut vous aider à améliorer l’affichage et la fonctionnalité de la page Mes commandes dans l’application Blazing Pizza. Dans cet exercice, vous créez un composant de modèle de pagination que vous réutilisez dans la page Mes commandes .

Créer le composant de modèle de pagination

Créez un fichier de composant modèle de pagination Blazor et des contrôles de pagination.

Créer le fichier et ajouter le balisage

Dans votre projet d’application Blazor dans Visual Studio Code, créez un dossier nommé Components. Dans le dossier Composants , créez un fichier nommé PaginationComponent.razor.

Dans le composant de modèle nouvellement créé, ajoutez le balisage Razor suivant :

@typeparam TItem

<div class="container-sm py-4">
    @ItemContent(Items.ElementAt(selectedIndex))
</div>
<nav aria-label="Pagination functionality">
    <ul class="pagination pagination-lg justify-content-center">
        <li class="page-item @(previousDisabled ? "disabled" : "")" disabled="@previousDisabled">
            <a class="page-link" @onclick="@(() => SetIndex(0))">
                <span>⏪</span>
            </a>
        </li>
        <li class="page-item @(previousDisabled ? "disabled" : "")" disabled="@previousDisabled">
            <a class="page-link" @onclick="DecrementIndex"><span>⬅️</span></a>
        </li>
        @foreach ((int index, TItem item) in Items.Select((item, index) => (index, item)))
        {
            var isActive = index == selectedIndex;
            <li class="page-item @(isActive ? "active" :"")">
                <a class="page-link" @onclick="@(() => SetIndex(index))">
                    @ItemLabel(item)
                </a>
            </li>
        }
        <li class="page-item @(nextDisabled ? "disabled" : "")" disabled="@nextDisabled">
            <a class="page-link" @onclick="IncrementIndex"><span>➡️</span></a>
        </li>
        <li class="page-item @(nextDisabled ? "disabled" : "")" disabled="@nextDisabled">
            <a class="page-link" @onclick="@(() => SetIndex(Items.Count - 1))">
                <span>⏩</span>
            </a>
        </li>
    </ul>
</nav>

Le balisage accepte un paramètre TItem de type générique, définit un conteneur pour afficher l’élément sélectionné et utilise un élément <nav> pour afficher les contrôles de pagination.

Les contrôles utilisent un élément <ul>, chaque élément de la liste étant un numéro de page. Le numéro de page est défini en fonction du fragment de ItemLabel rendu, qui est transmis à la méthode en tant que paramètre. Le fragment de rendu ItemLabel est défini dans le composant qui utilise le modèle.

Ajouter la directive code

Ajoutez la directive @code pour gérer quel élément est actif.

@code {
    [Parameter, EditorRequired]
    public required List<TItem> Items { get; set; }

    [Parameter, EditorRequired]
    public required RenderFragment<TItem> ItemContent { get; set; }

    [Parameter, EditorRequired]
    public required Func<TItem, MarkupString> ItemLabel { get; set; }

    int selectedIndex;

    bool previousDisabled => selectedIndex == 0;
    bool nextDisabled => selectedIndex == Items.Count - 1;

    void IncrementIndex() => selectedIndex++;
    void DecrementIndex() => selectedIndex--;
    void SetIndex(int index) => selectedIndex = index;

    protected override void OnInitialized() =>
        selectedIndex = Items.Count - 1;
}

Le bloc de code précédent définit les paramètres qui sont nécessaires pour utiliser le modèle.

Le paramètre Items est une liste d’éléments TItem à afficher.
Le paramètre ItemContent est un fragment de rendu qui définit comment afficher le contenu d’un élément sélectionné.
Le paramètre ItemLabel est une fonction qui définit comment afficher l’étiquette pour chaque élément.

Le champ selectedIndex est utilisé pour suivre quel élément est actuellement sélectionné. Les méthodes IncrementIndex, DecrementIndex et SetIndex sont utilisées pour modifier l’index d’élément sélectionné.

La méthode OnInitialized définit l’élément sélectionné initial sur le dernier élément de la liste.

Mettre à jour le composant MyOrders

À présent, mettez à jour la page Mes commandes pour utiliser le composant de modèle.

Dans l’Explorateur, développez Pages , puis sélectionnez MyOrders.razor.
Après la dernière directive @inject, ajoutez la directive @using :
```
@using BlazingPizza.Components
```
Cette ligne permet au composant MyOrder d’utiliser le composant modèle nouvellement créé.

Dans le balisage <div class="main">, dans le bloc logique if / else if / else, remplacez la branche else existante par le code suivant :

else
{
    <PaginationComponent TItem="OrderWithStatus"
        Items="ordersWithStatus.OrderBy(o => o.Order.CreatedTime).ToList()"
        ItemLabel='item => new($"{item.Order.CreatedTime:ddd, MMM. d, yyyy}")'>
        <ItemContent>
            <div class="list-group-item bg-secondary text-white">
                <div class="col">
                    <h5>@($"{context.Order.CreatedTime:dddd, MMMM d, yyyy hh:mm tt}")</h5>
                    Items:
                    <strong>@context.Order.Pizzas.Count</strong>
                </div>
                <div class="col">
                    Status: <strong>@context.StatusText</strong>
                </div>
                @if (@context.StatusText != "Delivered")
                {
                    <div class="col flex-grow-0">
                        <a href="myorders/@context.Order.OrderId" class="btn btn-success">
                            Track &gt;
                        </a>
                    </div>
                }
            </div>
            <div class="list-group-item">
                <div class="col">
                    <OrderReview Order="@context.Order" />
                </div>
            </div>
        </ItemContent>
    </PaginationComponent>
}

Le code s’appuie désormais sur PaginationComponent, fournissant le type générique de OrderWithStatus, une liste des commandes passées triées par date de création et une fonction pour générer l’étiquette pour chaque élément. Le fragment de rendu ItemContent définit le balisage pour chaque élément.

Test des modifications

Dans Visual Studio Code, appuyez sur F5 ou sélectionnez Démarrer>le débogage.
Dans l’application, effectuez quelques commandes, puis sélectionnez Mes commandes. Vérifiez que vous voyez un contrôle de pagination avec une liste de vos commandes et que vous pouvez sélectionner une commande pour en charger les détails.
Appuyez sur Maj+F5 ou sélectionnez Exécuter>Arrêter le débogage pour arrêter l’application.

Commentaires

Cette page a-t-elle été utile ?