How to do a partial view on ActionLink

Question

   <table>
    <tr>
        <th>
            Author
        </th>
        <th>
            Title
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
            @Ajax.ActionLink("View Reviews", "View", new { id = item.ID }, new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.InsertAfter })

        </td> 
    </tr>
}

</table>

<div id="result">

</div>
public PartialViewResult View(int id)
        {
            ReviewModel reviewModel = new ReviewModel();
            return PartialView(reviewModel.GetReviews(id));
        }

Check about [@Ajax.ActionLink](http://stackoverflow.com/questions/5586327/how-to-use-ajax-actionlink) — tweray, May 12 '14 at 19:35
If you are going to a page that shows the view directly, then it is not a PartialView, it is a View. A PartialView is shown inside of a parent View. The `Html.ActionLink` should go to an action that shows a View (which may or may not use any PartialViews). — arserbin3, May 12 '14 at 19:36
View doesn't show up in div result. I see only the partial view — sly_Chandan, May 12 '14 at 20:07

score 5 · Accepted Answer · answered May 12 '14 at 20:13

Once the response has been sent to the client, the server is done. That means you can't directly have a partial view rendered based on a click, because those are two disjointed processes: a partial view is rendered server-side, while a click is registered client-side, once the server is already out of the picture.

Anytime you're talking about changing the already rendered page in client with some new information from the server, you're talking about AJAX, so you will need to handle that with JavaScript on the client-side, that catches the click event and requests the partial view from the server. That means you'll also need an action, server-side that your JavaScript can send a request to and that returns your partial view.

ReviewsController

public ActionResult View(int id)
{
    // fetch reviews for `id`

    if (Request.IsAjaxRequest())
    {
        // return partial for AJAX requests
        return PartialView("_ReviewsPartial", reviews);
    }
    else
    {
        // return full view for regular requests
        return View(reviews);
    }
}

Main View

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
            @Html.ActionLink("View Reviews", "View", new { id=item.ID }, new { @class = "GetReviewsLink", data_id = item.ID })
        </td> 
    </tr>
}

<div id="SomeDiv"></div>

JavaScript

$(document).ready(function () {
    $('.GetReviewsLink').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('id');
        $.get('@Url.Action("View")', { id: id }, function (result) {
            $('#SomeDiv').html(result);
        });
    });
});

That will dump the rendered partial from the server into the div with id, "SomeDiv". You can then display it however you want. For example, you may have a static region that will just switch out the reviews as each item's link is clicked. "SomeDiv" may actually be the inner part of a modal window, that you could then show after the new content has been loaded in. However you want to handle the display.

How to do a partial view on ActionLink

1 Answers1