Ćwiczenie — ponowne używanie składników przez utworzenie szablonu

5 min

Firma pizzy chce, aby strona Moje zamówienia zawierała klientom więcej szczegółów na temat poprzednich zamówień, takich jak, które pizze były w zamówieniu i kiedy klient złożył zamówienie.

Szablon może pomóc w ulepszaniu wyświetlania i funkcjonalności strony Moje zamówienia w aplikacji Blazing Pizza. W tym ćwiczeniu utworzysz składnik szablonu stronicowania, który będzie używany ponownie na stronie Moje zamówienia .

Tworzenie składnika szablonu stronicowania

Utwórz nowy plik składnika szablonu stronicowania platformy Blazor i kontrolki stronicowania.

Tworzenie pliku i dodawanie znaczników

W projekcie aplikacji Platformy Blazor w programie Visual Studio Code utwórz nowy folder o nazwie Components, a następnie utwórz nowy plik w folderze o nazwie PaginationComponent.razor.

Dodaj następujący znacznik Razor do nowo utworzonego składnika szablonu:

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

Znacznik akceptuje ogólny parametr TItemtypu , definiuje kontener do wyświetlania wybranego elementu i używa <nav> elementu do wyświetlania kontrolek stronicowania.

Kontrolki używają <ul> elementu z każdym elementem listy jako numerem strony. Numer strony jest definiowany przez fragment renderowania ItemLabel , który przekazuje jako parametr. Fragment renderowania ItemLabel jest zdefiniowany w składniku, który używa szablonu.

Dodawanie dyrektywy kodu

Dodaj dyrektywę, @code aby obsłużyć element, który jest aktywny.

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

Powyższy blok kodu definiuje parametry wymagane do korzystania z szablonu.

Parametr Items jest listą TItem elementów do wyświetlenia.
Parametr ItemContent jest fragmentem renderowania, który definiuje sposób wyświetlania zawartości wybranego elementu.
Parametr ItemLabel jest funkcją, która definiuje sposób wyświetlania etykiety dla każdego elementu.

Pole selectedIndex śledzi aktualnie wybrany element. Metody IncrementIndex, DecrementIndexi SetIndex służą do zmiany wybranego indeksu elementów.

Metoda OnInitialized ustawia początkowy wybrany element na ostatni element na liście.

Aktualizowanie składnika MyOrders

Teraz zaktualizuj stronę Moje zamówienia , aby użyć składnika szablonu.

W Eksploratorze rozwiń węzeł Pages , a następnie wybierz pozycję MyOrders.razor.
Po ostatniej @inject dyrektywie dodaj dyrektywę @using :
```
@using BlazingPizza.Components
```
Ten wiersz umożliwia składnikowi MyOrder użycie nowo utworzonego szablonu składnika.

W znaczniku <div class="main"> wif / else if / else bloku logicznym zastąp istniejącą else gałąź następującym kodem:

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

Kod opiera się teraz na elemencie PaginationComponent, podając ogólny typ OrderWithStatus, listę poprzednich zamówień posortowanych według daty utworzenia oraz funkcję służącą do generowania etykiety dla każdego elementu. Fragment renderowania ItemContent definiuje znaczniki dla każdego elementu.

Testowanie aktualizacji

W programie Visual Studio Code naciśnij F5 lub wybierz pozycję Uruchom rozpocznij>debugowanie.
W aplikacji utwórz kilka zamówień, a następnie wybierz pozycję Moje zamówienia. Sprawdź, czy widzisz kontrolkę stronicowania z listą zamówień i możesz wybrać zamówienie, aby załadować szczegóły zamówienia.
Naciśnij Shift+F5 lub wybierz pozycję >debugowanie, aby zatrzymać aplikację.