Cvičení – použití javascriptové knihovny v aplikaci Blazor

10 min

Jakmile zákazník přidá pizzu do objednávky, může vybrat ikonu X a odebrat pizzu z objednávky bez potvrzení. Aby se předešlo tomu, že zákazníci omylem odeberou pizzy ze svých objednávek, chce společnost vyrábějící pizzy, abyste přidali potvrzovací výzvu při odebrání položky.

Pizza společnost také chce, aby zákazníci viděli, jak jejich objednávka probíhá v reálném čase. Musíte aktualizovat stránku s podrobnostmi objednávky tak, aby průběžně dotazovala na stav objednávky a poskytovala zákazníkům zpětnou vazbu o jejím průběhu aktualizace.

V tomto cvičení rozšíříte stávající aplikaci společnosti pro doručování pizzy pomocí JS interop z komponenty Blazor a zavoláte JavaScript na straně klienta. Integrujete se s knihovnou JavaScriptu třetí strany, abyste vylepšili vyskakovací okno pro zrušení, a zavoláte metodu Blazor z JavaScriptu, abyste získali stav objednávky zákazníka v reálném čase.

Klonování existující aplikace

Tento modul používá sadu .NET 9.0 SDK. Spuštěním následujícího příkazu v upřednostňovaném příkazovém terminálu se ujistěte, že máte nainstalované rozhraní .NET 9.0:

dotnet --list-sdks

Zobrazí se výstup podobný následujícímu příkladu:

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

Ujistěte se, že je uvedena verze, která začíná s 9. Pokud žádný není uvedený nebo příkaz nebyl nalezen, nainstalujte nejnovější sadu .NET 9.0 SDK.

Další informace najdete v tématu Vytvoření první webové aplikace s ASP.NET Core pomocí Blazoru.

Otevřete Visual Studio Code a otevřete integrovaný terminál tak, že v horní nabídce vyberete Terminál>Nový terminál .
V terminálu přejděte do adresáře, do kterého chcete projekt vytvořit.

Spuštěním následujícího příkazu naklonujte aplikaci z GitHubu do místního podadresáře.

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

V horním řádku nabídek vyberte Soubor>Otevřít složku.
V dialogovém okně Otevřít složku přejděte do složky BlazingPizza a vyberte Vybrat složku.

Pokud vás Visual Studio Code vyzve k zadání chybějících prostředků nebo nevyřešených závislostí, vyberte Ano nebo Obnovit.
Pokud chcete aplikaci spustit a zkontrolovat, jestli všechno funguje správně, stiskněte klávesu F5 nebo vyberte Spustit ladění>.
Ve webové aplikaci vyberte některé pizzy a přidejte je do objednávky. Když máte v seznamu objednávek několik pizz, vyberte X vedle jedné z pizz a ověřte, že položka zmizí bez výzvy.
Stiskněte Shift+F5 nebo zvolte Zastavit>ladění pro zastavení aplikace.

Refaktoring procesu objednávky

Pokud chcete použít interoperabilitu JS, injektujete IJSRuntime abstrakci.

V Průzkumníku editoru Visual Studio Code rozbalte položku Pages a pak vyberte Index.razor.
Do souboru Index.razor po příkazu @inject OrderState OrderState přidejte injektování IJSRuntime následujícím způsobem.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
V současné době událost funkce onclick, která odebere pizzu, přímo volá metodu OrderState.RemoveConfiguredPizza(configuredPizza)). Celý prvek <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> nahraďte následujícím kódem:
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
Do direktivy @code na konci souboru přidejte novou metodu pro volání nativní javascriptové confirm funkce. Pokud zákazník vybere možnost OK z výzvy, metoda zavolá OrderState.RemoveConfiguredPizza k odebrání pizzy z objednávky. Jinak pizza zůstane v objednávce.
```
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);
    }
}
```
Server používá metodu IJSRuntime.InvokeAsync k volání funkce confirm na straně klienta. Hodnota bool se vrátí jako odpověď z volání. Pokud je výsledkem potvrzovacího dialogového okna true, pizza se z objednávky odebere.
Stiskněte F5 nebo vyberte Spustit>Spustit ladění.
V aplikaci přidejte do objednávky nějaké pizzy.
Když máte v objednávce několik pizz, vyberte X vedle jedné z pizz. Zobrazí se standardní dialogové okno pro potvrzení JavaScriptu.
Vyberte OK a ověřte, že je z vaší objednávky odebrána pizza. Vyberte X vedle jiné pizzy, v dialogovém okně s potvrzením vyberte Storno a ověřte, že pizza zůstane ve vaší objednávce.
Stiskněte Shift+F5 nebo zvolte Zastavit>ladění pro zastavení aplikace.

