我正在开发一个MVC 5 Web应用程序。在我的一个Razor Views中,我有一个表格可以输出几行数据。每行数据旁边都有一个删除按钮。当用户单击删除按钮时,我想要弹出Bootstrap模式,并要求用户确认删除。
@foreach (var item in Model.Data) {
<tr>
<td>...</td>
<td>@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#myModal" })</td>
</tr>
}
实际上,当用户单击“删除”按钮时,Modal弹出正常,但我似乎无法获取Actionlink参数中的ID以传递到我的模态中的“确认”按钮,以便随后将其发送到我控制器中的删除操作。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Nomination</h4>
</div>
<div class="modal-body">
Are you sure you wish to delete this nomination?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="mySubmit" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
有人可以帮忙吗?
感谢。
答案 0 :(得分:7)
<script type="text/javascript">
//Everytime we press delete in the table row
$('.delete').click(function(e) {
e.preventDefault();
//Update the item to delete id so our model knows which one to delete
var id = $(this).data('id');
$('#item-to-delete').val(id);
});
//Everytime we press sumbit on the modal form...
$('#mySubmit').click(function() {
//Get the id to delete from the hidden field
var id = $('#item-to-delete').val();
//Call our delete actionresult and pass over this id
$.post(@Url.Action("Delete", "Delete"), { id : id } , function (data) {
alert("Deleted");
});
});
</script>
和你的HTML ...
@Html.Hidden("item-to-delete", "", new { @id = "item-to-delete"})
@foreach (var item in Model.Data) {
<tr>
<td>...</td>
<td><a href="" class="btn btn-danger btn-xs delete" data-toggle= "modal" data-target="#myModal" data-id="@item.id">Delete</a></td>
</tr>
}
我假设您的控制器操作是这样的......
public ActionResult Delete(Guid id)
{
}
答案 1 :(得分:0)
你需要在第二次删除后放置一个null,然后它应该可以工作但是你仍然会遇到这个问题,因为它要尝试做的是打开你的模态中的页面,这是实现它的最好方法你想要做的是对服务器进行ajax调用,并在成功时将数据带回到你的模态周围的div中