Showing a confirm dialog before doing an action in Blazor

It's common to show a confirm box before doing some dangerous actions such as deleting some data. Web browsers provide a way to show a confirmation dialog using confirm(message). This function shows a modal dialog with a message and two buttons (Ok, Cancel) and returns a Boolean.

In Blazor, you can invoke a JavaScript function using IJSRuntime. In this case you can use JSRuntime.InvokeAsync<bool>("confirm", "message").

Here's a full example:

@page "/"
@inject IJSRuntime JSRuntime

<h1>Customers</h1>

@* Grid component from the previous post: https://www.meziantou.net/creating-a-datagrid-component-in-blazor.htm *@
<Grid Items="customers" class="table">
    <GridColumn TRowData="Customer" Expression="c => c.Id" />
    <GridColumn TRowData="Customer" Expression="c => c.Name" />
    <GridColumn TRowData="Customer" Expression="c => c.Email" />
    <GridColumn TRowData="Customer" Context="customer">
        <button class="btn btn-danger" @onclick="() => Delete(customer)">Delete</button>
    </GridColumn>
</Grid>

@code{
    List<Customer> customers = GetCustomers();

    async Task Delete(Customer customer)
    {
        if (!await JSRuntime.InvokeAsync<bool>("confirm", $"Are you sure you want to delete the customer '{customer.Name}'?"))
            return;

        customers.Remove(customer);
    }
}

If you need to show a dialog from many locations, you can create an extension method:

public static class ConfirmExtensions
{
    public static ValueTask<bool> Confirm(this IJSRuntime jsRuntime, string message)
    {
        return jsRuntime.InvokeAsync<bool>("confirm", message);
    }
}

#Addition resources

• confirm - MDN
• Never Use a Warning When you Mean Undo
• Call JavaScript functions from .NET methods in ASP.NET Core Blazor

Do you have a question or a suggestion about this post? Contact me!