在正確的表格行中渲染部分視圖

Question

我已查看將值填充到表格中的位置。有一個鏈接可以生成另一個表格（部分視圖），該表格需要顯示在鏈接被點擊的行的下方。如下圖所示，當查看屬性從thirs行中被點擊時，結果顯示在第一行的下方。

腳本查看

<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" ...>多個元素的

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

    }); 
}); 
</script> 

有關部分。你的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(); 
    }); 
})