Displaying Bootstrap confirmation message box in ASP.net MVC app - asp.net-mvc

Question

In my project, page table is generating by database content. each row consistes with button called Approve. when I click the button id related row is updated,
My controller as follows,
public ActionResult approveLoanByID(int id)
{
var logic = new LoanDetailsDataLogic();
bool result = logic.approveLoan(id);
return RedirectToAction("UnsuccessLoan");
}
I need to add boostrap confirmation model/box when click the approve button. How can I do this using MVC. My view as follows
Part of my view code
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.LOAN_STATUS_ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.LOAN_STATUS_DES)
</td>
<td>
<input onclick="location.href='#Url.Action("approveLoanByID", "LoanDetails",new { id = item.ID } )'" type="button" class="btn btn-danger" value="Approve" />
</td>
<td>
#*#Html.ActionLink("Checkout and view order list", "rejectLoanByID" , "LoanDetails" , new { id=item.ID }, new { onclick="return confirm('Are you sure you want to click this link?')" })*#
</td>
</tr>
}
I tried somthing like this, but I need to use boostrap model to confirm approve.
sample boostrap model
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="deleteLabel">Deleting a Notification</h4>
</div>
<div class="modal-body">
<p>You have selected to delete this notification.</p>
<p>
If this was the action that you wanted to do,
please confirm your choice, or cancel and return
to the page.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="deleteConfirm">Yes</button>
</div>
</div>
</div>