如何在 ActionLink 上进行局部视图答案

【问题标题】：How to do a partial view on ActionLink如何在 ActionLink 上进行局部视图
【发布时间】：2014-05-12 19:29:05
【问题描述】：

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

【问题讨论】：

查看@Ajax.ActionLink
如果你要去一个页面直接显示视图，那么它就不是PartialView，它是一个View。 PartialView 显示在父视图内部。 Html.ActionLink 应该转到显示视图（可能使用也可能不使用任何 PartialViews）的操作。
视图未显示在 div 结果中。我只看到部分视图

标签： asp.net-mvc

【解决方案1】：

一旦响应发送到客户端，服务器就完成了。这意味着您不能直接基于单击呈现局部视图，因为这是两个脱节的过程：局部视图在服务器端呈现，而单击在客户端注册，一旦服务器已经退出图片。

每当您谈论使用来自服务器的一些新信息来更改客户端中已经呈现的页面时，您就是在谈论 AJAX，因此您需要在客户端使用 JavaScript 来处理它，这会捕获点击事件并从服务器请求部分视图。这意味着您还需要一个服务器端操作，您的 JavaScript 可以向该操作发送请求并返回您的局部视图。

评论控制器

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

主视图

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

这会将渲染的部分从服务器转储到 id 为“SomeDiv”的 div 中。然后，您可以根据需要显示它。例如，您可能有一个静态区域，当单击每个项目的链接时，它只会切换评论。 “SomeDiv”实际上可能是模态窗口的内部部分，您可以在加载新内容后显示它。但是您想处理显示。

【讨论】：