Cvičení – opakované použití součástí vytvořením šablony

5 min

Společnost pizza chce , aby stránka Moje objednávky zobrazovala zákazníkům další podrobnosti o jejich minulých objednávkách, například o tom, které pizzy byly v objednávce a v jakém čase zákazník objednávku provedl.

Šablona vám může pomoct vylepšit zobrazení a funkčnost stránky Moje objednávky v aplikaci Blazing Pizza. V tomto cvičení vytvoříte komponentu šablony stránkování, kterou znovu použijete na stránce Moje objednávky .

Vytvoření komponenty šablony stránkování

Vytvořte nový soubor komponenty šablony stránkování Blazor a ovládací prvky stránkování.

Vytvoření souboru a přidání revizí

V projektu aplikace Blazor v editoru Visual Studio Code vytvořte novou složku s názvem Components a pak ve složce s názvem PaginationComponent.razor vytvořte nový soubor.

Do nově vytvořené komponenty šablony přidejte následující kód Razor:

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

Kód přijímá parametr TItemobecného typu , definuje kontejner pro zobrazení vybrané položky a používá <nav> element k zobrazení ovládacích prvků stránkování.

Ovládací prvky používají prvek s každou položkou <ul> seznamu, která je číslem stránky. Číslo stránky je definováno fragmentem ItemLabel vykreslení, který se předává jako parametr. Fragment ItemLabel vykreslení je definován v komponentě, která používá šablonu.

Přidání direktivy kódu

Přidejte direktivu @code pro zpracování, která položka je aktivní.

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

Předchozí blok kódu definuje parametry potřebné k použití šablony.

Parametr Items je seznam TItem položek, které se mají zobrazit.
Parametr ItemContent je fragment vykreslení, který definuje, jak zobrazit obsah vybrané položky.
Parametr ItemLabel je funkce, která definuje, jak zobrazit popisek pro každou položku.

Pole selectedIndex sleduje, která položka je aktuálně vybrána. Funkce IncrementIndex, DecrementIndexa SetIndex metody slouží ke změně indexu vybrané položky.

Metoda OnInitialized nastaví počáteční vybranou položku na poslední položku v seznamu.

Aktualizace komponenty MyOrders

Teď aktualizujte stránku Moje objednávky tak, aby používala součást šablony.

V Průzkumníku rozbalte stránky a pak vyberte MyOrders.razor.
Za poslední @inject direktivu přidejte direktivu @using :
```
@using BlazingPizza.Components
```
Tento řádek umožňuje komponentě MyOrder používat nově vytvořenou šablonu komponenty.

<div class="main"> V rámci kódu v logickém if / / else ifelse bloku nahraďte existující else větev následujícím kódem:

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

Kód teď spoléhá na PaginationComponentobecný typ OrderWithStatus, seznam minulých objednávek seřazených podle data vytvoření a funkce, která vygeneruje popisek pro každou položku. Fragment ItemContent vykreslení definuje kód pro každou položku.

Testování aktualizací

V editoru Visual Studio Code stiskněte klávesu F5 nebo vyberte Spustit spuštění>ladění.
V aplikaci vytvořte několik objednávek a pak vyberte Moje objednávky. Ověřte, že se zobrazí ovládací prvek stránkování se seznamem objednávek a můžete vybrat objednávku pro načtení podrobností objednávky.
Stisknutím kláves Shift+F5 nebo výběrem možnosti Spustit>zastavit ladění aplikaci zastavte.