I have View where the values are populated in a table. There is a link to generate another table(Partial View) which needs to be displayed exactly below the row from where the link was clicked. As seen in the figure below when View Properties is clicked from the thirs row, the result is displayed below the first row.

Script

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

    });
});
</script>

Relevant part of the View

<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>

Sample output

Related posts

Recent Viewed