Ćwiczenie — używanie biblioteki Języka JavaScript w aplikacji Blazor

10 min

Gdy klient doda pizzę do zamówienia, może wybrać ikonę X, aby usunąć pizzę z zamówienia bez potwierdzenia. Aby uniemożliwić klientom przypadkowe usunięcie pizzy ze swoich zamówień, firma pizzy chce dodać monit o potwierdzenie usunięcia przedmiotów.

Firma pizzy chce również, aby klienci zobaczyli, jak ich zamówienie postępuje w czasie rzeczywistym. Musisz zaktualizować stronę szczegółów zamówienia, aby stale wysyłać zapytania dotyczące stanu zamówienia i przekazać klientom opinię, że strona jest aktualizowana.

W tym ćwiczeniu rozszerzysz istniejącą aplikację firmy dostarczającej pizzę przy użyciu międzyoperacji JS ze składnika Blazor w celu wywołania języka JavaScript po stronie klienta. Integrujesz się z biblioteką języka JavaScript innej firmy, aby ulepszyć wyskakujące okienko anulowania i wywołać metodę Blazor z języka JavaScript, aby uzyskać stan zamówienia klienta w czasie rzeczywistym.

Klonowanie istniejącej aplikacji

Aby użyć platformy Blazor, upewnij się, że masz zainstalowany zestaw SDK platformy .NET 8.0. Aby uzyskać więcej informacji, zobacz Sprawdź, czy wszystko jest poprawnie zainstalowane.

Otwórz program Visual Studio Code i otwórz zintegrowany terminal, wybierając pozycję Terminal>New Terminal z górnego menu.
W terminalu przejdź do katalogu, w którym chcesz utworzyć projekt.

Uruchom następujące polecenie, aby sklonować aplikację z usługi GitHub do podkatalogu lokalnego.

git clone https://github.com/MicrosoftDocs/mslearn-build-interactive-components-blazor.git BlazingPizza

Na górnym pasku menu wybierz pozycję Plik>Otwórz folder.
W oknie dialogowym Otwórz folder przejdź do folderu BlazingPizza i wybierz Wybierz folder.

Jeśli program Visual Studio Code wyświetli monit o brak zasobów lub nierozwiązanych zależności, wybierz pozycję Tak lub Przywróć.
Aby uruchomić aplikację i sprawdzić, czy wszystko działa prawidłowo, naciśnij F5 lub wybierz pozycję Uruchom>Rozpocznij debugowanie.
W aplikacji internetowej wybierz pizze i dodaj je do zamówienia. Mając kilka pizz na liście zamówień, wybierz X obok jednej z pizz i sprawdź, czy przedmiot zniknie bez żadnego ostrzeżenia.
Naciśnij Shift+F5 lub wybierz pozycję Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Refaktoryzacja procesu zamówienia

Aby użyć JS interop, należy wstrzyknąć abstrakcję IJSRuntime.

W programie Visual Studio Code Explorer, rozwiń Pages, a następnie wybierz Index.razor.
W pliku Index.razor po instrukcji @inject OrderState OrderState dodaj iniekcję IJSRuntime w następujący sposób.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
Obecnie zdarzenie onclick bezpośrednio wywołuje metodę OrderState.RemoveConfiguredPizza(configuredPizza)) dla funkcji usuwania pizzy. Zastąp cały element <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> następującym kodem:
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
W dyrektywie @code na końcu pliku dodaj nową metodę, aby wywołać natywną funkcję confirm JavaScript. Jeśli klient wybierze OK z monitu, metoda wywołuje OrderState.RemoveConfiguredPizza, aby usunąć pizzę z zamówienia. W przeciwnym razie pizza pozostaje w zamówieniu.
```
async Task RemovePizzaConfirmation(Pizza removePizza)
{
    if (await JavaScript.InvokeAsync<bool>(
        "confirm",
        $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?"""))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}
```
Serwer używa metody IJSRuntime.InvokeAsync do wywoływania funkcji confirm po stronie klienta. Odpowiedź z wywołania zwraca wartość oznaczoną jako bool. Jeśli wynik okna dialogowego potwierdzania jest true, pizza zostanie usunięta z zamówienia.
Naciśnij F5 lub wybierz pozycję Uruchom>Rozpocznij debugowanie.
W aplikacji dodaj pizze do zamówienia.
Jeśli masz kilka pizz w zamówieniu, wybierz X przy jednej z pizz. Zostanie wyświetlone standardowe okno dialogowe potwierdzenia języka JavaScript.
Wybierz pozycję OK i sprawdź, czy pizza została usunięta z zamówienia. Wybierz X obok innej pizzy, wybierz pozycję Anuluj w oknie dialogowym potwierdzania i sprawdź, czy pizza pozostaje w zamówieniu.
Naciśnij Shift+F5 lub wybierz pozycję Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Dodawanie biblioteki JavaScript innej firmy do aplikacji Blazor

Firma zajmująca się pizzą chce bardziej przejrzystego tekstu na przyciskach w oknie dialogowym potwierdzenia i chce wykorzystać swoją markę i styl w tym oknie. Po kilku badaniach decydujesz się użyć małej biblioteki Języka JavaScript o nazwie SweetAlert jako dobrego zamiennika standardowego okna dialogowego.

