Руководство по всплывающим уведомлениям в ServiceStack Blazor AutoQueryGrid

Правильный подход к отображению toast-уведомлений после операций CRUD в ServiceStack Blazor с использованием AutoQueryGrid

Правильный подход к отображению toast-уведомлений после операций CRUD в ServiceStack Blazor с использованием AutoQueryGrid заключается в использовании встроенных событий, специфичных для операций, таких как OnCreate, OnUpdate и OnDelete, а не события DataLoaded, поскольку эти события срабатывают именно после завершения соответствующей операции CRUD, позволяя отображать соответствующие toast-уведомления.

Содержание

• Понимание событий AutoQueryGrid
• Встроенные события операций CRUD
• Реализация с toast-уведомлениями
• Альтернативные подходы
• Полный пример

Понимание событий AutoQueryGrid

Компонент AutoQueryGrid в ServiceStack Blazor предоставляет несколько встроенных событий, которые срабатывают именно после операций CRUD, что именно то, что нужно для отображения toast-уведомлений. В отличие от события DataLoaded, которое срабатывает при загрузке данных (включая начальную загрузку страницы и обновления), события, специфичные для операций, позволяют точно определить момент, когда пользователь завершает действие CRUD.

Событие DataLoaded предназначено для общих сценариев загрузки данных и не различает разные типы операций. Именно поэтому текущий подход не работает так, как ожидается - событие срабатывает при начальной загрузке, и вы не можете легко различать операцию CRUD и простое обновление данных.

Встроенные события операций CRUD

AutoQueryGrid предоставляет следующие события, специфичные для операций, которые можно использовать для toast-уведомлений:

• OnCreate - Срабатывает после успешного создания новой записи
• OnUpdate - Срабатывает после успешного обновления существующей записи
• OnDelete - Срабатывает после успешного удаления записи
• OnSave - Срабатывает после любой операции сохранения (создание или обновление)

Эти события предоставляют идеальные точки для отображения toast-уведомлений, поскольку они срабатывают именно тогда, когда пользователь завершает действие CRUD, а не просто при загрузке данных.

Ключевое замечание: События, специфичные для операций, передают релевантные данные, которые можно использовать для настройки сообщений toast, таких как затронутая запись или результаты операции.

Реализация с toast-уведомлениями

Вот правильная реализация с использованием встроенных событий операций:

@page "/bookings"
@using ServiceStack.Blazor
@inject ToastService Toast

<h3>Управление бронированиями</h3>
<AutoQueryGrid 
    Model="Booking" 
    Apis="Apis.AutoQuery<QueryBookings,CreateBooking,UpdateBooking,DeleteBooking>()"
    OnCreate="OnCreateCompleted"
    OnUpdate="OnUpdateCompleted"
    OnDelete="OnDeleteCompleted"/>

@code {
    async Task OnCreateCompleted(Booking createdBooking)
    {
        await Toast.Success($"✅ Бронирование '{createdBooking.Id}' успешно создано!");
    }

    async Task OnUpdateCompleted(Booking updatedBooking)
    {
        await Toast.Info($"📝 Бронирование '{updatedBooking.Id}' успешно обновлено!");
    }

    async Task OnDeleteCompleted(Booking deletedBooking)
    {
        await Toast.Warning($"🗑️ Бронирование '{deletedBooking.Id}' успешно удалено!");
    }
}

Ключевые преимущества этого подхода:

1. Специфическая обработка событий: Каждое событие срабатывает только после соответствующей операции CRUD
2. Контекстная информация: События предоставляют затронутую запись, позволяя персонализировать сообщения
3. Чистое разделение: Нет необходимости отслеживать начальные загрузки или вручную фильтровать операции
4. Лучший пользовательский опыт: Мгновенная обратная связь для каждого действия пользователя

Альтернативные подходы

Использование событий нижнего уровня DataGrid

Поскольку AutoQueryGrid построен на основе компонента DataGrid, вы также можете получить доступ к событиям более низкого уровня:

<AutoQueryGrid ...>
    <ChildContent>
        <DataGrid @ref="DataGrid" ... />
    </ChildContent>
</AutoQueryGrid>

Затем обрабатывайте события из базового компонента DataGrid.

Пользовательские обработчики событий

Для более сложных сценариев можно создать пользовательские обработчики событий:

public partial class MyAutoQueryGrid<T> : AutoQueryGrid<T>
{
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        // Подписка на внутренние события
    }
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        // Дополнительная настройка событий
    }
}

Полный пример с расширенными функциями

Вот более полная реализация с дополнительными функциями:

@page "/bookings"
@using ServiceStack.Blazor
@inject ToastService Toast

<h3>Управление бронированиями</h3>

<AutoQueryGrid 
    Model="Booking" 
    Apis="Apis.AutoQuery<QueryBookings,CreateBooking,UpdateBooking,DeleteBooking>()"
    OnCreate="OnCreateCompleted"
    OnUpdate="OnUpdateCompleted"
    OnDelete="OnDeleteCompleted"
    OnSave="OnSaveCompleted"
    OnError="OnErrorOccurred"/>

@code {
    async Task OnCreateCompleted(Booking createdBooking)
    {
        await Toast.Success(
            $"✅ Бронирование успешно создано!", 
            $"ID: {createdBooking.Id}",
            "success"
        );
    }

    async Task OnUpdateCompleted(Booking updatedBooking)
    {
        await Toast.Info(
            $"📝 Бронирование успешно обновлено!", 
            $"ID: {updatedBooking.Id}",
            "info"
        );
    }

    async Task OnDeleteCompleted(Booking deletedBooking)
    {
        await Toast.Warning(
            $"🗑️ Бронирование успешно удалено!", 
            $"ID: {deletedBooking.Id}",
            "warning"
        );
    }

    async Task OnSaveCompleted(Booking savedBooking)
    {
        // Это срабатывает как для создания, так и для обновления
        await Toast.Show(
            $"💾 Бронирование успешно сохранено!",
            $"ID: {savedBooking.Id}",
            "save"
        );
    }

    async Task OnErrorOccurred(Exception ex)
    {
        await Toast.Error(
            $"❌ Операция не удалась!", 
            ex.Message,
            "error"
        );
    }
}

Советы по настройке toast:

1. Используйте разные типы: Используйте разные типы toast (Success, Info, Warning, Error) для различения операций
2. Включайте детали: Добавляйте контекстную информацию, такую как ID записей, для лучшей обратной связи
3. Обрабатывайте ошибки: Включайте обработку ошибок для неудачных операций
4. Кастомизация стилей: Используйте пользовательские классы toast при необходимости

Заключение

Для реализации toast-уведомлений после операций CRUD в ServiceStack Blazor с использованием AutoQueryGrid:

1. Используйте события, специфичные для операций: Замените событие DataLoaded на события OnCreate, OnUpdate и OnDelete, которые срабатывают именно после каждой операции CRUD
2. Используйте параметры событий: Эти события предоставляют объект затронутой записи, позволяя персонализировать сообщения toast
3. Добавляйте обработку ошибок: Включите событие OnError для обработки и отображения сбоев операций
4. Учитывайте пользовательский опыт: Используйте разные типы toast (Success, Info, Warning) для различения между разными типами операций

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

Источники

1. Исходный код компонента AutoQueryGrid - GitHub ServiceStack
2. Документация компонентов ServiceStack Blazor
3. Руководство по toast-уведомлениям в Blazor
4. Примечания к выпуску ServiceStack v6.4
5. Документация шаблона Blazor Auto