find and solve ||
Please wait.....

Delete Confirmation Popup Dialog in ASP.NET Core

Download source code from here
Delete Confirmation Popup Dialog in ASP.NET Core

I want to get a confirm message for user when  clicking on delete button or an image. If the user selects 'Ok'  or 'Delete' button then delete is done, else if 'Cancel' is clicked nothing happens.Delete is no data recovering process if a user delete something data it will not recover therefore you must be Confirmation message so that if a user mistakenly or intentionally clicks on delete button.In this tutorial I will create a Delete Confirmation Message from javascript and also bootstrap modal using jQuery, HTML and CSS.

In the blog I we'll  try to address Delete Confirmation Poup Up Dialog in ASP.NET Core.You have seen many times we need to get the confirmation from the user about deleting the record. HTML table does not provide any builtin way to do that. I We'll use the bootstrap modal to do the task using javascript function.

There are different types of delete Confirmation but I will show 

  • Show a confirm message before delete using javascript
  • Delete confirmation poup up dialog using bootstrap modal

 Show a confirm message before delete using javascript

Write this in onclick event of the button:

var result = confirm("are you sure you want to delete?");
if (result) {
    //Logic to delete the item


JavaScript code 

function DeleteConfirmation()
  var x = confirm("Are you sure you want to delete?");
  if (x)
      return true;
    return false;

HTML code

<input type="button" onclick="DeleteConfirmation()">

call function direct in your html like as given below

<a href="ControllerName/ActionName" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>

To create a delete confirmation popup dialog in ASP.NET Core, you can use JavaScript to display a modal dialog when the delete button is clicked. Here is an example of how you can implement this using the Bootstrap modal dialog:

  •  Add the Bootstrap CSS and JavaScript files to your project. You can either include these files directly in your HTML file or use a package manager such as npm to install them.
  • Add a delete button to your view, and attach a click event handler to the button using JavaScript.
<button id="btnDelete" class="btn btn-danger">Delete</button>
document.getElementById('btnDelete').addEventListener('click', function() {
    // Show the modal dialog
  • In the click event handler, show the modal dialog using the modal function of the Bootstrap library. Set the content option to the HTML for the modal dialog, and include a "Confirm" button to delete the item and a "Cancel" button to close the modal.

document.getElementById('btnDelete').addEventListener('click', function() {
    // Show the modal dialog
        backdrop: 'static',
        keyboard: false,
        show: true,
        content: `
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            </div>             <div class="modal-body">
                Are you sure you want to delete this item?
            <div class="modal-footer">
                <button type="button" class="btn-btn-danger"> </button>

Delete confirmation poup up dialog using bootstrap modal

  Create New Application in visual studio 2019
  1. Open your visual studio 2017 or grater then 2017
  2. Click on Create a New Project
  3. Select ASP.NET Core Web Application and then Next
  4. Provide a Project name and confirm or change the Location. Select Create
  5. Select the latest version of ASP.NET Core in the drop-down (.NET Core 5.0)and then select Web Application
  6. Under Authentication, select Change and set the authentication to Individual User Accounts and then Select OK

Create SearchValViewModel.cs under Models folder

using System.Collections.Generic;
namespace DeleteConfirmation.Models
    public class SearchValViewModel
        public int Id { get; set;}
        public string Name { get; set;}
        public int Age { get; set;}
        public string Country { get; set; }
        public List<SearchValViewModel> List { get; set;}

Open your HomeController.cs and past this code in your Index view page.

      public IActionResult Index()
            SearchValViewModel model = new();
            model.List = new List<SearchValViewModel> {
            new SearchValViewModel { Id=1, Name="Bill", Age=24,Country="Canada"},
            new SearchValViewModel { Id=2, Name="John", Age=22,Country="US"},
            new SearchValViewModel { Id=3, Name="Doug", Age=14,Country="UK"},
            new SearchValViewModel { Id=4, Name="Sugan", Age=32,Country="Nepal"}
            return View(model);

Open your Index.cshtm view page and past this code as given below

@model DeleteConfirmation.Models.SearchValViewModel
@{     ViewData["Title"] = "Home Page";
<!--display data in html table-->
<div class="card-body">
    <table width="100%" class="table-bordered table-hover">
            @foreach (var item in Model.List)
                        <input type="button" value="Delete" class="btn btn-danger" onclick="deleteConfirm('@item.Name')" />
<!--bootstra pop up confirmation dialog-->
<div class="modal fade" id="delete-conformation" tabindex="-1" role="dialog" aria-labelledby="deleteconformation">
    <div class="modal-dialog" style="width:501px !important;margin:0 auto;">
        <div class="modal-content">
            <div class="modal-header" style="background:#d9534f;color:white;">
                <h4 class="modal-title" id="delete-conformation">
                    Delete Confirmation
            <div class="modal-body">
                <div class="row">
                    <div class="form-group">
                        <div class="col-sm-12">
                                Are you sure you want to delete?
                            <strong id="deletedValueName">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <input type="submit" class="btn btn-danger" value="Delete" onclick="deleteData()" />
@section Scripts{
    <script type="text/javascript">
        //this is only display bootstrap modal pop up dialog
        var deleteConfirm = function (val) {
        //call this function after click on confirm delete button
        var deleteData = function () {
        var id = $('#id').val();
            type: "POST",
            url: '@Url.Action("YourActionName","YourControllerName")',
            data:{id: id},
            success: function (result) {
            error: function () {

Related information

Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

If felt valuable to you, feel free to share it.


Report Response