Browser/Tab closing alert using DialogService

Radzen.Blazor Components
1

Hi Team,
Greetings of the day !!

Can anyone help me to find a way to show an Unsaved Change alert during Browser/Tab closing using Dialog Service.

Thanks in advance.

2

Hi @niyazpk07,

I don't think this is possible.

3

Thanks @korchev for the quick update.

Is there any other component which we can use and achieve the functionality?

4

Preventing the browser tab closing isn't something that Blazor can handle. I suggest searching online for a JavaScript solution.

5

Found a workaround using JavaScript and Radzen DialogService. But the Dialog pops up and closes immediately and not sure about the reason. Below is the code and your help will be much appreciated

ClosingAlert.js (wwwroot)

function callDotNetFunctionFromJS(functionName) {
DotNet.invokeMethodAsync('DialogService', functionName);
}

ClosingAlert.razor

@using Radzen
@using Radzen.Blazor
@using Microsoft.JSInterop;

@inject IJSRuntime JSRuntime
@inject DialogService DialogService
@inject NotificationService NotificationService

@code{
private static Action callNonStaticFunction;

protected override void OnInitialized()
{
    callNonStaticFunction = ShowInlineVersionDialog;
}

[JSInvokable]
public static void PageAboutToBeReloaded()
{
    callNonStaticFunction.Invoke();
} 

/// <summary>
/// For showing a popup to alert the user on the package version
/// </summary>
private void ShowInlineVersionDialog()
{
    DialogService.OpenAsync("Unsaved Data", ds =>
        @<div>
            <p class="mb-4">You may loose your unsaved data</p>
            <div class="row">
                <div class="col">
                    <RadzenButton Text="Accept" Click="() => ds.Close(true)" ButtonStyle="ButtonStyle.Secondary" Class="mr-1" />
                    <RadzenButton Text="Abort" Click="() => ds.Close(false)" Class="mr-1" />
                </div>
            </div>
        </div>
    );
}

}

MainLayout.razor

@using DialogService.Pages
@inherits LayoutComponentBase

@@

DialogService

<main>
    <div class="top-row px-4">
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <article class="content px-4">
        @Body
    </article>
</main>
<ClosingAlert/>

_Layout.cshtml

@using Microsoft.AspNetCore.Components.Web
@namespace DialogService.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@RenderBody() 
<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<script src="_framework/blazor.server.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="~/closingalert.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@*<script>
    window.addEventListener("beforeunload", function (event) {
        event.preventDefault();
        event.returnValue = "";
    });
</script>*@
6

Just for your note, here the project name is also 'DialogService' and mainly it is used in the "ClosingAlert.js" for a calling a c# method

image
image972×161 17 KB