W programie Visual Studio Code Explorerrozwiń Pages, a następnie wybierz _Host.cshtml.
Na końcu pliku _Host.cshtml po wierszu <script src="_framework/blazor.server.js"></script>, ale przed wierszem </body> dodaj następujący element script, aby uwzględnić bibliotekę SweetAlert.
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
Biblioteka SweetAlert jest teraz dostępna do użycia po stronie klienta.

Aby użyć nowej biblioteki, zaktualizuj metodę RemovePizzaConfirmation w pliku Index.razor w następujący sposób.

async Task RemovePizzaConfirmation(Pizza removePizza)
{
    var messageParams = new
    {
        title = "Remove Pizza?",
        text = $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?""",
        icon = "warning",
        buttons = new
        {
            abort = new { text = "No, leave it in my order", value = false },
            confirm = new { text = "Yes, remove pizza", value = true }
        },
        dangerMode = true
    };

    if (await JavaScript.InvokeAsync<bool>("swal", messageParams))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}

Nazwa "swal" jest identyfikatorem funkcji JavaScript pochodzącej z dokumentacji sweetalert.js innej firmy. Kod wywołujący funkcję swal wygląda podobnie do confirm. Większość aktualizacji dotyczy sposobu, w jaki funkcja odbiera parametry. SweetAlert akceptuje obiekt JSON zawierający wszystkie wymagane przez niego ustawienia.

W programie Visual Studio Code naciśnij F5 lub wybierz pozycję Uruchom>Rozpocznij debugowanie.
Sprawdź, czy okno dialogowe confirm ma teraz dwa przyciski, które mówią Nie, pozostaw je w mojej kolejności i Tak, usuń pizzęi że działają zgodnie z oczekiwaniami.
Naciśnij Shift+F5 lub wybierz Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Aktualizowanie strony zamówienia w celu wyświetlenia stanu zamówienia w czasie rzeczywistym

Gdy klient zleci zamówienie pizzy, strona Moje zamówienia używa składnika OrderDetail, aby wyświetlić bieżący stan zamówienia. Firma pizzy chce, aby klienci zobaczyli, jak ich zamówienie postępuje w czasie rzeczywistym. Zaktualizuj składnik, aby wywołać metodę .NET z języka JavaScript, która stale pobiera status zamówienia, aż do chwili, gdy status pokaże się jako "dostarczone".

W programie Visual Studio Code Explorerrozwiń Pages, a następnie wybierz OrderDetail.razor.
W pliku OrderDetail.razor dodaj następującą deklarację poniżej ostatniej instrukcji @inject, na początku składnika.
```
@implements IDisposable
```
Ta deklaracja @implements umożliwia zdefiniowanie metody Dispose.
Dodaj pokrętło do strony, aby przekazać klientowi opinię, że strona jest aktualizowana. W <div class="track-order-details">powyżej instrukcji @foreach dodaj następujący kod:
```
@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}
```

W dyrektywie @code pod deklaracją właściwości OrderId dodaj następujące elementy.

bool IsOrderIncomplete =>
    orderWithStatus is null || orderWithStatus.IsDelivered == false;

PeriodicTimer timer = new(TimeSpan.FromSeconds(3));

Zastąp istniejącą metodę OnParametersSetAsync następującym kodem:
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
Kod wywołuje teraz metodę GetLatestOrderStatusUpdatesAsync w celu zaktualizowania stanu zamówienia.

Dodaj następujące metody po zaktualizowanej metodzie OnParametersSetAsync.

protected override Task OnAfterRenderAsync(bool firstRender) =>
    firstRender ? StartPollingTimerAsync() : Task.CompletedTask;

async Task GetLatestOrderStatusUpdatesAsync()
{
    try
    {
        orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>(
            $"{NavigationManager.BaseUri}orders/{OrderId}");
    }
    catch (Exception ex)
    {
        invalidOrder = true;
        Console.Error.WriteLine(ex);
    }
}

async Task StartPollingTimerAsync()
{
    while (IsOrderIncomplete && await timer.WaitForNextTickAsync())
    {
        await GetLatestOrderStatusUpdatesAsync();
        StateHasChanged();
    }
}

public void Dispose() => timer.Dispose();

Składnik OrderDetail rozpoczyna sondowanie po renderowaniu strony i zatrzymuje sondowanie po dostarczeniu zamówienia. Chociaż stan zamówienia jest niekompletny, funkcja StartPollingTimerAsync używa PeriodicTimer do asynchronicznego oczekiwania na następny znacznik. Gdy zamówienie zostanie dostarczone, animowany spinner zostanie usunięty, a na stronie zostanie wyświetlony stan zamówienia końcowego.

W programie Visual Studio Code naciśnij F5 lub wybierz pozycję Uruchom>Rozpocznij debugowanie.
W aplikacji zamów pizzę. Przejdź do ekranu Moje zamówienia i sprawdź, czy animowana czerwona kropka jest wyświetlana, gdy zamówienie jest niekompletne i znika po wyświetleniu stanu Dostarczone.
Naciśnij Shift+F5 lub wybierz pozycję Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Ćwiczenie — używanie biblioteki Języka JavaScript w aplikacji Blazor

Klonowanie istniejącej aplikacji

Refaktoryzacja procesu zamówienia

Dodawanie biblioteki JavaScript innej firmy do aplikacji Blazor

Aktualizowanie strony zamówienia w celu wyświetlenia stanu zamówienia w czasie rzeczywistym

Opinia