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);
    }
}

#blazor #.net #asp.net core #web