Přidání knihovny JavaScriptu třetí strany do aplikace Blazor

Společnost pizza chce na tlačítkách v potvrzovacím dialogovém okně jasnější text a chce v dialogovém okně použít jejich branding a styl. Po nějakém výzkumu se rozhodnete použít malou javascriptovou knihovnu s názvem SweetAlert jako dobrou náhradu za standardní dialog.

V Průzkumníku editoru Visual Studio Code rozbalte položku Pages a pak vyberte _Host.cshtml.
Na konec souboru _Host.cshtml po <script src="_framework/blazor.server.js"></script> řádku, ale před </body> řádkem, přidejte následující script prvek, který zahrne knihovnu SweetAlert.
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
Knihovna SweetAlert je nyní k dispozici pro volání na straně klienta.

Chcete-li použít novou knihovnu, aktualizujte metodu RemovePizzaConfirmation v souboru Index.razor následujícím způsobem.

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

Název "swal" je identifikátor funkce JavaScriptu, která pochází z odkazusweetalert.js třetí strany. Kód pro volání swal funkce vypadá podobně jako confirm. Většina aktualizace spočívá v tom, jak funkce přijímá parametry. SweetAlert přijímá objekt JSON, který zahrnuje všechna nastavení, která potřebuje.

V editoru Visual Studio Code stiskněte klávesu F5 nebo vyberte Spustit ladění.
Ověřte, že confirm dialogové okno nyní obsahuje dvě tlačítka, která říkají Ne, nechte ho v mé objednávce a Ano, odeberte pizzu, a že fungují podle očekávání.
Stiskněte Shift+F5 nebo zvolte Zastavit>ladění pro zastavení aplikace.

Zobrazení stavu objednávky v reálném čase na stránce objednávky

Jakmile zákazník umístí objednávku pizzy, stránka Moje objednávky použije komponentu OrderDetail k zobrazení aktuálního stavu objednávky. Společnost pizza chce, aby zákazníci viděli, jak jejich objednávka probíhá v reálném čase. Aktualizujete komponentu tak, aby volala metodu .NET z JavaScriptu, která nepřetržitě získává stav objednávky, dokud se stav nezobrazí jako doručený.

V Průzkumníku editoru Visual Studio Code rozbalte stránky a pak vyberte OrderDetail.razor.
Do souboru OrderDetail.razor přidejte do posledního @inject příkazu následující deklaraci v horní části komponenty.
```
@implements IDisposable
```
Tato deklarace @implements umožňuje definovat metodu Dispose.
Přidejte na stránku spinner, abyste informovali zákazníka, že se stránka aktualizuje. Do <div class="track-order-details">nad příkaz @foreach přidejte následující kód:
```
@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}
```

Do direktivy @code přidejte v rámci deklarace vlastnosti OrderId následující členy.

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

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

Nahraďte existující metodu OnParametersSetAsync následujícím kódem:
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
Kód teď volá metodu GetLatestOrderStatusUpdatesAsync pro aktualizaci stavu objednávky.

Za aktualizovanou metodu OnParametersSetAsync přidejte následující metody.

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();

Komponenta OrderDetail spustí dotazování po vykreslení stránky a zastaví dotazování při doručení objednávky. I když je stav objednávky neúplný, funkce StartPollingTimerAsync používá PeriodicTimer k asynchronnímu čekání na další tik. Po doručení objednávky se odebere animovaný indikátor a na stránce se zobrazí konečný stav objednávky.

V editoru Visual Studio Code stiskněte klávesu F5 nebo vyberte Spustit ladění.
V aplikaci si objednejte pizzu. Přejděte na obrazovku Moje objednávky a ověřte, že se zobrazí animované červené tečky, když je objednávka neúplná a zmizí, když se zobrazí stav Doručeno.
Stiskněte Shift+F5 nebo zvolte Zastavit>ladění pro zastavení aplikace.

Váš názor

Byla tato stránka užitečná?