Ć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

W tym module jest używany zestaw .NET 9.0 SDK. Upewnij się, że masz zainstalowany program .NET 9.0, uruchamiając następujące polecenie w preferowanym terminalu poleceń:

dotnet --list-sdks

Zostanie wyświetlone dane wyjściowe podobne do następującego przykładu:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 9 . Jeśli nic nie jest wyszczególnione lub polecenia nie można znaleźć, zainstaluj najbardziej aktualny zestaw SDK platformy .NET 9.0.

Aby uzyskać więcej informacji, zobacz Tworzenie pierwszej aplikacji internetowej przy użyciu platformy ASP.NET Core przy użyciu platformy Blazor.

Otwórz program Visual Studio Code i otwórz zintegrowany terminal, wybierając pozycję Terminal>Nowy 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 Otwieranie folderu przejdź do folderu BlazingPizza i wybierz pozycję 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 poprawnie, naciśnij F5 lub wybierz pozycję Uruchom debugowanie>.
W aplikacji internetowej wybierz pizze i dodaj je do zamówienia. Z kilkoma pizzami na liście zamówień wybierz znak X obok jednej z pizz i sprawdź, czy przedmiot zniknie bez monitu.
Naciśnij Shift+F5 lub wybierz polecenie Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Refaktoryzacja procesu zamówienia

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

W Eksploratorze programu Visual Studio Code rozwiń Pages, a następnie wybierz Index.razor.
W pliku Index.razor po instrukcji @inject OrderState OrderState dodaj IJSRuntime iniekcję w następujący sposób.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
onclick Obecnie zdarzenie dotyczące funkcji usuwania pizzy wywołuje metodę OrderState.RemoveConfiguredPizza(configuredPizza)) bezpośrednio. 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 w celu usunięcia pizzy 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 wynikiem okna dialogowego potwierdzenia jest true, pizza zostanie usunięta z zamówienia.
Naciśnij F5 lub wybierz Uruchom>Debugowanie.
W aplikacji dodaj pizze do zamówienia.
Z kilkoma pizzami w zamówieniu wybierz znak X obok jednej z pizz. Zostanie wyświetlone standardowe okno dialogowe potwierdzenia języka JavaScript.
Wybierz przycisk OK i sprawdź, czy pizza została usunięta z zamówienia. Wybierz pozycję X obok innej pizzy, wybierz pozycję Anuluj w oknie dialogowym potwierdzenia i sprawdź, czy pizza pozostaje w zamówieniu.
Naciśnij Shift+F5 lub wybierz polecenie Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Dodawanie biblioteki JavaScript innej firmy do aplikacji Blazor

Firma pizzowa chce czytelniejszy tekst na przyciskach w oknie dialogowym potwierdzenia i chce użyć ich marki i stylu w oknie dialogowym. Po kilku badaniach decydujesz się użyć małej biblioteki Języka JavaScript o nazwie SweetAlert jako dobrego zamiennika standardowego okna dialogowego.

W Eksploratorze programu Visual Studio Code rozwiń 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 odwołania podmiotu zewnętrznegosweetalert.js. 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 confirm okno dialogowe 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 polecenie Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Wyświetlanie stanu zamówienia w czasie rzeczywistym na stronie zamówienia

Gdy klient złoży zamówienie na pizzę, strona Moje zamówienia użyje komponentu OrderDetail do pokazania bieżącego stanu 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 Eksploratorze programu Visual Studio Code rozwiń Pages, a następnie wybierz pozycję OrderDetail.razor.
W pliku OrderDetail.razor dodaj następującą deklarację na górze składnika, pod ostatnią instrukcją @inject.
```
@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 Dostarczono.
Naciśnij Shift+F5 lub wybierz polecenie Uruchom>Zatrzymaj debugowanie, aby zatrzymać aplikację.

Sprzężenie zwrotne

Czy ta strona była pomocna?