How do I render a partial site to another div?

Question

I want a view with a table on the site and when you click on a table Item, i want to update a partial view with the current object I just clicked on. How do I manage to do this?

<table>
    @foreach (var a in annotations)
    {
        <tr>
            <td>
                <label onclick="change stuff to new Annotation">@a.Title</label>
            </td>
        </tr>
    }
</table>
<div id="stuff">@Html.RenderPartial("Go", "new annotation")"</div>

I just changed the example into a newer one. – Tartori Feb 15 '13 at 13:46 — Tartori, Feb 15 '13 at 13:46

score 2 · Accepted Answer · answered Feb 15 '13 at 13:44

You're mixing client-side and server-side code. By the time the click event occurs, you're on the client and server-side code has run and finished.

You could render the partial view in a hidden div and just unhide it on the click event. Something similar to this, perhaps:

<table>
@foreach (var a in annotations)
{
    <tr>
        <td>
            <label>@a.Title</label>
            <div style="display:none;">@Html.RenderPartial("Go", a)</div>
        </td>
    </tr>
}
</table>

<script type="text/javascript">
    $(function () {
        $('table tr td label').click(function () {
            $(this).closest('td').find('div').show();
        });
    });
</script>

There may be a more elegant way to find the correct div in the jQuery selectors, you can perhaps add classes and ids to DOM elements as needed to make it cleaner. If you have a lot of these table rows then I'd also recommend using the jQuery .on() function for binding the click event as it would perform better. Something like this:

<script type="text/javascript">
    $(function () {
        $('body').on('click', 'table tr td label', function () {
            $(this).closest('td').find('div').show();
        });
    });
</script>

This would bind a single click event to the DOM instead of many, with the added bonus that dynamically added rows would still handle the event after the binding takes place.

Well this might work, but I don't want to execute the @Html.RenderPartial all the times when I create the table, it could be huge and it would eat up my performance. Is there some way that i can run it just when i click on it? — Tartori, Feb 15 '13 at 13:48
@Tartori: Ah, I see you recently changed the question. That does change things a bit, yes. A little digging found a nice solution here: http://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc It basically uses AJAX to get the partial view and then renders it to the page. In either case you're going to have to make sure you keep a clean separation of server-side and client-side code. — David, Feb 15 '13 at 13:50
OK thanks, yeah, I added the newer example, saw just that I used something i just tried out... — Tartori, Feb 15 '13 at 13:52

score 0 · Answer 2 · answered Feb 15 '13 at 13:41

your getting your client side and server side code mixed up here.

@Html.RenderPartial("Go", a)

is a server side method that returns some HTML.

<label onclick=

Is client side code. So by the time your client gets the data it looks like this:

<label onclick="The text returned from html.render partial">

I think you need to read up on MVC a bit more to achieve what you want as your fundamentally going down the wrong route here.

How do I render a partial site to another div?

2 Answers2