How can I show a Notification at startup when using InteractiveServer

[Martin Herløv]

I want to show an error if data load fails in OnInitializedAsync. I will save the message in a variable and show it in OnAfterRenderAsync or OnAfterRender.

The toast work when the page is fully loaded and I press the button
I am very open for suggestion on showing messages in another way

I have tried all the life cycle handler but in theory this should work.

public partial class TelerikTest
{
    [Inject] public IJSRuntime JsRuntime { get; set; }
    [Inject] public NavigationManager Navigation { get; set; }
    private TelerikNotification NotificationReference { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && Navigation.Uri.StartsWith("https"))
        {
            StateHasChanged();
            ShowErrorNotification();
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && Navigation.Uri.StartsWith("https"))
        {
            await JsRuntime.InvokeVoidAsync("console.log", "Component rendered!");
            StateHasChanged();
        }
    }
    
    private void ShowErrorNotification()
    {
        NotificationReference.Show(new NotificationModel
        {
            Text = "An error has occurred!",
            ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
            Closable = true,
            CloseAfter = 20000
        });
    }
}

[Martin Herløv]

I ended up using the modal TelerikWindow

[Dimo]

Hi Martin,

Your code works on my side. A potential cause for the unexpected behavior is that the failure in OnInitializedAsync occurs after OnAfterRender. Based on what you say, this is very likely.

The phenomenon should become evident with some debugging or Console.WriteLine.

<TelerikNotification @ref="@NotificationReference" />

@code {
    private TelerikNotification? NotificationReference { get; set; }

    private bool LoadingFailed { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadData();

        await base.OnInitializedAsync();
    }

    private async Task LoadData()
    {
        // The method execution duration determines from where the Notification will be displayed.
        await Task.Delay(1000);

        LoadingFailed = true;
        Console.WriteLine("Loading Failed");

        if (NotificationReference is not null)
        {
            ShowErrorNotification("From LoadData");
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        Console.WriteLine("Loading Failed Check");
        if (firstRender && LoadingFailed)
        {
            LoadingFailed = false;
            ShowErrorNotification("From OnAfterRenderAsync");
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private void ShowErrorNotification(string message)
    {
        NotificationReference?.Show(new NotificationModel
        {
            Text = message,
            ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
            Closable = true,
            CloseAfter = 20000
        });
    }
}

 

Regards,
Dimo
Progress Telerik