ASP.NET MVC 按钮单击表格行总是返回第一行（模式）
Posted
技术标签:
【中文标题】ASP.NET MVC 按钮单击表格行总是返回第一行（模式）【英文标题】：ASP.NET MVC Button click on table row always returns first row (modal) 【发布时间】：2021-07-15 09:26:10 【问题描述】：我正在尝试，尝试和尝试，但我没有找到解决方案.. :( 如果有经验的人可以看看就好了。
我的情况：
我有一个包含多行的表和一个带按钮的行。如果那些是“取消”按钮来删除数据记录。一般来说，这工作得很好，但我实现了一个模式对话框，在处理取消之前询问用户是否真的确定取消它。 由于我实现了模态对话框，因此在按钮上单击所选行总是会更改为第一行，而不是用户单击的行。因此，如果用户点击第 2 行中的“取消”按钮，它会在模态弹出窗口中显示第 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">×</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, 菲尔
【问题讨论】：
【参考方案1】：您的问题来自于使用非唯一 ID #exampleModal。因此浏览器总是使用具有该 ID 的第一个元素。
如果您想在 foreach 循环中保留模式，您应该在 ID 中附加一些独特的内容。
【讨论】：
【参考方案2】：@尼雅克
你是国王！谢谢！ 我向数据目标和模式添加了一个唯一标识符，现在它可以工作了。 如此简单……有时你只见树木不见森林:)
现在将代码更改为：
@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">×</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>
【讨论】：
我还建议在删除数据时不要使用 GET。 POST 或 DELETE 是更好的选择，因为它们可以防止意外调用操作（例如 JavaScript 中的错误可能会触发默认链接操作）以上是关于ASP.NET MVC 按钮单击表格行总是返回第一行（模式）的主要内容，如果未能解决你的问题，请参考以下文章
单击按钮后在视图中加载数据而不重新加载页面asp.net mvc中的所有数据
C# & ASP.NET MVC 5 - 从按钮单击执行存储过程，没有返回值
如何查找从 ASP.NET MVC 页面单击的表格单元格值？