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的＆＃34; SomeDiv＆＃34;的div中。然后，您可以随意显示它。例如，您可能有一个静态区域，只需在点击每个项目的链接时切换评论。＆＃34; SomeDiv＆＃34;实际上可能是模态窗口的内部部分，然后您可以在加载新内容后显示。但是您想要处理显示。

如何在ActionLink上进行局部视图

1 个答案: