我正在开发一个 MVC 5 Web 应用程序。在我的一个 Razor 视图中,我有一个表,其中显示了几行数据。每行数据旁边都有一个“删除”按钮。当用户单击删除按钮时,我希望弹出 Bootstrap Modal 并要求用户确认删除。
-
在 foreach 循环之前添加一行
@Html.Hidden("item-to-delete", "", new {@id = "item-to-delete"})
@foreach (var item in Model)
{
<td>
<button type="" class="btn btn-sm blue deleteLead"
data-target="#basic" data-toggle="modal"
data-id="@item.bookid">delete</button>
</td>
}
2.还有我的模态
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<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">book Delete Confirmation</h4>
</div>
<div class="modal-body">
Are you Sure!!! You want to delete this Ad?
</div>
<div class="modal-footer">
<button type="button" class="btn blue" id="btnContinueDelete">Continue</button>
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
script
<script>
$(".deletebook").click(function(e) {
e.preventDefault();
var id = $(this).data('id');
$('#item-to-delete').val(id);
});
$('#btnContinueDelete').click(function() {
var id = $('#item-to-delete').val();
$.post(@Url.Action("Deletebook", "book"), { id: id }, function(data) {
alert("data deleted");
});
});
</script>
在控制台我得到=>
传递给 getElementById() 的空字符串。
警告,通过 GET 请求删除项目并不安全!
最后我找到了一种使用引导模式对话框来确认删除列表项的方法:
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<a id="deleteItem" class="deleteItem" data-target="#basic"
data-toggle="modal"
data-path="@Url.Action("Delete", "MyController", new { id = @item.id })">Delete</a>
</td>
<td>@Html.DisplayFor(modelItem => item.name)</td>
</tr>
}
</tbody>
这是我的模态 html
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<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">Delete Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you want to delete this item?
</div>
<div class="modal-footer">
<button data-dismiss="modal" type="button" class="btn btn-default">Cancel</button>
<button id="btnContinueDelete" type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
以及 javascript 部分
<script>
var path_to_delete;
$(".deleteItem").click(function(e) {
path_to_delete = $(this).data('path');
});
$('#btnContinueDelete').click(function () {
window.location = path_to_delete;
});
</script>
这是控制器动作
// GET: MyController/Delete
[HttpGet]
public ActionResult Delete(int id)
{
var model = Context.my_models.Where(x => x.id == id).FirstOrDefault();
if (model != null)
{
Context.my_models.DeleteOnSubmit(model);
Context.SubmitChanges();
return RedirectToAction("List");
}
return new HttpNotFoundResult();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)