ASP.NET MVC按钮单击表行总是返回第一行(模态)

Question

我在尝试，尝试，但我没有找到解决方案..：(如果有经验的人能看一看，那就太好了。

我的情况：

我有一张有多行和一行按钮的表。如果这些是"；取消"；按钮删除数据记录。一般来说，这是完美的，但我实现了一个模式对话框，在处理取消之前询问用户是否真的确定要取消。由于我实现了模态对话框，在按钮上单击所选的行总是更改为第一行，而不是用户单击的行；取消"；按钮，它在模式弹出窗口中显示第1行的数据，并将第1行ID重定向到控制器。

我的观点：

@model ViewModels.ServicesViewModel
<table class="table table-hover">
<tr>
<th>DB Name</th>
<th>DB Description</th>
<th>DB Version</th>
<th>Access valid until</th>
<th>Action</th>
</tr>
@foreach (var item in Model.AssignedDatabases)
{
<tr>
<td style="width:20%">@item.DB_Name</td>
<td style="width:35%">@item.DB_Description</td>
<td style="width:10%">@item.DB_Version</td>
<td style="width:15%">@item.ExpiryDate</td>
<td style="width:20%">
@if (item.RequestState.Equals("Open"))
{
<a href="#"><i class="btn btn-info btn-md" style="font-family:Arial">Pending</i></a>
}
else
{
<a href="#"><i data-toggle="modal" data-target="#exampleModal" class="btn btn-danger btn-md" style="font-family:Arial">Cancel</i></a>
}
@if (Model.ResponsibleDBs.Exists(x => x.DB_UID == item.DB_UID))
{
<a href="@Url.Action("Manage", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Manage</i></a>
}
@using (Html.BeginForm("Delete", "AssignedDatabases", FormMethod.Post))
{
<div id="exampleModal" class="modal" tabindex="3" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Do you really want to cancel the access to @item.DB_Name ?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-footer">
<a href="@Url.Action("Delete", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Yes</i></a>
<a href=""><i data-dismiss="modal" class="btn btn-danger btn-md" style="font-family: Arial">No</i></a>
</div>
</div>
</div>
</div>
}
</td>
</tr>
}
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<a href="@Url.Action("RequestDatabase", "RequestDatabase")"><i class="btn btn-success btn-md" style="font-family:Arial">Request new</i></a>
</td>
</tr>
</table>

<script type="text/javascript">
$(function () {
$('body').on('click', 'a.modal-link', function (e) {
e.preventDefault();
$("#modal").remove();
// Get the Details action URL
var url = $(this).attr("href");
//Make the Ajax call and render modal when response is available
$.get(url, function (data) {
$(data).modal();
});
});
});
</script>

有人知道我做错了什么吗？非常感谢。

BR，Phil

Answer 1

您的问题来自非唯一ID#exampleModal的使用。因此，浏览器总是使用具有该ID的第一个元素。

如果你想把模态留在foreach循环中，你应该在ID上附加一些唯一的东西。

Answer 2

@Niyak

你是国王！非常感谢。我为datatarget和modal添加了一个唯一的标识符，现在它可以工作了。这么简单。。。有时你看不到森林里的树木：(

现在将代码更改为：

@model ViewModels.ServicesViewModel
<table class="table table-hover">
<tr>
<th>DB Name</th>
<th>DB Description</th>
<th>DB Version</th>
<th>Access valid until</th>
<th>Action</th>
</tr>
@foreach (var item in Model.AssignedDatabases)
{
var dataTargetCancel = "#ModalCancel" + item.DB_UID;
var modalID = "ModalCancel" + item.DB_UID;
<tr>
<td style="width:20%">@item.DB_Name</td>
<td style="width:35%">@item.DB_Description</td>
<td style="width:10%">@item.DB_Version</td>
<td style="width:15%">@item.ExpiryDate</td>
<td style="width:20%">
@if (item.RequestState.Equals("Open"))
{
<a href="#"><i class="btn btn-info btn-md" style="font-family:Arial">Pending</i></a>
}
else
{
<a href="#"><i data-toggle="modal" data-target="@dataTargetCancel" class="btn btn-danger btn-md" style="font-family:Arial">Cancel</i></a>
}
@if (Model.ResponsibleDBs.Exists(x => x.DB_UID == item.DB_UID))
{
<a href="@Url.Action("Manage", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Manage</i></a>
}
@using (Html.BeginForm("Delete", "AssignedDatabases", FormMethod.Post))
{
<div id="@modalID" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Do you really want to cancel the access to @item.DB_Name ?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-footer">
<a href="@Url.Action("Delete", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Yes</i></a>
<a href=""><i data-dismiss="modal" class="btn btn-danger btn-md" style="font-family: Arial">No</i></a>
</div>
</div>
</div>
</div>
}
</td>
</tr>
}
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<a href="@Url.Action("RequestDatabase", "RequestDatabase")"><i class="btn btn-success btn-md" style="font-family:Arial">Request new</i></a>
</td>
</tr>
</table>

<script type="text/javascript">
$(function () {
$('body').on('click', 'a.modal-link', function (e) {
e.preventDefault();
$("#modal").remove();
// Get the Details action URL
var url = $(this).attr("href");
//Make the Ajax call and render modal when response is available
$.get(url, function (data) {
$(data).modal();
});
});
});
</script>