Showing a confirm dialog before doing an action in Blazor

In this post, I describe how to show a confirm dialog before doing an action in ASP.NET Core Blazor. In Blazor, you can invoke a JavaScript function using IJSRuntime.

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

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

In this blog post, I will share the Free e-book: Blazor for ASP.NET Web Forms Developers PDF. This book is great for ASP.NET Web Forms developers looking for guidelines. As well as strategies for migrating their existing apps to a modern, open-source, and cross-platform web framework.

In this article, we will discuss the quickest way to use ASP.NET Core Identity for User Login and Registration in a new or existing MVC application.

In this article, you will learn how to use or integrate WordPress in ASP.NET and Running WordPress on ASP.NET Core, without PHP, or any source files on the server. The following demonstration will show you how to add WordPress as a frontend to an existing ASP.NET Core application step by step.

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ Today I will show you how to clear session data after logout from web application using asp.net core... Source code link :...