admin管理员组文章数量:1327680
I'm having trouble creating bootstrap confirmation modal in ASP.NET MVC. I've managed to successfully call modal when clicking on delete link inside view, but when I want to confirm, nothing happens.
Index View()
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.CurrentGrade.GradeName)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Surname)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.CurrentGrade.GradeName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Surname)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
@Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.StudentId }, new { @class="element", @data_toggle = "modal", @data_target = "#exampleModalCenter" })
</td>
</tr>
}
</table>
Here is modal that I'm calling:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6>Are you sure that you want to delete this?</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
And finally, here is my simple js script.
$(document).ready(function () {
$('.element').click(function (e) {
$('#exampleModalCenter').modal('show');
if (confirm) {
return true;
} else {
return false;
}
});
});
UPDATE
I tried edit js code according to link that Soham provided but without any luck.
$(document).ready(function () {
$('#exampleModalCenter').on('show.bs.modal', function (e) {
$(this).find('.btn-danger').attr('href', $(e.relatedTarget).data('href'));
$('.debug-url').html('Delete URL: <strong>' + $(this).find('.btn-danger').attr('href') + '</strong>');
});
});
Maybe problem lies in @Html.ActionLink for Delete?
@Html.ActionLink("Delete", "Delete", new { id = item.StudentId }, new { @data_toggle = "modal", @data_target = "#exampleModalCenter" })
I'm having trouble creating bootstrap confirmation modal in ASP.NET MVC. I've managed to successfully call modal when clicking on delete link inside view, but when I want to confirm, nothing happens.
Index View()
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.CurrentGrade.GradeName)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Surname)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.CurrentGrade.GradeName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Surname)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
@Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.StudentId }, new { @class="element", @data_toggle = "modal", @data_target = "#exampleModalCenter" })
</td>
</tr>
}
</table>
Here is modal that I'm calling:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6>Are you sure that you want to delete this?</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
And finally, here is my simple js script.
$(document).ready(function () {
$('.element').click(function (e) {
$('#exampleModalCenter').modal('show');
if (confirm) {
return true;
} else {
return false;
}
});
});
UPDATE
I tried edit js code according to link that Soham provided but without any luck.
$(document).ready(function () {
$('#exampleModalCenter').on('show.bs.modal', function (e) {
$(this).find('.btn-danger').attr('href', $(e.relatedTarget).data('href'));
$('.debug-url').html('Delete URL: <strong>' + $(this).find('.btn-danger').attr('href') + '</strong>');
});
});
Maybe problem lies in @Html.ActionLink for Delete?
@Html.ActionLink("Delete", "Delete", new { id = item.StudentId }, new { @data_toggle = "modal", @data_target = "#exampleModalCenter" })
Share
Improve this question
edited Jan 23, 2018 at 18:15
Svinjica
asked Jan 23, 2018 at 13:54
SvinjicaSvinjica
2,5193 gold badges41 silver badges72 bronze badges
4
- 1 That happens because you expect the popup to behave like the default javascript confirm message. But it doesn't. The default one stops the execution until you press one of the buttons while your custom popup does not. The easiest way to do this with your current setup is to change the click function to make an ajax call to the delete action instead of returning true. – Lidaranis Commented Jan 23, 2018 at 14:10
- You can directly set GET/POST action on your Delete button in your confirmation popup. You just need an ID or some data to identify which row is being deleted. Take a look at this answer. – Soham Commented Jan 23, 2018 at 14:12
-
if (confirm) {
where isconfirm
defined here? – ADyson Commented Jan 23, 2018 at 14:21 - @Soham thanks mate, write answer so I can accept it :) – Svinjica Commented Jan 23, 2018 at 17:29
3 Answers
Reset to default 2I was able to reproduce your issue and found some things required to get confirm modal popup work.
Assumed Delete
action method exists:
[HttpPost]
public ActionResult Delete(int id)
{
// other stuff
return View();
}
Here are those key points:
1) Add data-id
attribute to ActionLink
method.
@Html.ActionLink("Delete", "Delete", new { id=item.StudentId }, new { @class="element",
@data_toggle = "modal", @data_target = "#exampleModalCenter",
@data_id = item.StudentId })
2) Add a hidden field which stores value of StudentId
to delete.
@Html.Hidden("itemid", "", new { id = "itemid" })
3) Add id
element to 'Delete' button in modal popup.
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="Delete" class="btn btn-danger">Delete</button>
</div>
4) Use this script inside document.ready
to show modal popup and make request for 'Delete' button click:
$('.element').click(function (e) {
e.preventDefault();
$('#exampleModalCenter').modal('show');
var id = $(this).data('id');
$('#itemid').val(id);
});
$('#Delete').click(function () {
var studentId = $('#itemid').val();
$.post(@Url.Action("Delete", "Delete"), { id: studentId }, function (data) {
// do something after calling delete action method
// this alert box just an example
alert("Deleted StudentId: " + studentId);
});
$('#exampleModalCenter').modal('hide');
});
Live example: .NET Fiddle
Similar issues:
MVC Actionlink & Bootstrap Modal Submit
bootstrap modal for delete confirmation mvc
If you already have the delete action setup in the controller by entity framework, when you added a controller with actions, it should not be plicated, as all what you have to do after the user confirms the delete is to redirect to the delete action view by using simple JavaScript code and a hidden field to hold the item id to pass it in with the URL string.
The bootstrap dialog modal
<!-- Confirmation modal -->
<div class="modal fade" id="confirmdelete" tabindex="-1" role="dialog" aria-labelledby="confirmdelete" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmdelete">Action Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this record ??</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="action">Delete</button>
</div>
</div>
</div>
</div>
Hidden field to hold the item id to be deleted
Make sure it is placed inside the foreach
loop
@Html.HiddenFor(c => item.ID, new { @id = "hdnItemId" })
Jquery simple code to redirect to the delete action with item id included
$(document).ready(function () {
$('#action').click(function () {
var itemId = $('#hdnItemId').val();
var actionLink = "/Banks/Delete/" + itemId;
window.location.href = actionLink;
});
});
The above answer is correct and easy but jquery code is supposed to be like this:
$(document).ready(function () {
$('#action').click(function () {
var itemId = $('#hdnItemId').val();
var actionLink = "/MyController/MyDeleteAction?id=" + itemId;
window.location.href = actionLink;
});
});
本文标签: javascriptHow to create bootstrap 4 confirmation modal for delete in ASPNET MVCStack Overflow
版权声明:本文标题:javascript - How to create bootstrap 4 confirmation modal for delete in ASP.NET MVC - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742209795a2433497.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论