如何在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));
        } 

Answer 1

一旦响应发送到客户端,服务器就完成了.这意味着你不能直接拥有基于点击呈现的局部视图,因为这是两个脱节的过程:部分视图呈现在服务器端,而点击是在客户端注册,一旦服务器已经不在图片.

无论何时你在谈论用服务器中的一些新信息更改客户端中已经呈现的页面,你都在谈论AJAX,所以你需要在客户端用JavaScript处理它,捕获click事件和请求来自服务器的局部视图.这意味着您还需要一个动作,服务器端,您的JavaScript可以发送请求,并返回您的部分视图.

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

主视图

@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"实际上可能是模态窗口的内部部分,然后您可以在加载新内容后显示.但是您想要处理显示.