ASP.NET MVC JavaScript 不能在所有表格行上工作

Question

我有以下asp代码

<div class="widget-content">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th id="table_id">
Context ID
</th>
<th id="">
Context Name
</th>
<th id="">
Context Country
</th>
<th id="">
Context State
</th>
<th id="">
Context City</th>
<th class="td-actions" id="table_action">Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id);
</td>

<td>
@Html.DisplayFor(modelItem => item.ContextName);
</td>

<td>
@Html.DisplayFor(modelItem => item.ContextCountry.CountryName);
</td>

<td>
@Html.DisplayFor(modelItem => item.ContextState.StateName);
</td>
<td>
@Html.DisplayFor(modelItem => item.ContextCity.CityName);
</td>

<td class="td-actions">
<a class="btn btn-default btn-xs" href="#viewModal" id="btnView" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-eye-open"></span> View
</a>
<a class="btn btn-default btn-xs" href="#editModal" id="btnEdit" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-pencil"></span> Edit
</a>
<a class="btn btn-default btn-xs" href="#assignModal" id="btnAssign" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-user"></span> Assign
</a>
<a class="btn btn-default btn-xs" href="@Url.Action("deleteContext","SuperUser", new { id=item.Id})" id="btnDelete" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-remove"></span> Delete
</a>
</td>
</tr>

}
</tbody>
</table>
</div> <!-- /widget-content -->

以及以下用于查看按钮的 java 脚本，该脚本是为每个表格行添加的，如上所示。

<script type="text/javascript">
$('#btnView').click(function (eve) {
$('#modal-content').load("/SuperUser/ViewContext/" + $(this).data("id"));
})
</script>

问题是，该函数仅针对第一个表行调用。

例如。

第 1 行 - 它将在"查看"按钮单击时执行所需的操作

第2 行 - 它不会触发事件，或者，如果之前单击了第 1 行按钮，它将显示第 1 行的数据，这不是我对此代码的预期。

你知道什么会导致这种行为吗？

谢谢！

Answer 1

这样做：

避免使用重复的 ID，如果您有 for 循环，请始终使用类

@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id);
</td>

<td>
@Html.DisplayFor(modelItem => item.ContextName);
</td>

<td>
@Html.DisplayFor(modelItem => item.ContextCountry.CountryName);
</td>

<td>
@Html.DisplayFor(modelItem => item.ContextState.StateName);
</td>

<td>
@Html.DisplayFor(modelItem => item.ContextCity.CityName);
</td>

<td class="td-actions">
<a class="btn btn-default btn-xs btnView" href="#viewModal" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-eye-open"></span> View
</a>
<a class="btn btn-default btn-xs btnEdit" href="#editModal" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-pencil"></span> Edit
</a>
<a class="btn btn-default btn-xs btnAssign" href="#assignModal" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-user"></span> Assign
</a>
<a class="btn btn-default btn-xs" href="@Url.Action("deleteContext","SuperUser", new { id=item.Id})" id="btnDelete" data-toggle="modal" data-id="@item.Id">
<span class="glyphicon glyphicon-remove"></span> Delete
</a>
</td>
</tr>

}

对于您的脚本，则：

<script type="text/javascript">
$('.btnView').click(function (eve) {
$('#modal-content').load("/SuperUser/ViewContext/" + $(this).data("id"));
})
</script>