Esercizio - Riutilizzare i componenti creando un modello
L'azienda di pizze vuole che la pagina Ordini personali fornisca ai clienti informazioni più dettagliate sui loro ordini passati, includendo particolari come i tipi di pizze presenti nell'ordine e l'orario in cui il cliente ha effettuato l'ordine.
Un modello consente di migliorare la visualizzazione e la funzionalità della pagina Ordini personali nell'app Blazing Pizza. In questo esercizio viene creato un componente modello di paginazione riutilizzato nella pagina Ordini personali.
Creare il componente modello di paginazione
Creare un nuovo file per il componente modello di paginazione in Blazor, includendo i controlli di paginazione.
Creare il file e aggiungere il markup
Nel progetto dell'app Blazor in Visual Studio Code, creare una nuova cartella denominata Components e quindi creare un nuovo file nella cartella denominata PaginationComponent.razor.
Aggiungere il markup Razor seguente al componente modello appena creato:
@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>
Il markup accetta un parametro generico di tipo TItem, definisce un contenitore per visualizzare l'elemento selezionato e usa un elemento <nav> per mostrare i controlli di paginazione.
I controlli usano un elemento <ul> e ogni elemento dell'elenco è un numero di pagina. Il numero di pagina è definito dal frammento di rendering ItemLabel, che passa come parametro. Il frammento di rendering ItemLabel è definito nel componente che usa il modello.
Aggiungere la direttiva di codice
Aggiungere la direttiva @code per gestire l'elemento attivo.
@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;
}
Il blocco di codice precedente definisce i parametri necessari per usare il modello.
- Il parametro
Itemsè un elenco di elementiTItemda mostrare. - Il parametro
ItemContentè un frammento di rendering che definisce come mostrare il contenuto di un elemento selezionato. - Il parametro
ItemLabelè una funzione che definisce come mostrare l'etichetta per ogni elemento.
Il campo selectedIndex tiene traccia dell’elemento attualmente selezionato. I metodi IncrementIndex, DecrementIndex e SetIndex vengono utilizzati per modificare l'indice dell'elemento selezionato.
Il metodo OnInitialized imposta l'elemento selezionato iniziale sull'ultimo elemento dell'elenco.
Aggiornare il componente MyOrders
Ora, aggiornare la pagina Ordini personali per utilizzare il componente modello.
In Esplora risorse, espandere Pagine e selezionare MyOrders.razor.
Dopo l'ultima direttiva
@inject, aggiungere la direttiva@using:@using BlazingPizza.ComponentsQuesta riga consente al componente
MyOrderdi usare il modello componente appena creato.Nel markup
<div class="main">, nel blocco logicoif/else if/else, sostituire il ramoelseesistente con il codice seguente: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 > </a> </div> } </div> <div class="list-group-item"> <div class="col"> <OrderReview Order="@context.Order" /> </div> </div> </ItemContent> </PaginationComponent> }
Il codice ora si basa su PaginationComponent, fornendo il tipo generico di OrderWithStatus, un elenco di ordini passati ordinati in base alla data di creazione e una funzione per generare l'etichetta per ogni elemento. Il frammento di rendering ItemContent definisce il markup per ogni elemento.
Testare gli aggiornamenti
In Visual Studio Code, premere F5 o selezionare Esegui>Avvia debug.
Effettuare un paio di ordini nell’app e quindi selezionare Ordini personali. Verificare che venga visualizzato un controllo di paginazione con un elenco di ordini e che sia possibile selezionare un ordine e caricare i dettagli.
Premere MAIUSC+F5 o selezionare Esegui>Arresta debug per arrestare l'app.
