twitter-bootstrap 用于删除确认 mvc 的引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28852694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap modal for delete confirmation mvc
提问by vebs
I'm developing an MVC 5 web application. Within one of my Razor Views I have a table which spits outs several rows of data.Beside each row of data is a Delete button. When the user clicks the delete button I want to have the Bootstrap Modal popup and ask the user to confirm their deletion.
我正在开发一个 MVC 5 Web 应用程序。在我的一个 Razor 视图中，我有一个表格，它吐出几行数据。每行数据旁边是一个删除按钮。当用户单击删除按钮时，我希望弹出 Bootstrap Modal 并要求用户确认删除。
add line before foreach loop
@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> }
在 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.and my modal
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>
in console i get => Empty string passed to getElementById().
在控制台中，我得到 => 传递给 getElementById() 的空字符串。
回答by Vasil Valchev
Warning, its not safe to delete items via GET request!
Finally I found a way to use bootstrap modal dialog to confirm delete list item:
警告，通过 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>
This is my modal html
这是我的模态 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>
And the javascript part
和 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>
Here it is controller action
这是控制器动作
// 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();
}
回答by Geo Shmeo
I have a different take on doing this. Not that the previous ones were bad, but I think this approach is better, and very easy.
我对这样做有不同的看法。并不是说以前的方法不好，但我认为这种方法更好，而且非常简单。
<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>So what happens here, is that the page will cycle through the model and draw the delete button (using font awesome). Note that here is is setting the data-path attribute for later use. When the button is clicked, it sets the form action for the button on the modal popup immediately. This is important, since it has a form around the delete button, it will send it to a POST and not a GET, as Rasika and Vasil Valchev pointed out. Plus, it has the benefit of the anti-forgery token.
那么这里发生的事情是，页面将在模型中循环并绘制删除按钮（使用很棒的字体）。请注意，这里是设置 data-path 属性以供以后使用。单击按钮时，它会立即为模态弹出窗口上的按钮设置表单操作。这很重要，因为它有一个围绕删除按钮的表单，它会将它发送到 POST 而不是 GET，正如 Rasika 和 Vasil Valchev 指出的那样。此外，它还具有防伪令牌的好处。
回答by alex
The problem is in this line:
问题出在这一行：
$.post(@Url.Action("Deletebook", "book"), { id: id }, function(data) {
alert("data deleted");
});
The @Url.Action()bit compiles into this:
该@Url.Action()位编译为：
$.post(/book/Deletebook, { id: id }, function(data) {
alert("data deleted");
});
You need to have @Url.Actionenclosed in single quotation marks, or else the browser does not know how to interpret the /book/Deletebookargument.
你需要@Url.Action用单引号括起来，否则浏览器不知道如何解释/book/Deletebook参数。
