在正确的 table 行中呈现局部视图

Question

我有视图，其中值填充在 table 中。有一个 link 可以生成另一个 table（部分视图），它需要显示在 link 被单击的行的正下方。如下图第三行点击View Properties，结果显示在第一行下方

脚本

<script type="text/javascript">
$(document).ready(function () {
    $('.links').click(function () {
        $('.View').toggle();

    });
});
</script>

视图的相关部分

<tr>
    <td data-toggle="tooltip" title="@item.DescriptionDE">@Html.ActionLink(item.OptionName, "ViewOptionValues", "OptionValues", new { id = item.OptionID }, null)</td>
    <td>@Html.ActionLink(@item.TechnicalCharacteristic.TCName, "ViewTcSet", "TechnicalCharacteristics", new {id = item.TechnicalCharacteristicID },null)</td>
    <td class="links">
         @Ajax.ActionLink("View Properties", "ViewOptionvalues", "Options", new { id = item.OptionID }, new AjaxOptions { UpdateTargetId="ViewProperty"})|
         @Html.ActionLink("Edit", "Edit", new { id = item.OptionID })|
         @Html.ActionLink("Details", "Details", new { id = item.OptionID })|
         @Html.ActionLink("Delete", "Delete", new { id = item.OptionID })
     </td>
</tr>

<tr style="display:none;overflow-x:auto" class="View"><td colspan="3"><div id="ViewProperty" style="overflow:auto"></div></td></tr>

Answer 1

您生成的 html 无效，因为您有多个带有 <div id="ViewProperty" ...> 的元素。您的 Ajax.ActionLink() 有选项 UpdateTargetId="ViewProperty"，它只会 return 带有 id="ViewProperty" 的第一个元素（不是下一行中的元素）。最后，在您的脚本中，$('.View').toggle(); 使用 class="View".

切换所有行

删除（过时的）Ajax.ActionLink()方法并替换为

<tr>
  ....
  <td>
    <a href="#" class="view" data-id="@item.OptionID">View Properties<a> | @Html.ActionLink(...
  </td>
</tr>

<tr style="display:none;overflow-x:auto"><td colspan="3"><div style="overflow:auto"></div></td></tr>

然后将脚本修改为

var url = '@Url.Action("ViewOptionvalues", "Options")';
$('.view').click(function() {
  var nextRow = $(this).closest('tr').next('tr');
  $.get(url, { id: $(this).data('id') }, function(response) {
    nextRow.find('div').html(response);
    nextRow.toggle();
  });
})

在正确的 table 行中呈现局部视图

Rendering the partial View in the correct table row

html

jquery

partial-views

razor

asp.net-mvc-5