find and solve || findandsolve.com
Please wait.....

Delete Confirmation Popup Dialog in ASP.NET Core

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.

Download source code

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
}

or 

JavaScript code 

function DeleteConfirmation()
{
  var x = confirm("Are you sure you want to delete?");
  if (x)
      return true;
  else
    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>

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">
        <thead>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
                <th>
                    Country
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.List)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>@item.Name</td>
                    <td>@item.Age</td>
                    <td>@item.Country</td>
                    <td>
                        <input type="button" value="Delete" class="btn btn-danger" onclick="deleteConfirm('@item.Name')" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<!--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
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <span>
                                Are you sure you want to delete?
                            </span>
                            <strong id="deletedValueName">
                            </strong>
                        </div>
                    </div>
                </div>
                <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()" />
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script type="text/javascript">
        //this is only display bootstrap modal pop up dialog
        var deleteConfirm = function (val) {
            $('#deletedValueName').text(val);
            $('#delete-conformation').modal('show');
        }
        //call this function after click on confirm delete button
        var deleteData = function () {
        $('#divLoading').show();
        var id = $('#id').val();
        $.ajax({
            type: "POST",
            url: '@Url.Action("YourActionName","YourControllerName")',
            data:{id: id},
            success: function (result) {
               $("#delete-conformation").modal('hide');
            },
            error: function () {
                $("#delete-conformation").modal('hide');
            }
        });
       }
    </script>
}

Mahira  khanna

Mahira khanna

I have the skills you need for you company blog, website, or other content materials

Comments



Report Response