我正在开发一个MVC 5 Web应用程序。在我的一个Razor视图中，我有一个表格可以输出几行数据。除了每行数据之外还有一个删除按钮。当用户单击删除按钮时，我想要弹出Bootstrap模式，并要求用户确认删除。
@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>
}
和我的模态
<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>
$(".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>
在console i get =>将空字符串传递给getElementById（）。
警告，通过GET请求删除项目是不安全的！ 最后我找到了一种使用bootstrap模式对话框来确认删除列表项的方法：
<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();
}
我对此有不同的看法。不是以前的那些不好，但我认为这种方法更好，而且非常简单。
<script>
var path_to_delete;
var root = location.protocol + "//" + location.host;
$("#deleteItem").click(function (e) {
path_to_delete = $(this).data('path');
$('#myform').attr('action', root + path_to_delete);
});
</script><table class="table table-hover" id="list">
<thead class="bg-dark text-white">
<tr>
<th>
Edit
</th>
<th>
Employee
</th>
<th>
Effective Date
</th>
<th>
ST/OT/DT
</th>
<th>
Other Pay
</th>
<th>
Job
</th>
<th>
Pending?
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<a class="btn btn-sm" href="~/Employees/TerminationEdit/@item.Employee_Termination_Info_Id">
<i class="fa fa-lg fa-pencil-alt text-dark"></i>
</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee_Name_Number)
</td>
<td>
@Html.DisplayFor(modelItem => item.Effective_Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee_Time)
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee_Other_Pay)
</td>
<td>
@Html.DisplayFor(modelItem => item.Job_Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Pending)
</td>
<td>
<a id="deleteItem" class="btn btn-sm" data-toggle="modal" data-target="#deleteModal"
data-path="/Employees/TerminationDelete/@item.Employee_Termination_Info_Id">
<i class="fa fa-lg fa-trash-alt text-danger"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
<!-- Logout Modal-->
<div class="modal fade" id="deleteModal" 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">Are you sure?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Are you sure you want to delete this termination record? <br /><span class="text-danger">This cannot be undone.</span></div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
@using (Html.BeginForm("TerminationDelete", "Employees", FormMethod.Post, new { id = "myform", @class = "" }))
{
@Html.AntiForgeryToken()
<input type="submit" value="Delete" id="submitButton" class="btn btn-danger" />
}
</div>
</div>
</div>
</div>那么这里发生的是，页面将遍历模型并绘制删除按钮（使用字体真棒）。请注意，这里是设置data-path属性供以后使用。单击该按钮时，它会立即为模态弹出窗口上的按钮设置表单操作。这很重要，因为它有一个围绕删除按钮的形式，它会将它发送到POST而不是GET，正如Rasika和Vasil Valchev指出的那样。此外，它还具有防伪标记的优点。
问题出在这一行：
$.post(@Url.Action("Deletebook", "book"), { id: id }, function(data) {
alert("data deleted");
});
@Url.Action()位编译成：
$.post(/book/Deletebook, { id: id }, function(data) {
alert("data deleted");
});
您需要将@Url.Action括在单引号中，否则浏览器不知道如何解释/book/Deletebook参数。