我正在尝试使用bootstrap模式进行对话以确认删除。删除效果很好,除了它没有获取我选择的数据,但它从数据库获取ID顺序的第一个数据。我是客户端编程的新手,所以如果有人能帮助我,那就太好了。
代码是:
[HttpPost]
public async Task<ActionResult> Delete(int id)
{
RepFilter repFilter = await db.RepFilters.FindAsync(id);
db.RepFilters.Remove(repFilter);
await db.SaveChangesAsync();
return RedirectToAction("Index");
}
(razor)
@foreach (var item in Model)
{
using (Html.BeginForm("Delete", "RepFilters", new { id = item.ID }))
{
<tr>
<td>@index</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.Report.Description)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Delete</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">Are you sure you want to delete: <span><b>@item.Description</b></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Delete" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</td>
</tr>
}
}
</tbody>
打开模态的按钮是获得正确的ID,但模式不是!
那么如何使模态采取足够的数据删除?
我试图避免编写javascript并使用数据属性,直到没有其他选择
无论您尝试删除哪个数据,这种模式都具有相同的ID。所以只需添加一个变量来为mmodal指定不同的ID:
using (Html.BeginForm("Delete", "RepFilters", new { id = item.ID }))
{
var myModal = "myModal" + item.ID;
<tr>
<td>...</td>
<td>...</td>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#@myModal">Delete</button>
<!-- Modal -->
<div class="modal fade" id="@myModal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm">
...........<!--And the rest of the modal code-->
实际上,您可能希望在视图中解决很多问题。您循环遍历模型中的项目,并为每个项目创建单独的表单(和模态)。这可能不太理想,但是如果你真的想这样做,你可以在模式的html中添加对项目id的引用。只需添加一个隐藏的输入并将其值设置为item.id.
但是,我不推荐这种方法。我不确定你想要回避JavaScript的原因,但你想在这里创建的功能实际上是非常基本的。
看到这篇文章:Confirm delete modal/dialog with Twitter bootstrap?
编辑:
@foreach (var item in Model)
{
<tr>
<td>@index</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.Report.Description)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
<button type="button" class="btn btn-danger btn-sm" data-item-id="@item.ID" data-item-description="@item.Report.Description" data-toggle="modal" data-target="#confirm-delete">Delete</button>
</td>
</tr>
}
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
Are you sure you want to delete: <span class="description"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Delete" class="btn btn-danger" />
</div>
</div>
</div>
<script>
$('#confirm-delete').on('click', '.btn-ok', function(e) {
var $modalDiv = $(e.delegateTarget);
var id = $(this).data('itemId');
$modalDiv.addClass('loading');
$.post('/RepFilters/Delete/' + id).then(function () {
$modalDiv.modal('hide').removeClass('loading');
});
});
$('#confirm-delete').on('show.bs.modal', function(e) {
var data = $(e.relatedTarget).data();
$('.description', this).text(data.itemDescription);
$('.btn-ok', this).data('itemId', data.itemId);
});
</script>
您首先在jquery中编写一个删除函数。为了显示确认消息,您可以使用甜蜜警报并为sweetalert编写自定义文件。
您必须在视图页面中添加引用sweetalert css和脚本。
function Delete(id) {
var submitdelete=function(){ $.ajax({
url: '@Url.Action("/mycontroller/Delete)',
type: 'Post',
data: { id: id }
})
.done(function() {
$('#' + id).remove();//if you want to delete table row
msgBox.success("Success","Ok");
});}
msgBox.okToContinue("warning", "Are you sure to delete ?", "warning", "ok","cancel", submitdelete);
}
确认对话框
var msgBox = {
message: {
settings: {
Title: "",
OkButtonText: "",
type:"info"
}
},
okToContinue: function(title, text, type, okButtonText,closeButtonText, isConfirmDo) {
swal({
title: title,
text: text,
type: type,
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: okButtonText,
cancelButtonText: closeButtonText,
closeOnConfirm: false,
closeOnCancel: true
},
function(isConfirm) {
if (isConfirm) {
isConfirmDo();
}
});
},
confirmToContinue: function(title, text, type, confirmButtonText, cancelButtonText, isConfirmDo, isNotConfirmDo, showLoader) {
if (!showLoader) {
showLoader = false;
}
swal({
title: title,
text: text,
type: type,
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: confirmButtonText,
cancelButtonText: cancelButtonText,
closeOnConfirm: true,
closeOnCancel: true,
showLoaderOnConfirm: showLoader
},
function(isConfirm) {
if (isConfirm) {
isConfirmDo();
}
});
} ,
success: function (title, text,okButtontex) {
swal({
title: title,
text: text,
type: "success",
confirmButtonText: okButtontex
});
},
info: function (title, text) {
swal({
title: title,
text: text,
type: "info",
confirmButtonText: "OK"
});
},
warning: function (title, text) {
swal({
title: title,
text: text,
type: "warning",
confirmButtonText: "OK"
});
},
error: function (title, text) {
swal({
title: title,
text: text,
type: "error",
confirmButtonText: "OK"
});
},
}
这是一个简单的方法。你应该能够调整我在这里做的事情。这需要非常少的JavaScript代码。
<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指出的那样。此外,它还具有防伪标记的优点。