Showing a confirm dialog before doing an action in Blazor

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

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.

Blazor for ASP.NET Web Forms Developers PDF

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.

MVC User Registration & Login with ASP.NET Core Identity

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.

Running WordPress on ASP.NET Core with Peachpie

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.

Clear session in asp net core

LIKE | COMMENT | SHARE | SUBSCRIBE Today I will show you how to clear session data after logout from web application using asp.net core... Source code link :...