我正在尝试使用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并使用数据属性，直到没有其他选择
答案 0 :(得分：2)
There are actually quite a few things you may want to address in your view. You are looping through the items in your model, and creating a separate form (and modal)for each item. This is probably not ideal, however if you really want to do it this way you can add a reference to the item id within the html for the modal. Just add a hidden input and set it's value to item.id.
However, I would not recommend this approach. I'm not certain for your reasons on wanting to shy away from JavaScript, but the functionality you want to create here is actually pretty basic.
See this post: Confirm delete modal/dialog with Twitter bootstrap?
Edit:
@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>
答案 1 :(得分：1)
无论您尝试删除哪种数据，这种模式都具有相同的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-->
答案 2 :(得分：0)
你首先在jquery中写一个删除函数。为了显示确认消息你可以使用sweetalert并为sweetalert写一个自定义文件。
你必须在视图页面中添加refrence sweetalert css和脚本。
For Each c In [A:A] If c.Font.Name Like "Sample*" Then c.Font.Name = "Times New Roman" End If Next
确认对话框
./gradlew bootRun
答案 3 :(得分：0)
这是一种简单的方法。您应该能够适应我在这里所做的事情。这需要很少的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属性以供以后使用。单击按钮后，它将立即设置模式弹出窗口上按钮的表单动作。正如Rasika和Vasil Valchev所指出的，这很重要，因为它在Delete按钮周围有一个表单，它将发送给POST而不是GET。另外，它还具有防伪令牌的优点。