Showing a confirm dialog before doing an action in Blazor

  • Gérald Barré

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


@* Grid component from the previous post: *@
<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>

    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}'?"))


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

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

Follow me:
Enjoy this blog?Buy Me A Coffee💖 Sponsor on GitHub