Упражнение. Использование библиотеки JavaScript в приложении Blazor

  • 10 мин

После того как клиент добавляет пиццу в свой заказ, он может выбрать значок X , чтобы удалить пиццу из заказа без подтверждения. Чтобы предотвратить случайное удаление пиццы из заказов клиентов, пиццерия хочет добавить запрос подтверждения на удаление пиццы.

Компания пиццы также хочет, чтобы клиенты могли видеть, как их заказ выполняется в режиме реального времени. Необходимо обновить страницу сведений о заказе, чтобы постоянно запрашивать состояние заказа и предоставлять клиентам отзывы о том, что страница обновляется.

В этом упражнении вы расширяете существующее приложение компании доставки пиццы с помощью взаимодействия JS из компонента Blazor для вызова JavaScript на стороне клиента. Вы интегрируетесь со сторонней библиотекой JavaScript для улучшения всплывающего окна отмены и вызываете метод Blazor из JavaScript, чтобы в режиме реального времени получить состояние заказа клиента.

Клонирование существующего приложения

Чтобы использовать Blazor, убедитесь, что установлен пакет SDK для .NET 8.0 . Дополнительные сведения см. в статье "Создание первого веб-приложения с помощью ASP.NET Core с помощью Blazor".

  1. Откройте Visual Studio Code и откройте интегрированный терминал, выбрав терминал>"Новый терминал " в верхнем меню.

  2. В терминале перейдите в каталог, в котором нужно создать проект.

  3. Выполните следующую команду, чтобы клонировать приложение из GitHub в локальный подкаталог.

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

  4. В верхней строке меню выберите"Открыть папку">

  5. В диалоговом окне "Открыть папку " перейдите к папке BlazingPizza и выберите "Выбрать папку".

    Если Visual Studio Code предложит вам выбрать между отсутствующими ресурсами или неразрешенными зависимостями, выберите Да или Восстановить.

  6. Чтобы запустить приложение и убедиться, что все работает правильно, нажмите клавишу F5 или выберите "Запустить отладку>".

  7. В веб-приложении выберите некоторые пиццы и добавьте их в заказ. Имея несколько пицц в списке заказов, выберите X рядом с одной из пицц и убедитесь, что элемент исчезает без какого-либо предупреждения.

  8. Нажмите клавиши SHIFT+F5 или нажмите кнопку "Остановить>отладку" , чтобы остановить приложение.

Рефакторинг процесса заказа

Чтобы использовать взаимодействие JS, необходимо внедрить абстракцию IJSRuntime.

  1. В обозревателе Visual Studio Code разверните страницы и выберите Index.razor.

  2. В файле Index.razor после инструкции @inject OrderState OrderState добавьте инъекцию IJSRuntime следующим образом.

    @inject OrderState OrderState
@inject IJSRuntime JavaScript

  3. onclick В настоящее время событие для функциональных возможностей для удаления пиццы вызывает OrderState.RemoveConfiguredPizza(configuredPizza)) метод напрямую. Замените весь элемент <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> следующим кодом:

    <button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>

  4. В директиве @code в конце файла добавьте новый метод для вызова собственной функции JavaScript confirm. Если клиент выбирает ОК из запроса, метод вызывает OrderState.RemoveConfiguredPizza удаление пиццы из заказа. В противном случае пицца остается в заказе.

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

    Сервер использует метод IJSRuntime.InvokeAsync для вызова функции confirm на стороне клиента. Ответ из вызова возвращает значение bool. Если результатом диалогового окна подтверждения является true, пицца удаляется из заказа.

  5. Нажмите клавишу F5 или выберите "Запустить отладку>".

  6. В приложении добавьте в заказ некоторые пиццы.

  7. Если в вашем заказе несколько пицц, выберите X рядом с одной из пицц. Появится стандартное диалоговое окно подтверждения JavaScript.

    Снимок экрана: диалоговое окно подтверждения JavaScript по умолчанию.

  8. Нажмите кнопку "ОК " и убедитесь, что пицца удалена из заказа. Выберите X рядом с другой пиццей, выберите "Отмена " в диалоговом окне подтверждения и убедитесь, что пицца остается в вашем заказе.

  9. Нажмите клавиши SHIFT+F5 или нажмите кнопку "Остановить>отладку" , чтобы остановить приложение.

