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 zákazníci omylem odebrali pizzy ze svých objednávek, chce, abyste přidali potvrzovací výzvu k 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 podrobností objednávky tak, aby se průběžně dotazovat na stav objednávky, a dát zákazníkům zpětnou vazbu, že se stránka aktualizuje.

V tomto cvičení rozšíříte stávající aplikaci společnosti pro doručování pizzy pomocí zprostředkovatele JS z komponenty Blazor a zavoláte JavaScript na straně klienta. Integrujete se s knihovnou JavaScriptu třetí strany, která vylepšuje místní okno 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

Pokud chcete použít Blazor, ujistěte se, že máte nainstalovanou sadu .NET 8.0 SDK . Další informace najdete v tématu Kontrola všeho, co je správně nainstalované.

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 Otevřít složku souboru>.
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.
Stisknutím kláves Shift+F5 nebo výběrem možnosti Spustit>zastavit ladění aplikaci zastavte.

Refaktoring procesu objednávky

Chcete-li použít interoperabilitu IJSRuntime JS, vložíte abstrakci.

V Průzkumníku editoru Visual Studio Code rozbalte položku Pages a pak vyberte Index.razor.
Do souboru Index.razor za @inject OrderState OrderState příkaz přidejte IJSRuntime injektáž následujícím způsobem.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
onclick V současné době událost funkce odebrání pizzy volá metodu OrderState.RemoveConfiguredPizza(configuredPizza)) přímo. Nahraďte celý element <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> 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>
```
@code Do direktivy na konec souboru přidejte novou metodu pro volání nativní javascriptové confirm funkce. Pokud zákazník na příkazovém řádku vybere OK , metoda zavolá OrderState.RemoveConfiguredPizza 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 confirm k volání funkce na straně klienta. Odpověď z volání vrátí bool hodnotu. Pokud je truevýsledkem dialogového okna potvrzení, pizza se z objednávky odebere.
Stiskněte klávesu F5 nebo vyberte Spustit>ladění.
V aplikaci přidejte do objednávky nějaké pizzy.
S několika pizzami ve vaší objednávce 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ě potvrzení vyberte Storno a ověřte, že pizza zůstane ve vaší objednávce.
Stisknutím kláves Shift+F5 nebo výběrem možnosti Spustit>zastavit ladění aplikaci zastavte.

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

Společnost pizza chce na tlačítkách v dialogovém okně potvrdit srozumitelně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 konci souboru _Host.cshtml za <script src="_framework/blazor.server.js"></script> řádek, ale před </body> řádek 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 sweetalert.js odkazu třetí strany. Kód pro swal volání 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 spuštění>ladění.
Ověřte, že confirm dialogové okno teď obsahuje dvě tlačítka, která říkají Ne, nechte ho v mém pořadí a Ano, odeberte pizzu a že fungují podle očekávání.
Stisknutím kláves Shift+F5 nebo výběrem možnosti Spustit>zastavit ladění aplikaci zastavte.

Aktualizace stránky objednávky tak, aby zobrazovala stav objednávky v reálném čase

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í.

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 @implements deklarace umožňuje definovat metodu Dispose .
Přidejte na stránku číselník a pošlete zákazníkovi zpětnou vazbu, že se stránka aktualizuje. Do <div class="track-order-details">příkazu 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>
}
```

V direktivě @code přidejte do OrderId deklarace vlastnosti následující členy.

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

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

Nahraďte existující OnParametersSetAsync metodu 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 OnParametersSetAsync metodu 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 se 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ý, StartPollingTimerAsync funkce použije PeriodicTimer k asynchronnímu čekání na další zaškrtnutí. Po doručení objednávky se animovaný číselník odebere a na stránce se zobrazí konečný stav objednávky.

V editoru Visual Studio Code stiskněte klávesu F5 nebo vyberte Spustit spuštění>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.
Stisknutím kláves Shift+F5 nebo výběrem možnosti Spustit>zastavit ladění aplikaci zastavte.

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

Klonování existující aplikace

Refaktoring procesu objednávky

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

Aktualizace stránky objednávky tak, aby zobrazovala stav objednávky v reálném čase

Váš názor