Confirmation Boostrap modal posting - asp.net-core

Question

I'm attempting to take a confirm event and turning it into a modal. Here is the original code:
#page
#model AllCustomerModel
#{
ViewData["Title"] = "AllCustomer";
}
<h2>All Customers</h2>
<p>
<a asp-page="Customer">Create New Customer</a>
</p>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayName("Name")
</th>
<th>
#Html.DisplayName("Address")
</th>
<th>
#Html.DisplayName("Country")
</th>
<th>
#Html.DisplayName("City")
</th>
<th>
#Html.DisplayName("Phone")
</th>
<th>Edit | Delete</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.customerList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address)
</td>
<td>
#Html.DisplayFor(modelItem => item.Country)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
<td>
#Html.DisplayFor(modelItem => item.Phone)
</td>
<td>
<a asp-page="./EditCustomer" asp-route-id="#item.CustomerID">Edit</a> |
<a asp-page="./AllCustomer" onclick="return confirm('Are you sure you want to delete this item?');" asp-page-handler="Delete" asp-route-id="#item.CustomerID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
Code Behind,
public ActionResult OnGetDelete(int? id)
{
if (id != null)
{
var data = _context.CustomerTB.Find(id);
_context.Remove(data);
_context.SaveChanges();
}
return RedirectToPage("AllCustomer");
}
Here is what I've tried/currently trying (for brevity sake, I haven't pasted the MVP)
<button type="button" class="btn btn-primary" data-toggle="modal" data-id="#item.CustomerID" data-target="#myModal">
Delete
</button>
<div class="modal fade" id="myModal">
<form id="myForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Customer</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Are you sure you want to delete this customer?
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</form>
</div>
Code Behind,
[BindProperty]
public Customer Customer { get; set; }
public void OnPost()
{
Customer customer = Customer;
if (customer != null)
_context.Remove(_context.CustomerTB.Find(customer.CustomerID));
customerList = _context.CustomerTB.ToList();
}
It will hit the OnPost method but the customer object is empty. Is this a proper way to tackle this issue? What more do I need to add in order to pick up the object on the code behind?

Answer 1

You need to pass the selected customerId to modal(with a hidden type) by javascript when click the button,and then bind the Customer.CustomerId in page using asp-for tag helper.
For example:
<button type="button" class="btn btn-primary myButton" data-toggle="modal" data-id="#item.CustomerID" data-target="#myModal">
Delete
</button>
<div class="modal fade" id="myModal">
<form id="myForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
//..
<div class="modal-body">
<input type="hidden" class="hiddenid" asp-for="Customer.CustomerID" />
Are you sure you want to delete this customer?
</div>
//..
</div>
</div>
</form>
</div>
#section Scripts{
<script>
$('.myButton').on('click', function (event) {
var passedID = $(this).data('id');
$(".modal-body .hiddenid").val(passedID);
});
</script>
}