Övning – Återanvända komponenter genom att skapa en mall

5 minuter

Pizzaföretaget vill att sidan Mina beställningar ska visa kunderna mer information om deras tidigare beställningar, till exempel vilka pizzor som var i ordning och vilken tid kunden gjorde beställningen.

En mall kan hjälpa dig att förbättra visningen och funktionerna på sidan Mina beställningar i appen Blazing Pizza. I den här övningen skapar du en sidnumreringsmallkomponent som du återanvänder på sidan Mina beställningar .

Skapa mallkomponenten för sidnumrering

Skapa en ny blazor-sidnumreringsmallskomponentfil och sidnumreringskontroller.

Skapa filen och lägg till markering

Skapa en ny mapp med namnet Komponenter i blazor-appprojektet i Visual Studio Code. I mappen Komponenter skapar du en ny fil med namnet PaginationComponent.razor.

Lägg till följande Razor-markering i den nyligen skapade mallkomponenten:

@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>

Pålägget accepterar en allmän typparameter TItem, definierar en container för att visa det markerade objektet och använder ett <nav> element för att visa sidnumreringskontrollerna.

Kontrollerna använder ett <ul> element där varje listobjekt är ett sidnummer. Sidnumret definieras baserat på återgivningsfragmentet ItemLabel , som skickas till metoden som en parameter. Återgivningsfragmentet ItemLabel definieras i komponenten som använder mallen.

Lägg till koddirektivet

@code Lägg till direktivet för att hantera vilket objekt som är aktivt.

@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;
}

Föregående kodblock definierar de parametrar som krävs för att använda mallen.

Parametern Items är en lista över TItem objekt som ska visas.
Parametern ItemContent är ett renderingsfragment som definierar hur innehållet i ett markerat objekt ska visas.
Parametern ItemLabel är en funktion som definierar hur etiketten ska visas för varje objekt.

Fältet selectedIndex spårar vilket objekt som är markerat. Metoderna IncrementIndex, DecrementIndexoch SetIndex används för att ändra det valda objektindexet.

Metoden OnInitialized anger det första markerade objektet till det sista objektet i listan.

Uppdatera MyOrders-komponenten

Uppdatera nu sidan Mina beställningar för att använda mallkomponenten.

I Utforskaren expanderar du Sidor och väljer sedan MyOrders.razor.
Efter det senaste @inject direktivet lägger du till @using direktivet:
```
@using BlazingPizza.Components
```
Med den här raden kan komponenten MyOrder använda den nyligen skapade komponentmallen.

Ersätt den befintliga grenen <div class="main"> med följande kod i detif / else if / else logiska blocket i markeringsrutan:else

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>
}

Koden förlitar sig nu på PaginationComponent, som tillhandahåller den allmänna typen av OrderWithStatus, en lista över tidigare beställningar sorterade efter deras skapandedatum och en funktion för att generera etiketten för varje objekt. Återgivningsfragmentet ItemContent definierar markering för varje objekt.

Testa dina uppdateringar

Tryck på F5 i Visual Studio Code eller välj Kör>starta felsökning.
I appen gör du ett par beställningar och väljer sedan Mina beställningar. Kontrollera att du ser en sidnumreringskontroll med en lista över dina beställningar och kan välja en order för att läsa in orderinformationen.
Tryck på Skift+F5 eller välj Kör>stoppa felsökning för att stoppa appen.

Feedback

Var den här sidan till hjälp?