Rendering the partial View in the correct table row

Question

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>

$(this).closest('tr').next('tr').toggle() And remove id="ViewProperty" - your generating invalid html with duplicate id attributes but you will also need to modify the Ajax.ActionLink() (just use jquery/ajax instead) — user3559349
– user3559349, Commented Nov 13, 2015 at 6:41
Now the correct tr is being toggles. But the View is not being rendered. None of the values for UpdateTargetID in Ajax.ActionLink() works. And am I not using Ajax/Jquery now? — Vini
– Vini, Commented Nov 13, 2015 at 6:55
No I mean $.ajax() or simply $.load() (get rid of the obsolete Ajax.ActionLink() method). You have invalid html because of duplicate id attributes. UpdateTargetId="ViewProperty"} updates only the first element with id="ViewProperty" and $('.View').toggle(); toggles all rows — user3559349
– user3559349, Commented Nov 13, 2015 at 6:58
How do I give the link to the function call? As a button? Give me 10 mins to try something in your method. I really do not know what i should do. But i just found an example for a button click. I have to pass a parameter to render the partial view as well. — Vini
– Vini, Commented Nov 13, 2015 at 7:05

score 1 · Accepted Answer · 2015-11-13 07:33:57Z

1

Your generating invalid html because you have multiple elements with <div id="ViewProperty" ...>. Your Ajax.ActionLink() has the option UpdateTargetId="ViewProperty" which will only ever return the first element with id="ViewProperty" (not the element in the next row). And finally, in your script, $('.View').toggle(); toggles all rows with class="View".

Delete the (obsolete) Ajax.ActionLink() method and replace with

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

And then modify your script to

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();
  });
})

edited Nov 13, 2015 at 7:33

answered Nov 13, 2015 at 7:20

user3559349

Sign up to request clarification or add additional context in comments.

7 Comments

Vini Over a year ago

Thanks for the ans. only the tr is being toggled. I debugged and the function is being called. and returns View.

user3559349 Over a year ago

Do you mean the controller methods returns a View? It should return a PartialView And see update - it should have been .find('div') not .children('div')

Vini Over a year ago

Yes. It worked. Worked both on Partial View and View. Thanks a lot.

user3559349 Over a year ago

And you will probably want to include a flag so that its not loaded again if the user clicks it again (just toggles the visibility - and perhaps change the link text to "Hide Properties")

Vini Over a year ago

Now if the user clicks it twice the display is being toggled. and when different properties are clicked it is beign displayed the right way. May be I could change the link text. :)

|

Collectives™ on Stack Overflow

Rendering the partial View in the correct table row

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related