Добавление сторонней библиотеки JavaScript в приложение Blazor

Компания пиццы хочет более четкого текста на кнопках в диалоговом окне подтверждения и хочет использовать свою фирменную символику и стили в диалоговом окне. После некоторых исследований вы решили использовать небольшую библиотеку JavaScript под названием SweetAlert в качестве хорошей замены стандартного диалога.

  1. В обозревателе Visual Studio Code разверните страницы и выберите _Host.cshtml.

  2. В конце файла _Host.cshtml после строки <script src="_framework/blazor.server.js"></script>, но до строки </body> добавьте следующий элемент script, чтобы включить библиотеку SweetAlert.

    <script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>

    Библиотека SweetAlert теперь доступна для вызова на стороне клиента.

  3. Чтобы использовать новую библиотеку, обновите RemovePizzaConfirmation метод в файле Index.razor следующим образом.

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

    Имя "swal" — это идентификатор функции JavaScript, которая поступает из третьей сторонней ссылки sweetalert.js. Код для вызова функции swal выглядит примерно так, как confirm. Большая часть обновления заключается в том, как функция получает параметры. SweetAlert принимает объект JSON, содержащий все необходимые параметры.

  4. В Visual Studio Code нажмите клавишу F5 или нажмите кнопку "Запустить отладку>".

  5. Убедитесь, что confirm в диалоговом окне теперь есть две кнопки, которые говорят "Нет", оставьте его в моем заказе и да, удалите пиццу и что они работают должным образом.

    Снимок экрана: диалоговое окно SweetAlert.

  6. Нажмите клавиши SHIFT+F5 или нажмите кнопку "Остановить>отладку" , чтобы остановить приложение.

Отображение состояния заказа в режиме реального времени на странице заказа

Когда клиент помещает заказ на пиццу, страница "Мои заказы " использует OrderDetail компонент для отображения текущего состояния заказа. Компания пиццы хочет, чтобы клиенты могли видеть, как их заказ выполняется в режиме реального времени. Вы обновляете компонент, чтобы вызывать метод .NET из JavaScript, который непрерывно получает состояние заказа, пока статус не будет отмечен как доставлено.

  1. В обозревателе Visual Studio Code разверните страницы и выберите OrderDetail.razor.

  2. В файле OrderDetail.razor добавьте следующее объявление в верхней части компонента в соответствии с последней @inject инструкцией.

    @implements IDisposable

    Это объявление @implements позволяет определить метод Dispose.

  3. Добавьте спиннер на страницу, чтобы дать клиенту отзыв о том, что страница обновляется. В <div class="track-order-details">над инструкцией @foreach добавьте следующий код:

    @if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}

  4. В директиве @code в объявлении свойства OrderId добавьте следующие элементы.

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

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

  5. Замените существующий метод OnParametersSetAsync следующим кодом:

    protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();

    Теперь код вызывает метод GetLatestOrderStatusUpdatesAsync для обновления состояния заказа.

  6. Добавьте следующие методы после обновленного метода 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();

    Компонент OrderDetail начинает опрос после отрисовки страницы и останавливает опрос при доставке заказа. Хотя состояние заказа является неполным, функция StartPollingTimerAsync использует PeriodicTimer для асинхронного ожидания следующего галока. При доставке заказа анимированный спиннер удаляется, а страница отображает окончательное состояние заказа.

  7. В Visual Studio Code нажмите клавишу F5 или нажмите кнопку "Запустить отладку>".

  8. В приложении заказать пиццу. Перейдите на экран "Мои заказы" и убедитесь, что анимированная красная точка отображается, пока заказ не завершен и исчезает, когда отображается состояние "Доставлено".

    Анимация, показывающая состояние заказа, изменяющееся в режиме реального времени.

  9. Нажмите клавиши SHIFT+F5 или нажмите кнопку "Остановить>отладку" , чтобы остановить приложение.