Оказание частичного представления в правильной строке таблицы

Question

У меня есть вид, где значения заполняются в таблице. Существует ссылка для создания другой таблицы (Partial View), которая должна отображаться точно под строкой, из которой была нажата ссылка. Как видно на рисунке ниже, когда Просмотр свойств вызывается из строки thirs, результат отображается под первой строкой.

Script

<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", которая будет возвращать только первый элемент только с 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(); 
    }); 
})