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
}
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>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
$('#confirmModal').modal({
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">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this item?
</div>
<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
- Open your visual studio 2017 or grater then 2017
- Click on Create a New Project
- Select ASP.NET Core Web Application and then Next
- Provide a Project name and confirm or change the Location. Select Create
- Select the latest version of ASP.NET Core in the drop-down (.NET Core 5.0)and then select Web Application
- 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>
}
Comments