Web-Development-with-Blazor-Second-Edition/Chapter07/MyBlog/Components/RazorComponents/BlogNavigationLock.razor

@inject IJSRuntime JSRuntime
@implements IDisposable

<NavigationLock 
    ConfirmExternalNavigation="@(CurrentEditContext.IsModified())"
    OnBeforeInternalNavigation="OnBeforeInternalNavigation" />

@code{
    [CascadingParameter]
    public required EditContext CurrentEditContext { get; set; }
    public string InternalNavigationMessage { get; set; } = "You are about to loose changes, are you sure you want to navigate away?";

    protected override Task OnInitializedAsync()
    {
        CurrentEditContext.OnFieldChanged += OnFieldChangedAsync;
        return base.OnInitializedAsync();
    }

    private async void OnFieldChangedAsync(object? sender,FieldChangedEventArgs args)
    {
        await InvokeAsync(StateHasChanged);
    }

    private async Task OnBeforeInternalNavigation(LocationChangingContext context)
    {
        if (CurrentEditContext.IsModified())
        {
            var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm",
                InternalNavigationMessage);

            if (!isConfirmed)
            {
                context.PreventNavigation();
            }
        }
    }

    void IDisposable.Dispose()
    {
        CurrentEditContext.OnFieldChanged -= OnFieldChangedAsync;
    }
}